Quick JavaScript (9) Object Literal

 

JavaScript에는 7 가지 자료형(data type) 이 있고 Object 를 제외한 6 가지는 primitive type 임을 언급했었다.

현재 얼렁뚱땅 6 가지 primitive 는 살펴보았고 Object 의 일종이지만 독립적으로 Array 도 다루었다.

 

이제 Object 에 대해서 기초적인 내용들을 정리해 보자.

 

1.  생성

앞서 다른 모든 타입처럼 constructor 를 이용한 생성과 literal 생성이 있다.

다음의 두 코드는 모두 빈 Object 를 생성한다.

 

let obj = new Object();
let obj = { };

 

사실 문법 공부할 때를 제외하면 constructor 로 생성해 본 적이 없고, 권장되지도 않는 듯하다.

이 글의 제목에서 알 수 있듯이 여기서는 Object Literal 관련된 내용을 다룬다.

 

2. 기본적인 예와  property 추가 ,삭제

Literal 을 하나 보자.

 

let obj={
  id : "mathtrauma",
  age : 100000000;
  test : function(){
    console.log("Hello!");
  }
};

 

Object 는 보는 바와 같이  

 

 key : value

 

들을 쉼표( , )로 분리하여 모아 둔 것이다. 그리고 key 를 Property 라고 하고 기본적으로 string 이다.

 

마지막 property 인 'test' 의 경우에 value 가 함수임을 눈여겨보자.

(함수도 특수한 Built-in Object 이므로 '값'이 된다.)

그리고 property 가 함수인 경우에 다음과 같은 형태로 초기화 할 수 있다.

 

let obj={
  id : "mathtrauma",
  age : 100000000;
  test(){
    console.log("Hello!");
  }
};

 

Object 를 정의한 이후에도 property 를 변경하거나 추가하는 것이 가능하다.

 

obj.id="trauma";
// 기존의 id 가 변경된다.

obj.sex="male";
//obj["sex"]="male"; 과 같다.

obj["Job"]=undefined;
// 당연히 obj.Job=undefined; 와 같다.

 

사실 기존의 Object 에 너무 쉽게 속성을 변경하거나 추가할 수 있는 것이 JavaScript 의 큰 문제점이기도 하다.

Object 를 변경하지 못하게 하려면 Object.freeze() 를 사용한다. (차후에 다시 보게 된다.)

 

대괄호를 이용하여 Object 의 속성(property) 를 정의한 위의 예를 보면 key 가 string 이라는 말이 이해가 될 것이다.

그리고 대괄호는 다음과 같이 expression 을 평가한 값을 이용할 수 있게 해준다.

 

let key="id";
console.log(obj[key]); // "trauma"
// obj.key 는 허용되지 않는다.

 

그리고 함수의 경우에도 대괄호를 이용할 수 있다. 즉, 다음의 두 코드는 같다. 

 

obj.test(); 
obj["test"]();

 

비슷한 맥락으로 'Computed property' 라는 이름 하에 객체를 생성할 때, 다음과 같은 짓도 가능하다.

 

let k = "name";
let obj2 = {
  [k] : "NoBody",
  ["a"+00 ] : 123
};

 

속성의 제거는 delete 를 이용한다. (앞선 Array 를 다루는 글에서 언급한 바 있다.)

 

delete obj2.name;

 

3. 간략한 표기 

코드를 보자.

 

function Func(id, age) {
  let obj = {
    id : id,
    age : age
  }
  
  return obj;
};

 

앞의 id 는 key 이므로 string "id" 이고 뒤의 id 는 함수의 매개변수로 전달된 인자값이다.

이처럼 key 와 value 의 이름이 같으면 다음과 같이 쓸 수 있다.

 

function Func(id, age) {
  let obj = {
    id,
    age
  }
  
  return obj;
};

 

4. 파라미터로서의 객체

함수의 매개변수가 많으면 그들의 순서를 기억하는 것이 쉽지 않을 수 있다.

이럴 때 객체를 넘기면 순서에 대한 고민을 하지 않을 수 있다. (Python 의 keyword 파라미터와 비슷한 점이 있다.)

예를 들어 매개변수가 5개인 다음의 예를 생각해 보자.

 

function freak(id, name, age, sex, job){
  ...
}

 

함수를 호출할 때 넘겨주어야 할 인자값이 어느 위치인지 헷갈릴 것이지만...

아래와 같이 객체를 매개 변수로 두면 호출할 때 순서와 관계 없이 제자리를 찾아갈 수 있다.

function freak({id, name, age, sex, job}){
  ...
}

freak({age: 100000, id:"math", sex : "male});

 

 

 

Object Literal 은 정리할 게 많은데 나머지는 다음 글에서 다룬다.