JS 객체 정리

자바스크립트에는 약 8가지 기본타입이 있다. 이중 숫자, 문자열, 불리언, undefined등 기본 타입을 제외하면 모든 것이 객체로 이루어져있다.

객체란 키와 값으로 구성된 프로퍼티의 정렬되지 않은 집합이다. 이 집합 내에 함수가 오면 이를 메소드라고 부른다.

객체의 생성 방법은 아래와 같다.

const obj1 = {} //리터럴 표기를 이용

const obj2 = new Onject();//생성자 함수를 이용

Object.create(프로토타입[, propertiesObect])//Object의 메서드 이용

다른 언어를 우선 배운 사람으로서는 재밌는 점이, 자바 스크립트에서는 클래스가 없어도 바로 오브젝트를 생성할 수 있다는 것이다.

객체 예시

1
2
3
4
5
6
7

const obj1 = {
    b:"a",
    c:"b",
    a:"c",
    d:"d",
    f:"e"
}

cs

왼쪽에 있는 b, c, a, d, f가 key
오른쪽에 있는 a, b, c, d, e가 value 
 

객체로의 접근

자바스크립트 객체에 key값을 이용해서 접근할 수 있다.

value에의 접근

obj1.name

obj1[‘name’] //computed properties(계산된 프로퍼티)

여기서 [“키”]을 사용하여 접근하는 것을computed properties를 사용한다, 라고 하는데 이는 런타임시 킷값이 결정되는 특징이 있다. 따라서 기존의 접근과 아래 코드같은 차이가 발생한다.

js computed properties 예시

1
2
3
4
5
6
7
8
9
10
11
12

const obj1 = {
   name :"Dodo",
   age :26
}
getName1 = (obj , key )=>{
   console .log (obj.key );
}
getName2 = (obj , key )=>{
   console .log (obj[key]);
}
getName1 (obj1 , "name"); // undefined
getName2 (obj1 , "name"); // Dodo

cs

결과
undefined
Dodo
 
또한 이 computed property를 사용하면 객체의 key 속성명을 표현식(변수, 함수 등)을 통해서 지정할 수 있게 된다.
 
js key에 변수 사용

1
2
3
4
5
6
7
8
9

let v1 = "new Key";
const obj1 = {
   name :"Dodo",
   age :26 ,
   [v1 ]:111
}
obj1 [v1 ] = "new value";
obj1 .v1 = "new value2";
console .log (obj1 );

cs

결과
{ name: 'Dodo', age: 26, 'new Key': 'new value', v1: 'new value2' }

[]로 킷값을 감싸는 것으로 해당 킷값을 변수로 지정할 수 있게 된다.

후에 []와 .로 v1에 접근해 킷값을 넣는다. []를 이용한 접근은 런타임시 정해지므로, [v1]인 new key라는 킷값에 new value를 넣는다.

그러나 .를 통한 접근은 그렇지 못하므로 v1라는 킷값이 새로 생성되며 그것의 변수 값으로 new value를 넣는다.

저작자표시 비영리 변경금지