객체 리터럴

오늘은 모던자바스크립트 10장의 객체 리터럴에 대해 알아보려고 한다.

먼저 자바스크립트는 객체 기반의 프로그래밍 언어이며 변경이 가능한 값(mutable value)이다.

객체는 프로퍼티(property)로 구성되어 있으며, 속성은 키key와 값value로 구성되어있다.

따라서 이런 모습이다.

let class {
    //프로퍼티
    반 : 1, 
    번호: 2, 
    이름 : "하늘"
}; 

이때 프로퍼티 값이 함수일 경우, 함수와 구분하기 위해 메서드method라고 부른다.

프로퍼티의 역할은 객체의 상태를 나타내는 값이며,
메서드의 역할은 프로퍼티를 참조하고 조작할 수 있는 동작이다.

객체를 생성하는 방법 중 가장 일반적이고 간단한 방법은 객체 리터럴을 사용하는 방법이다.

// 1. 객체 리터럴은 중괄호 {...}안에 0개 이상의 프로퍼티를 정의한다. 

var basket = {
    color: 'red', 
    fruit: 'apple', 
      size : 'big'

     sayHello: function() {
        console.log(`This is a ${basket.color} basket`);
    }
}; 

//2. 프로퍼티를 정의할때 중괄호 안을 비워놓으면 빈 객체가 생성된다. 
var empty = {}; 

*객체 리터럴의 중괄호는 코드블록을 의미하지 않는다.
객체 리터럴은 값으로 평가되는 표현식이라고 한다. 따라서 객체 리터럴을 닫을 때 세미콜론을 붙여주어야 한다.

객체는 프로퍼티의 집합이며, 키 key 와 값 value로 구성되어있다.

var mart = {
    corner1 : 'meat',
      corner2 : 'veggies', 
    corner3 : 'snacks'
};
//corner는 key, value는 'meat' 

객체의 key는 모든 문자열 또는 심벌 값을 의미한다. 값에 접근할 수 있는 식별자 역할을 한다 (마치 css의 선택자 처럼)

객체의 value는 자바스크립트에서 사용할 수 있는 모든 값을 의미한다.

key 인 식별자 네이밍을 할 때는 문자를 모두 붙여서 사용한다. 중간에 -,/등의 기호를 사용하는 것을 허용하지 않는다. value가 문자열인 경우 꼭 따옴표를 사용하여야 한다.

*프로퍼티 키에 대해 몇가지 알아야 할 점들은 다음과 같다. *

1. 빈 문자열('', "")도 키로 사용할 수 있다.
2. var, function도 키로 사용할 수 있다... 하지만 에러가 날 수 있으니 주의!
3. 이미 존재하는 프로퍼티 키를 중복하여 선언하면 먼저 선언한 이름을 덮어쓴다. 에러가 발생하지 않으니 주의하여 사용해야 한다! (권장하지 않는 느낌)

*메서드란 객체에 묶여있는 함수이다 *

const basket = {
      // 프로퍼티
    fruit : "apple",
    meat : "chicken",
      //메서드
    say : function say() {
        console.log(`this is ${this.meat}`);  
    }
};

basket.say();  //This is chicken 출력 

따라서 위의 예제에서 아래의 sayThis는 메서드이다. 일반 함수와 구분하기 위해 메서드라고 부른다.

*프로퍼티에 접근하는 방법 *

프로퍼티에 접근하는 방법에는 두 가지가 있다.

1. 마침표 표기법

   console.log(basket.color); 
   //따옴표로 감쌀 필요 없다 

2. 대괄호 표기법

   console.log(basket['color']); 
   // 반드시 따옴표로 감싸야한다 

   객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환하지만,
   따옴표로 감싸지 않으면 ReferenceError이 발생한다.

*프로퍼티 값을 수정하는 방법 *

var basket = {
    color: 'red', 
    fruit: 'apple', 
      size : 'big'
};

basket.color = 'blue'; 

새로운 값을 할당하면 수정된다.

** 프로퍼티의 동적 생성 및 삭제 **

var basket = {
    color: 'red', 
    fruit: 'apple', 
      size : 'big'
};

basket.owner = 'june'; 
delete basket.fruit; 

위와 같이 키와 값을 동적으로 생성할 수 있다.
delete 연산자를 통해 fruit 프로퍼티를 삭제해주었다.

*잠시 프로퍼티의 플래그에 대해 *

프로퍼티는 객체 안에 만들어지는, 키와 값을 가진 것이다.
프로퍼티는 '플래그'라고 불리우는, 다음과 같은 속성 세가지를 가진다:

• writable : 값이 true라면 수정이 가능하다. false라면 읽기 전용!
• enumerable : true라면 반복문 사용하여 나열가능하다.
• configurable : true라면 생성과 삭제가 가능하다.

플래그를 확인하는 방법과 변경하는 방법은 다음과 같다.

let colors = {
  name : "red", 
} 

//플래그 확인하는 방법 
let desc = Object.getOwnPropertyDescriptor(colors, 'name');  
// {value: 'red', writable: true, enumerable: true, configurable: true} 
//위와 같은 값이 출력되어 true인지 확인 가능하다 

//프로퍼티를 추가 생성하는 방법 
Object.defineProperty(colors, "use", {
  value: "paint"
});
//{name: 'red', use: 'paint'} 키와 값이 들어간다 

*ES6에 추가된 기능 *

1. 변수 이름과 프로퍼티 키가 동일한 이름일 때 생략이 가능하다.
   프로퍼티 키는 변수 이름으로 자동생성된다.

let x = 1, y = 2; 

const obj = { x, y }; 
console.log(obj); // {x : 1, y : 2}

2. 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성할 수 있다.

const prefix = 'prop'; 
let i = 0;

let obj = {
    [`${prefix}-${++i}: i`],
      [`${prefix}-${++i}: i`],
      [`${prefix}-${++i}: i`],
}; 
console.log(obj); //{prop-1:1, prop-2:2, prop-3:3} 

3. 메서드 축약 표현

const obj = {
name : 'Park',
//sayHi: function(){
//console.log('Hi!' + obj.name);
//} 아래와 같이 축약 가능
sayHi() {
console.log('Hi!' + obj.name);
}
};
}
// 'Hi! Park' 출력

이후 장인 메서드에서 해당 내용에 대해 더 다룰 예정이다.