[JavaScript]클래스 자료형과 객체(+ in 연산자, with구문)

🤔클래스 자료형과 객체

ES6에서는 class 키워드로 클래스 자료형을 작성하여 객체 생성 가능 - 내부적으로 클래스 함수(프로토타입)로 처리

 

실습예제

Human 클래스 작성

class Human {

//constructor 키워드로 생성자 함수 작성

      constructor(num) {

//this 키워드를 사용한 변수에 매개변수로 전달받은 값 저장 - 프로퍼티

       this.num=num;

      }

}

 

 

extends 키워드를 사용하여 부모클래스를 상속받아 자식클래스 작성 가능

=> 부모클래스의 프로퍼티와 메소드를 상속받아 사용 가능

class Student extends Human {

     constructor(num, name, address) {

       //super : 부모클래스의 객체의 참조하기 위한 키워드

       //super 키워드로 부모클래스의 생성자 함수를 호출하여 부모클래스의 객체 생성

       super(num);

       this.name=name;

       this.address=address;

        }

 

     //메소드 선언 - function 키워드 없이 함수 작성

     // => 객체와 상관없이 클래스 자료형에 하나만 생성되어 사용

     display() {

       alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address);

     }

 

     setValue(num, name, address) {

       this.num=num;

       this.name=name;

       this.address=address;

     } 

}

 

new 연산자로 클래스의 생성자 함수를 호출하여 객체 생성

=> 생성자 함수는 클래스의 이름으로 호출

let student=new Student(1000, "홍길동", "서울시 강남구");

alert("클래스의 자료형 = "+typeof(Student));//클래스의 자료형 = function

alert("변수의 자료형 = "+typeof(student));//변수의 자료형 = object

 

//setValue 메소드를 호출하여, 값을 변경할 수 있음

student.setValue(2000, "임꺽정", "서울시 종로구");

student.display();

student.display() 의 결과

 

 

객체의 요소(프로퍼티 또는 메소드)는 . 연산자를 사용하여 접근 가능함.

alert("학번 = "+student.num+", 이름 = "+student.name+", 주소 = "+student.address);

student.display();

 

객체의 요소(프로퍼티 또는 메소드)는 [ ] 연산자를 사용하여도 접근 가능함.

alert("학번 = "+student["num"]+", 이름 = "+student["name"]+", 주소 = "+student["address"]);

student["display"]();

 

=> 결과는 당연히 위의 student.display(); 결과와 같음.

 

 

자바스크립트는 생성된 객체에 프로퍼티 또는 메소드를 추가, 변경, 삭제 가능

student.phone="010-1234-5678";//객체에 프로퍼티 추가

 

//객체에 저장된 메소드 변경 처리

student.display=function() {

alert("학번 = "+this.num+", 이름 = "+this.name+", 주소 = "+this.address+", 전화번호 = "+this.phone);

}

 

student.display();

전화번호까지 추가됨

 

삭제는..

//delete(객체요소) : 객체에 저장된 프로퍼티 또는 메소드를 제거하는 함수

delete(student.phone);//객체의 프로퍼티 삭제

 

//객체의 요소가 아닌 경우 [undefined] 자료형으로 처리

student.display();

 

 

+in 연산자 : 객체의 프로퍼티 또는 메소드가 아닌 경우 [false]를 제공하고 객체의 프로퍼티 또는 메소드인 경우 [true]를 제공

형식) "요소이름" in 객체변수명

alert("num" in student);//true

alert("name" in student);//true

alert("phone" in student);//false

 

 

for 구문을 사용하여 객체의 요소(프로퍼티 또는 메소드)의 이름을 차례대로 제공받아 변수에 저장하여 일괄처리 가능

형식) for(변수명 in 객체변수명) { 명령; 명령; ... }

for(variable in student) {

  alert(variable);//=>num,name,address로 출력됨

 

  alert(student.variable);//undefined

변수에 저장된 요소명으로 객체의 요소에 접근하기 위해 [] 연산자 사용

  alert(student[variable]); // =>2000, 임꺽정, 서울시 종로구 가 차례대로 경고창에 뜸

} 

 

+with 구문을 사용하여 블럭 내부에서 객체의 요소를 변수처럼 사용할 수 있는 기능 제공

형식) with(객체변수명) { 명령; 명령; ... }

with(student) {

alert("학번 = "+num+", 이름 = "+name+", 주소 = "+address);

}

 

=> with구문 안에서는  student.num 이런식으로 사용하지 않고, 바로 num만 써도 아래와 같이 실행됨