[javascript] 객체(object)

object

자바스크립트의 object는 기본적으로 key: value 로 이루어진 컨테이너 타입 변수라고 이해하면 된다.

또한, object가 가지고있는 값들을 ‘프로퍼티(property)’, 혹은 ‘멤버(member)’라고 칭한다.

말로 하기보다는 사용예시를 알아보자.

  1 const user = {
  2     name: 'lee',
  3     age: 30,
  4 }
  5
  6 user.address = 'seoul'
  7 user['gender'] = 'male'
  8
  9 console.log(user)  // { name: 'lee', age: 30, address: 'seoul', gender: 'male' }
 10 console.log(user.name)  // lee
 11 console.log(user['age'])  // 30

(1~4) user라는 오브젝트를 만들고, name, age라는 프로퍼티를 초기화했다.

(6) address라는 프로퍼티를 추가했다. 마치 클래스의 멤버에 접근하는듯한 형태로 값을 초기화하고 할당했다.

(7) 이번에는 gender라는 프로퍼티를 추가했다. 이번엔 대괄호를 사용해 마치 파이썬의 딕셔너리를 사용하듯 값을 초기화하고 할당했다.

(9) 오브젝트 자체를 출력했다. 초기에 설정한 프로퍼티와 이후에 추가한 프로퍼티 모두 정상적으로 할당된 것을 확인할 수 있다.

(10) ‘name’ 프로퍼티를 출력해봤다. 클래스의 멤버에 접근하는듯한 형태이다.

(11) ‘age’ 프로퍼티를 출력해봤다. 파티썬 딕셔너리에 접근하는듯한 형태이다.

오브젝트의 값(프로퍼티)을 삭제할 때에는 delete 키워드를 사용하면 된다.

  1 const user = {
  2     name: 'lee',
  3     age: 30,
  4 }
  5
  6 console.log(user)  // { name: 'lee', age: 30 }
  7
  8 delete user.age
  9
 10 console.log(user)  // { name: 'lee' }
 11
 12 delete user['name']
 13
 14 console.log(user)  // {}

(6) user 오브젝트를 출력했다. name, age 프로퍼티가 존재한다.

(8) age 프로퍼티를 삭제했다.

(10) user 오브젝트를 다시 출력했다. age 프로퍼티가 삭제됐다.

(12) name 프로퍼티를 삭제했다.

(14) user 오브젝트를 다시 출력했다. name 프로퍼티또한 삭제됐다.

오브젝트의 프로퍼티로 함수를 할당할 수도 있다.

  1 const user = {
  2     name: 'lee',
  3     age: 30,
  4     print_info: function() {console.log(user.name, user.age)}
  5 }
  6
  7 user.print_info();  // lee 30
  8 user['print_info']();  // lee 30

(4) print_info 라는 프로퍼티에 함수를 할당했다.

(7) 할당한 프로퍼티를 호출했다.

(8) 이런 형태로 호출도 가능하다.

코딩장이

-장이: [접사] ‘그것과 관련된 기술을 가진 사람’의 뜻을 더하는 접미사.

Share Share