객체 리터럴

1. 객체란?

자바스크립트는 객체object 기반의 프로그래밍 언어이다.

  • 원시값primitive 을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체
  • 원시 타입은 단 하나의 값만 나타내지만, 객체 타입 object, reference type은 다양한 타입의 값을 하나의 단위로 구성한 자료구조다.
  • 원시값은 immutable 이지만 객체는 mutable 한 값이다.

프로퍼티 property

객체는 0개 이상의 property로 구성된 집합이며, property는 key와 value으로 구성된다.

value가 function일 경우, 일반 함수와 구분하기 위해 method 라 부른다.

let person = {
  name: 'park', // property
  age: 25, // property
  sayHi: function () {
    console.log('hi!');
  }, // method
};
  • property key: name, age
  • property value: ‘park’, 25

즉 객체는 프로퍼티와 메서드로 구성된 집합체다.

프로퍼티와 메서드의 역할

  • 프로퍼티: 객체의 상태를 나타내는 값
  • 메서드: 프로퍼티를 참조하고 조작할 수 있는 동작

객체는 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

2. 객체 리터럴에 의한 객체 생성

자바스크립트는 프로토타입prototype 기반 객체지향 언어이다.

C++이나 Java 같은 클래스 기반 객체지향 언어와는 달리 다양한 객체 생성 방법이 있다.

  • 객체 리터럴 
    let person = {
  name: 'Lee',
  sayHi: function () {
    console.log('hi!');
  },
};
console.log(typeof person); // object
console.log(person); // {person: "Lee", sayHi: [Function: sayHi] }
    • 객체 리터럴은 값으로 표현되는 표현식이다. 따라서 객체 리터럴의 닫는 중괄호 뒤에는 세미콜론;을 붙인다.
    • 객체를 생성할 때 property를 정의할 수 있고, 생성 이후에 property를 동적으로 추가할 수도 있다.
  • Object 생성자 함수
  • 생성자 함수
  • Object.create 메서드
  • 클래스(ES6)

객체 리터럴 외의 객체 생성 방식은 모두 함수를 이용해 객체를 생성한다.

4. 메서드

자바스크립트 함수는 객체다.

따라서 함수는 value으로 취급할 수 있기 때문에, property 값으로 사용할 수 있다.

property 값이 함수일 경우 일반 함수와 구분하기 위해 method 라 부른다

즉 메서드는 객체에 묶여 있는 함수를 의미한다.

let circle = {
  radius: 5, // property
  getDiameter: function () {
    // method
    return 2 * this.radius; // this는 circle을 가리킨다.
  },
};
console.log(circle.getDiameter()); // 10

5. 프로퍼티

객체는 property의 집합이며, property는 key와 value으로 구성된다.

  1. 식별자 네이밍 규칙을 따르지 않는 키는 반드시 따옴표를 사용해야 한다.
let person = {
  firstName: 'sieun', // 식별자 네이밍 규칙을 준수하는 프로퍼트 키
  'last-name': 'choi', // 식별자 네이밍 규칙을 준수하지 않는 프로퍼트 키
};

4장-식별자 네이밍규칙 참고

  1. property key는 암묵적 타입 변환을 통해 문자열이 된다.
let foo = {
  0: 1,
  1: 2,
};
console.log(foo); // { '0': 1, '1': 2 }

프로퍼티 접근

property에 접근하는 방법은 두가지다.

  • . 를 이용한 dot notation
  • […] 를 이용한 bracket notation
    • 대괄호 내부에 지정하는 키는 따옴표로 감싼 문자열이어야 한다.
let person = {
  name: 'park',
};
console.log(person.name); // park
console.log(person['name']); // park
console.log(person.age); // undefined

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

에러는 발생하지 않는다.

프로퍼티 값 갱신

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

let person = {
  name: 'park',
};
person.name = 'kim';
console.log(person); // {name: "kim"}

프로퍼티 동적 생성

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

let person = {
  name: 'park',
};
person.age = 20;
console.log(person); // {name: "kim", age: 20}

프로퍼티 삭제

let person = {
  name: 'park',
};
delete person.name;
console.log(person); // {}

6. 객체 리터럴의 확장 기능 (ES6)

프로퍼티 축약 표현

변수 이름과 프로퍼티 키가 동일한 이름일때, 프로퍼티 키를 생략할 수 있다.

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

계산된 프로퍼티 이름

string 또는 string으로 타입 변환할 수 있는 값으로 평가되는 표현식을 프로퍼티 키로 생성할 수 있다.

단 표현식을 대괄호[ … ] 로 묶어야 한다.