🌸10장. 객체 리터럴

✅10.1 객체란?

자바스크립트는 객체(Object) 기반의 프로그래밍 언어이고, 원시값을 제외한 나머지 값은 모두 객체다.

• 원시타입은 하나의 값만 나타내지만 객체타입(object/reference type)은 다양한 타입의 값을 하나의 단위로 구성

• 원시 값은 변경 불가(immutable)한 값이지만, 객체타입은 변경 가능(mutable)한 값

• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 key:value로 구성된다.

• 자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있는데, 프로퍼티 값이 함수일 경우, 메서드(method)라 부른다.

image

• 프로퍼티 : 객체의 상태를 나타내는 값

• 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

인스턴스(instance)란

인스턴스란 클래스에 의해 생성되어 메모리에 저장된 실체.

• 객체는 클래스와 인스턴스를 포함한 개념

• 클래스는 인스턴스를 생성하기 위한 템플릿의 역할을 하고, 인스턴스는 객체가 메모리에 저장되어 실제로 존재하는 것을 말한다.

✅10.2 객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입 기반 객체지향 언어로서, 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴 (가장 일반적)

• Object 생성자 함수

• 생성자 함수

• Object.create 메서드

• 클래스+(ES6)

객체 리터럴

• 객체 리터럴은 객체를 생성하기 위한 표기법이다.

• 중괄호( {...}) 내에 0개 이상의 프로퍼티를 정의한다.

• 변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성

var person = {
    name: "Kwak",
    sayHello: function () {
        console.log(`Hello My name is ${this.name}`);
    },
};

console.log(typeof person); // object
console.log(person); // { name: 'Kwak', sayHello: [Function: sayHello] }

나머지 객체 생성방식

• 모두 함수를 이용해 객체를 생성하기 때문에 함수 공부한 이후에 다시 살펴볼 예정

✅10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

• 프로퍼티 키(key) : 빈 문자열을 포함하는 모든 문자열(string) 또는 심벌(symbol) 값

• 프로퍼티 값(value) : 자바스크립트에서 사용할 수 있는 모든 값

var person = {
    name: "Kwak", // 프로퍼티 키는 name, 프로퍼티 값은 "Kwak"
    age: 100, // 프로퍼티 키는 age, 프로퍼티 값은 100
};

프로퍼티 키는 프로퍼티 값에 접근할 수 있는 이름으로서 "식별자 역할"

• 반드시 식별자 네이밍 규칙을 따라야 하는 것은 아니다.

• 식별자 네이밍 규칙을 따르는 경우, (자바스크립트에서 사용 가능한 유효한 이름인 경우) : 따옴표( '' or "") 를 생략할 수 있다.

• 즉, 반대로 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야한다.

var person = {
    firstName: "Bo-sun", // 식별자 네이밍 규칙을 준수한 프로퍼티 키
    "last-name": "Kwak", // 식별자 네이밍 규칙을 준수하지 않은 프로퍼티 키
};

• 만약 last-name에 따옴표를 제거하면, SyntaxError: Unexpected token '-' 에러가 발생한다.

프로퍼티 특징

• 프로퍼티 키로 사용할 표현식을 대괄호([...])로 묶으면, 프로퍼티 키를 동적으로 생성할 수도 있다.

  var obj = {};
  var key = "hello";
  
  // ES5 : 프로퍼티 키 동적 생성
  obj[key] = "world";
  
  // ES6 : 계산된 프로퍼티 이름
  // var obj = {[key]:'world'}
  
  console.log(obj); // {hello: "world"}

• 프로퍼티에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환 을 통해 문자열이 된다.

  var foo = {
      0: 1,
      1: 2,
      2: 3,
  };
  
  console.log(foo); // { '0': 1, '1': 2, '2': 3 } <-키값이 문자열 형태로 암묵적 타입 변환

• var, function과 같은 예약어를 프로퍼티 키로 사용해도 에러가 발생하지 않는다. (하지만 권장 X)

  var foo = {
  	var: '',
  	function: '''
  };
  console.log(foo); // {var:"", function:""}

• 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다. ( 에러 발생하지 않음 )

  var foo = {
      name: "Lee",
      name: "Kwak",
  };
  
  console.log(foo); // { name: 'Kwak' }

✅10.4 프로퍼티 접근 방법

프로퍼티에 접근하는 방법은 아래 2가지다.

1. 마침표(.) 프로퍼티 접근 연산자를 사용하는 방법 → 마침표 표기법(dot notation)

2. 대괄호([...]) 프로퍼티 접근 연산자를 사용하는 방법 → 대괄호 표기법(bracket notation)

var person = {
    name: "Kwak",
};

console.log(person.name); // "Kwak" ( 마침표 표기법 )
console.log(person["name"]); // "Kwak" ( 대괄호 표기법 )

주의할 점

• 대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

  • 문자열 형태가 아니면, 자바스크립트는 식별자로 해석하기 때문에 ReferenceError 발생

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

// ❗반드시 따옴표로 감싼 문자열이어야 한다.
console.log(person[name]); // ReferenceError: name is not defined

// ❗객체에 존재하지 않는 프로퍼티에 접근하면 -> undefined
console.log(person.age); // undefined

✅10.5 프로퍼티 동적 생성 & 삭제

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

• delete연산자를 통해 객체의 프로퍼티를 삭제할 수 있다.

var person = {
    name: "Kwak",
};

person.age = 100; // { age: 100 } 프로퍼티 동적 생성
console.log(person); // { name: 'Kwak', age: 100 }

delete person.age; // age 라는 프로퍼티 키가 있고 -> 해당 프로퍼티 삭제
delete person.job; // job 이라는 프로퍼티 키는 없음 -> 그럼에도 delete 연산시 에러 발생 X

console.log(person); // { name: 'Kwak' }

✅10.6 ES6에서 추가된 객체 리터럴 확장 기능

프로퍼티 축약 표현

• 프로퍼티 값으로 변수를 상요하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략(property shorthand)할 수 있다.

// ES6
let x = 1,
    y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

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

계산된 프로퍼티 이름

• 프로퍼티 키를 문자열/문자열로 타입 변환할 수 있는 값으로 평가되는 표현식을 사용해서 동적으로생성할 수 있다.

var prefix = "prop";
var i = 0;

var obj = {};

// 👉ES5: "계산된 프로퍼티 이름"으로 프로퍼티 키 동적 생성
obj[prefix + "-" + ++i] = i;
obj[prefix + "-" + ++i] = i;
obj[prefix + "-" + ++i] = i;

// 👉ES6:"객체 리터럴 내부"에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = {
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
};

console.log(obj); // { 'prop-1': 1, 'prop-2': 2, 'prop-3': 3 }

메서드 축약 표현

• function 키워드를 생략할 수 있다.

• 하지만, 메서드 축약 표현으로 정의한 메서드는 프로퍼티에 할당한 함수(ES5 메서드)와는 다르게 동작한다.

const obj = {
    name: "Kwak",

    // 메서드 축약 표현 ( 함수 선언식 필요 X )
    sayHi() {
        console.log(`Hi! ${this.name}`);
    },
};

obj.sayHi(); // Hi! Kwak