[JavaScript] 객체( key : value )란?

• 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.
• 그리고 배열과는 달리 객체는 프로퍼티를 열거할 때 순서를 보장하지 않는다.
• 정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.
• Javascript 객체(obeject)의 키(key)는 문자형으로 변환한다.

 

[객체를 생성해보자]

<객체 생성 방법>
1. let a = { };

2. let a = new Object();

1번 방법은 아주 간단하게 객체를 생성하는 방법이다. { } 안에 아무것도 넣지 않으면 빈 객체가 생성된다.
{ } 안에 무언가를 넣고 객체 생성과 동시에 프로퍼티를 넣을 수 있다. 단, 프로퍼티는 key : value 쌍으로 작성하며,
함수도 넣을 수 있다.

2번 방법은 생성자 함수를 호출하여 빈 객체를 생성하는 방법이다. 빈 객체 생성 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성 가능하다. 다만 특별한 이유가 없다면 1번을 택하는 게 바람직하다.

[객체를 생성하면서 프로퍼티와 메서드를 같이 넣어보자]

<예제 1>
let a = {
    name : "Kim",
    gender : "male",
    printName : function() {
        console.log("name : " + this.name)
    }
};

위 예제에 만든 객체를 하나씩 살펴보자
a라는 객체가 있으며 이 객체 안에는 "name"과 'gender", 그리고 "printName"라는 이름을 가진 함수를 갖고 있다.
여기서 우리는 a 객체에 접근하여 각각의 프로퍼티들을 다뤄 볼 수 있다.

[생성한 객체를 접근하여 프로퍼티들을 다뤄보자]

<예제 2>
console.log(a); // {name : "Kim", gender : "male", printName : f}
console.log(a.name); // Kim
console.log(a.name = "Lee"); // Lee
console.log(a.gender); // male
a.printName(); // name : Kim

예제 2에서 보다시피 a.name은 원래 "Kim"이다. 하지만 a.name = "Lee"라는 새로운 값을 할당하면 그 값은 갱신된다.

[프로퍼티를 동적으로 생성해 보자]

객체에 없는 프로퍼티를 동적으로 생성하기 위해서는 아래와 같은 방법으로 가능하다.

<예제 3>
a.age = 100;
console.log(a.age); // 100
console.log(a); // {name : "Kim", gender : "male", printName : f, age : 20}

위 예제 3처럼 기존에 없던 age를 "key" 라 하고 100을 "value"라 하고 이와 같은 방법으로 기존에 없던 프로퍼티를 추가 할 수 있다.

[프로퍼티를 삭제시켜 보자]

<예제 4>
delete a.age;
console.log(a.age); // undefined
console.log(a); // {name : "Kim", gender : "male", printName : f}

delete연산자를 이용하면 객체의 프로퍼티를 삭제 할 수 있다.