목표

• 10장의 내용을 최대한 이해하고 정리하기

10장 객체 리터럴

10-1. 원시 타입과 객체 타입

• 자바스크립트는 객체 기반의 프로그래밍이며 원시 값을 제외한 나머지 값(배열, 함수, 정규표현식 등)은 모두 객체이다.
• 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체의 값)을 하나의 단위로 구성한 복합적인 자료구조이다.

• 원시 값은 변경이 불가능한 값이지만 객체는 변경 가능한 값이다.

10-2. 객체(Object)란?

var employee = {
    nickname: "lian",
    department: "development",
    dateOfEntering: 1,
};

• 객체는 0개 이상의 프로퍼티로 구성된 집합이다.
• 프로퍼티는 키와 값으로 구성된 쌍을 말한다. 위 코드에서는 총 3개의 프로퍼티가 존재한다.

• 자바스크립트에서 사용할 수 있는 모든 값을 프로퍼티의 값으로 사용할 수 있다.
• 함수도 프로퍼티의 값으로 사용할 수 있다. 이 때는 일반 함수와 구분하기 위해 메서드라고 부른다.

10-2-1. 그래서 객체가 뭔데요?

var counter = {
    num: 0,
    increase: function() {
        this.num++;
    },
    decrease: function() {
        this.num--;
    },
};

console.log(counter.num);
counter.increase();
console.log(counter.num);


// 결과
0
1

• 객체는 결국 프로퍼티 또는 메서드로 구성된 집합체이다.
  - 프로퍼티: 객체의 상태를 나타내는 값
  - 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작
• 이처럼, 객체는 프로퍼티와 메서드를 모두 포함할 수 있기 때문에 상태와 동작을 하나의 단위로 구조화할 수 있어 용이하다.

10-2-2. 객체 생성하기

• 자바스크립트에서는 객체를 생성하는 방법이 여러 개 존재한다.
  • 객체 리터럴
  • Object 생성자 함수
  • 생성자 함수
  • Object create 메서드
  • 클래스(ES6)

• 이 중에서 가장 일반적이고 간단한 방법은 객체 리터럴을 이용하는 것이다.

var counter = {
    num: 0,
    increase: function() {
        this.num++;
    },
    decrease: function() {
        this.num--;
    },
};

• 객체 리터럴은 중괄호 { } 내에 0개 이상의 프로퍼티를 정의한다.
• 자바스크립트 엔진은 변수에 할당되는 시점에 객체 리터럴을 해석해 객체를 생성한다.
• 만약 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다.

var obj = {};
console.log(typeof obj);

// 출력
object

💡 주의

• 일반적으로 코드 블록에서 중괄호 뒤에는 세미콜론(;)을 붙이지 않는다.
• 하지만, 객체 리터럴의 중괄호는 코드 블록을 의미하지 않는다. 객체 리터럴은 값으로 평가되는 표현식이기 때문에 세미콜론을 붙여준다.

10-3. 프로퍼티(Property)란?

• 객체는 프로퍼티의 집합이며 프로퍼티는 키와 값으로 구성된다.
• 프로퍼티 키와 값으로 사용될 수 있는 값은 다음과 같다.
  • 프로퍼티 키: 빈 문자열을 포함한 모든 문자열 또는 심벌 값
  • 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

var employee = {
  nickname: "lian",
  department: "development",
  dateOfEntering: 1,
  salary: 4000,
};

• 프로퍼티 키로 문자열이나 심벌 이외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
• 예를 들어, 프로퍼티 키로 숫자 리터럴을 사용하면 따옴표는 붙지 않지만 내부적으로는 문자열로 변환된다.

var obj = {
  1: 2,
  2: 3,
  3: 4,
};

var keys = Object.keys(obj);
console.log(keys);
keys.forEach((key, iter) => console.log(`key${iter+1}의 타입은 ${typeof key}`));

// 결과
[1, 2, 3]

"key1의 타입은 string"
"key2의 타입은 string"
"key3의 타입은 string"

forEach

• 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다.

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

• 각 인자에 대한 설명은 다음과 같다.

1. callback은 각 요소에 대해 실행할 함수이며 currentValue, index, array 총 3개의 인자를 받을 수 있다.
   • currentValue: 처리할 현재 요소
   • index: 처리할 현재 인덱스 (선택사항)
   • array: forEach를 호출할 배열 (선택사항)
2. thisArg는 callback을 실행할 때 this로 사용할 값으로 선택사항이다.

• 아래 코드는 MDN-forEach에서 제공하는 예제이다.

function Counter() {
  this.sum = 0
  this.count = 0
}

Counter.prototype.add = function(array) {
  array.forEach(function(entry) {
    this.sum += entry
    ++this.count
  }, this)
}

const obj = new Counter();

obj.add([2, 5, 9]);

console.log(obj.count);
console.log(obj.sum);

// 결과
3
16

10-4. 메서드(Method)란?

• 자바스크립트에서 객체는 원시 값 또는 다른 객체 값을 프로퍼티 값으로 사용할 수 있다.
• 원시 값을 제외한 나머지 값들은 다 객체에 해당되기 때문에 함수도 객체이고 프로퍼티 값으로 사용할 수 있다.

• 이때, 프로퍼티 값으로 함수가 올 경우 일반 함수와 구분짓기 위해 메서드라고 부른다.

var counter = {
    num: 0,				// 프로퍼티
    increase: function() {		// 메서드
        this.num++;
    },
    decrease: function() {		// 메서드
        this.num--;
    },
};

10-5. 프로퍼티 접근

• 프로퍼티 키를 이용해 값에 접근하는 방법은 두 가지가 존재한다.
• 하나는 마침표(.) 접근 연산자, 다른 하나는 대괄호([ ]) 접근 연산자이다.

var employee = {
  nickname: "lian",
  department: "development",
  dateOfEntering: 1,
  salary: 4000,
};

console.log(employee.department);
console.log(employee["salary"]);

// 결과 
development
4000

• 대괄호 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 감싸지 않으면 자바스크립트 엔진은 프로퍼티 키를 식별자로 해석한다.

console.log(employee["salary"]);
console.log(employee[salary]);

// 결과
4000
Uncaught ReferenceError: salary is not defined

• 또한, 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

console.log(employee.name);
console.log(employee["name"]);

// 결과
undefined
undefined

10-6. 프로퍼티 값 갱신

• 이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var employee = {
  nickname: "lian",
  department: "development",
  dateOfEntering: 1,
  salary: 4000,
};

employee.salary = 4500;
console.log(employee);

// 결과
{nickname: 'lian', department: 'development', dateOfEntering: 1, salary: 4500}

10-7. 프로퍼티 동적 생성

• 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성된다.

employee.address = "Seoul";
console.log(employee);

// 결과
{nickname: 'lian', department: 'development', dateOfEntering: 1, salary: 4500, address: 'Seoul'}

10-8. 프로퍼티 삭제

• delete 연산자는 객체의 프로퍼티를 삭제한다. 물론, delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다.
• 만약 존재하지 않는다면 아무런 에러 없이 무시 된다.

delete employee.address;
console.log(employee);

delete employee.age;	// 무시됨
console.log(employee);


// 결과
{nickname: 'lian', department: 'development', dateOfEntering: 1, salary: 4500}
{nickname: 'lian', department: 'development', dateOfEntering: 1, salary: 4500}

10-9. ES6에서 추가된 기능

10-9-1. 프로퍼티의 축약 표현

• 프로퍼티 값을 변수로 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름이면 프로퍼티 키를 생략할 수 있다.
• 이 때, 프로퍼티 키는 자바스크립트 엔진에 의해 변수 이름으로 자동 생성된다.

const singer = "IU";
const name = "strawberry moon";

const song = {
    singer,		// singer: singer,
    name,		// name: name,
};

console.log(song);

// 결과
{singer: 'IU', name: 'strawberry moon'}

10-9-2. 프로퍼티 키의 동적 생성

• 프로퍼티 키를 동적으로 생성하기 위해서는 대괄호 표기법을 사용해야 한다.

const singer = "IU";
const name = "라일락";

const song = {
    singer,
    name,
};

const songwriters = ["임수호", "Dr.Jo", "웅킴", "N!ko"];
songwriters.forEach((songwriter, iter) => song[`songwriter${iter + 1}`] = songwriter);

console.log(song);

// 결과
{
  singer: 'IU', 
  name: '라일락', 
  songwriter1: '임수호', 
  songwriter2: 'Dr.Jo', 
  songwriter3: '웅킴',
  songwriter4: 'N!ko',
}