[Javascript] 객체 속성 읽기, 추가, 변경, 삭제

 

이번 포스팅에서는 Javascript 객체의 속성에 접근하여

값을 읽고, 추가, 변경, 삭제 하는 방법을 알아보겠습니다.

 

1. 객체 속성 읽기
   • 점 표기법 (dot notation)
   • 대괄호 표기법 (square bracket notation)
2. 객체 속성 추가, 변경하기
   • 점 표기법 (dot notation)
   • 대괄호 표기법 (square bracket notation)
   • 동적으로 객체 속성 추가/삭제하기 (Computed Property)
3. 객체 속성 삭제하기

 

 

1. 객체 속성 읽기

객체 속성 값을 읽는 방법은 점 표기법(dot notation)과 대괄호 표기법(square bracket notation) 2가지가 있습니다.

 

점 표기법 (dot notation)

const obj = {
  id : 123,
  product : {
    type: 'book',
    title: 'JS Start',
    page: 200
  }
};

document.write(obj.id + '<br>');
document.write(obj.product.type + '<br>');
document.write(obj.product.title + '<br>');
document.write(obj.product.page + '<br>');

 

obj.id

obj.product.type

obj.product.title

obj.product.page

객체의 속성에 접근해서 값을 읽기 위해서 각 속성 사이에 '.'을 입력하였습니다.

 

대괄호 표기법 (square bracket notation)

const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

document.write(obj['id'] + '<br>');
document.write(obj.product['product type'] + '<br>');
document.write(obj['product']['title'] + '<br>');
document.write(obj['product'].page + '<br>');

 

obj['id']

obj.product['product type']

obj['product']['title']

obj['product'].page

접근하려고 하는 객체의 속성명을 괄호('[]')로 감싸서 표현 할 수도 있습니다.

이때, 괄호 안에 들어가는 값은 작은 따옴표('') 또는 큰 따옴표("")로 감싸주어야 합니다.

이러한, 대괄호 표기법을 사용했을 때 좋은 점은

속성명이 'product type'과 같이 중간에 공백이 있는 경우에 해당 값에 접근 할수 있다는 것입니다.

 

obj.product.product type; // error 발생

위에서 소개한 점 표기법(dot notation)을 사용해서

'product type'과 같이 중간에 공백이 있는 값에 접근하면 에러가 발생합니다.

 

 

 

2. 객체 속성 추가, 변경하기

점 표기법 (dot notation)

const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

// 속성 추가
obj.stock = 100;
document.write(obj.stock + '<br>');

// 속성 값 변경
obj.id = 456;
document.write(obj.id);

 

점 표기법으로 객체의 속성에 접근하여 값을 할당 할 수 있습니다.

만약, 접근하려는 속성이 객체에 존재하지 않으면, 속성이 추가되고,

접근하려는 속성이 객체에 이미 존재하면, 기존 속성 값이 변경됩니다.

 

 

대괄호 표기법 (square bracket notation)

물론, 아래와 같이, 대괄호 표기법으로도 똑같이 속성을 추가, 변경 할수 있습니다.

const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

// 속성 추가
obj['stock'] = 100;
document.write(obj.stock + '<br>');

// 속성 값 변경
obj['id'] = 456;
document.write(obj.id);

 

 

동적으로 객체 속성 추가/삭제하기 (Computed Property)

대괄호 표기법을 사용하면 입력된 파라미터의 값에 따라 동적으로 속성값을 추가할 수도 있습니다.

이것을 Computed Property 라고 부릅니다.

const obj = {

};

['red', 'green', 'blue'].forEach((color) => {
  obj[color] = color.substring(0, 1);
});

document.writeln(Object.keys(obj).length + '<br>'); // 3
document.writeln(obj.red + '<br>'); // r
document.writeln(obj.green + '<br>'); // g
document.writeln(obj.blue + '<br>'); // b

 

obj[color] = color.substring(0,1);

위 코드는 객체의 속성에 접근해서, 해당 속성을 추가하거나 값을 변경해 주고 있습니다.

앞의 코드들과 다른 점은 괄호 안에 변수가 들어가 있다는 것입니다.

이 코드에서 괄호 안에 들어간 'color'는 따옴표로 둘러싸인 문자열이 아닙니다.

앞에서 정의한 color입니다.

그리고, 이 color 변수에는 'red', 'green', 'blue' 문자열이 순차적으로 대입 될 것이므로, 

위 코드는 아래와 같이 실행될 것입니다.

obj['red'] = 'r';

obj['green'] = 'g';

obj['blue'] = 'b';

그리고, 최종적으로 obj는 아래와 같은 형태가 될 것입니다.

obj = {

   red : 'r',

   green : 'g',

   blue : 'b'

}

 

Object.keys(obj).length;

코드를 모두 수행하고 난 후의 객체가 가지고 있는 속성의 숫자는 3이 될 것입니다.

객체가 가지고 있는 속성의 숫자를 확인하는 방법은 아래 포스팅을 참조하세요.

[Javascript] 객체(Object) 속성(property) 개수 구하기

 

대괄호 표기법을 사용하면 이렇게 동적으로 객체의 속성을 지정해줄 수 있습니다.

 

 

 

3. 객체 속성 삭제하기

객체의 속성을 삭제할 때는 delete 연산자를 사용합니다.

const obj = {
  id : 123,
  product : {
    'product type': 'book',
    title: 'JS Start',
    page: 200
  }
};

// 속성 삭제
delete obj.id;
delete obj.product['product type'];

document.write(Object.keys(obj).length + '<br>'); // 1
document.write(obj.id + '<br>'); // undefined
document.write(obj.product['product type']); // undefined

 

delete obj.id;

delete obj.product['product type']);

삭제하려는 객체의 속성 앞에 delete 라는 연산자를 넣어주어서, 해당 속성을 객체에서 삭제했습니다.

점 표기법, 대괄호 표기법 모두 사용할 수 있습니다.

 

Object.keys(obj).length; // 1

객체에서 id 속성과 product['product type'] 속성을 삭제해서 

obj는 product 속성만을 가지므로 결과는 1입니다.

obj = {

  product : {

    title : 'JS Start',

    page: 200

  }

}

 

obj.id;

obj.product['product type'];

두 속성은 모두 삭제 되었으므로, 모두 undefined를 리턴합니다.

 

---

 

Javascript에서 객체의 값을 읽고, 추가, 수정, 삭제하는 방법을 알아보았습니다.