[JS] Object & method

객체

 

객체란? 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key, value로 이루어져있다.

일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않으나 사용해도 좋다.

 

 

var person = {
//   key    value
    name : "kiwon",     //하나의 프로퍼티
    age : "28",
};

 

 

자바스크리트는 프로토타입 기반 객체 지향 언어로서 클래스 기반 객체지향 언어와는 달리 다양한 객체생성 방법을 지원한다.

 

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스(ES6)

이 중에서 가장 일반적이고 간단한 방법은 객체 리터럴을 사용한다.

변수에 할당되는 시점에 자바스크립트엔진은 객체 리터럴을 생성한다.

 

var person2 = {
    name: "hyun",
    sayHello : function() {
        console.log(`Hello my name is ${this.name}`);
    }
};

console.log(typeof person2);
console.log(person2);

 

 

 

프로퍼티를 생성할 때 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 해줘야 한다.

 

 

var person3 = {
    name: "hyunki",
    "last-name": "won", //따옴표를 사용하지 않으면 -연산자가 있는 표현식으로 해석한다.
};console.log(person3)

 

 

프로퍼티를 동적으로 생성할 수도 있다.

 

var obj = {};
var key = "hello";
obj[key] = "world!!!";
console.log(obj); //{hello: world!!!}

 

 

메서드

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값으로 사용가능 하다.

함수도 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용할 수 있다.

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.

 

var circle = {
    radius: 5,
    getDiameter: function(){
        return 2 * this.radius;  //this는 circle을 가리킨다
    }
}
//this는 객체 자신을 가리키는 참조변수다.
console.log(circle.getDiameter()); //10

 

 

프로퍼티 접근

• 마침표 프로퍼티 접근(.)
• 대괄호 프로퍼티 접근([])

대괄호 표기법을 사용한느 경우 키는 반드시 따옴표로 묶어줘야 한다.

 

 

-프로퍼티 값 갱신-

 

var person5 = {
    name: "kiwon",
}
person5.name = "won";
console.log(person5.name);

 

 

-프로퍼티 동적 생성-

 

var person6 = {
    name: "kiwon",
};

person6.age = 20;
console.log(person6) //{name: "kiwon", age: 20};

 

 

-프로퍼티 삭제-

 

delete 연산자는 객체의 프로퍼티를 삭제한다.

존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

 

 

var person7 = {
    name: "kiwon",
}
delete person7.age;
console.log(person7)
person7.age = 20;
console.log(person7)
delete person7.age;
console.log(person7)

 

 

ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 값을 생략할 수 있다.

 

let x = 7, y = 10;

var person8 = {
    x, y
};
console.log(person8);

 

 

ES6에서는 메서드를 정의할 때 function키워드를 생략이 가능하다.

 

const obj2 = {
    name: "kiwon",
    sayHello(){ //function 생략가능
        console.log(`hi ${this.name}`);
    }
};
obj2.sayHello();