Javascript의 객체 리터럴을 이용한 Object

Javascript에는 7가지 데이터 타입이 존재하는데요.

Primitive 데이터 타입인 string, number, boolean, null, undefined, symbol을 제외한 

나머지 하나의 데이터 타입이 바로 Object입니다.

오늘은 이 Object에 관한 내용 중에서도 객체 리터럴을 이용한 생성과 활용에 대해서 정리해 보겠습니다.

1. 객체 리터럴(Object literal)

Javascript에서는 아래와 같이 심플한 방법으로 객체를 생성할 수 있습니다.

new키워드나 생성자 없이도 말이지요.

let testObj = {};

아래와 같이, key-value 페어로 객체를 구성할 수 있는데요.

key값에는 Javascript의 함수, 다른 객체, 모든 데이터 타입들이 다 들어갈 수 있습니다.

또 아래와 같이 특수문자가 들어가지 않는한, ""를 붙일 필요가 없습니다.

value값에 다시 객체를 넣을 수

객체의 property에는 아래와 같이, 

점(.) 혹은 대괄호([])를 이용해서 접근이 가능합니다.

숫자나 특수문자가 key인 경우에는 대괄호([])를 통해서만 접근이 가능합니다.

testObj.name;        //"kim"

testObj['score'];    // 88

testObj.child[special name][0] // "leslie"

testObj.cars[0].name;   //"cabrera"

객체의 property를 추가 및 수정하거나 삭제하는 방법은 아래와 같습니다.

property를 삭제하는 경우는 흔치 않지만, delete키워드를 이용하면 됩니다.

testObj.age = 28;

testObj['score'] = 98;

delete testObj.name;

객체 안에 들어있는 값을 다 볼 수 있는 방법도 있는데요.

for...in문을 쓰면 됩니다.

참고로 for...in문을 통해 받은 item은 단순히 변수명으로,

이를 통해서 하위 객체에 바로 접근할 수는 없습니다.

for (let property in testObj) {

console.log("key: " + property + "; value: " + testObj[property]);

}

객체에 함수를 property로 사용하면 메소드라고 부를 수 있는데요.

아래와 같이 사용가능한데요.

function키워드를 사용할 수도 있고, ES6에 적용된 것처럼 function키워드나 콜론(:)없이 사용도 가능합니다.

아래 이미지에서 this는 이 객체에 대한 접근자로, score로만 접근한다면 undefined 에러가 나게 됩니다.

아래와 같은 방식으로 객체를 생성할 수도 있습니다.

es6부터는 아래와 같은 방식도 error없이 동작합니다.

2. Getter와 Setter

위의 메소드를 실행시키는 방법은 아래와 같습니다.

showObj.showName();

showObj.showScore();

Javascript에도 getter와 setter메소드가 있는데요.

get과 set 키워드를 앞에 부인 함수형식을 사용하면 됩니다.

getter와 setter메소드를 사용할 때는 아래와 같이 중괄호()를 사용할 필요가 없습니다.

재미있는 점은 보통 다른 언어에서는 getter와 setter를 사용하면 private키워드를 붙여서 직접 접근할 수 없도록 하는데요.

Javascript에는 그러한 방법이 없습니다. 

다만 직접 접근하지 말라는 관습적인 의미로 아래와 같이 언더스코어(_)를 앞에 붙여줍니다.

이상으로 Javascript의 객체 리터럴을 이용한 Object에 대해서 정리해 보았습니다.