자바스크립트 ES6 #10 객체리터럴

#객체 #객체리터럴 #프로퍼티 #메서드 #객체프로퍼티접근 #객체리터럴확장

 

---

 

자바스크립트를 구성하는 모든 것이 '객체'이다.

 

 

객체

 

- 원시타입의 값을 제외한 모든 값은 객체타입 이다.

 

- 객체 타입은 하나의 단위로 구성한 복합적인 자료구조이다.

 

- 객체는 변경가능한 값이다.

 

- 자바스크립트의 함수는 일급객체이므로 값으로 취급한다.

 

- 함수는 객체의 프로퍼티가 될 수 있다.

 

- 객체의 프로퍼티인 함수는 일반 함수와 구분하기 위해 메서드라 한다.

 

---

 

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

 

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

 

- 객체 리터럴

 

- Object 생성자 함수

 

- 생성자 함수

 

- Object.create function

 

- 클래스(ES6)

 

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

 

// 객체 리터럴을 활용한 객체 생성
var person = {
  name: "Lee",
  sayHello: function () {
    console.log(`my name is ${this.name}`);
  },
};

// 중괄호에 아무것도 넣지않으면 빈 객체
var empty = {};

 

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

 

객체 리터럴의 중괄호는 코드블록을 의미하지않는다.

 

코드블록은 표현식이 아니기때문에 세미콜론이 붙지않지만 객체리터럴은 표현식이기 때문에 뒤에 세미콜론이 붙는다.

 

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

 

---

 

프로퍼티

 

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

 

var obj = { ppt: "bye" };

//문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티의 키를 동적으로 생성할 수 있다.
var key = "hello";
obj[key] = "world";

//프로퍼티 키에 문자타입이나 심벌 타입 이외의 타입의 값을 사용하면 암묵적으로 문자열 타입의 값이 된다.
var foo = {
  0: 1,
  1: 2,
  2: 3,
};

---

메서드

 

자바스크립트의 모든 값은 객체의 프로퍼티가 될 수 있다.

함수 또한 일급객체로 값으로 취급할 수 있기 때문에 프로퍼티로 사용할 수 있다.

 

객체의 프로퍼티에 할당된 함수는 일반 함수와 구분하기 위해 메서드라 한다.

 

var circle = {
  radius: 5,
  getDiameter: function () {
    return 2 * this.ridius;
  },
};

 

---

프로퍼티 접근

 

다음 두 가지 방법을 통해 프로퍼티에 접근할 수 있다.

 

- 마침표 프로퍼티 접근 연산자(.)

 

- 대괄호 프로퍼티 접근 연산자([])

 

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

person.name; //Lee
// 대괄호 포로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감쌈 문자열이어야한다.
person["name"]; //Lee

//프로퍼티 갱신
person.name = "Kim";
person.name; // Kim

//프로퍼티 추가
person.age = 31;
//프로퍼티 삭제
delete person.age;

 

ES6에서 추가된 객체리터럴확장

 

ES6는 간단하고 표현력있는 객체 리터럴 확장 기능을 제공한다.

 

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

// 계산된 프로퍼티 이름
const prefix = "prop";

let i = 0;
const obj = {
  `${prefix}-${++i}`: i,
  `${prefix}-${++i}`: i,
  `${prefix}-${++i}`: i,
}
obj //{prop-1 : 1, prop-2 : 2, prop-3 : 3}

// 메서드 축약표현
const obj = {
  name : 'Lee',
  sayHi(){
    console.log(`Hi ${this.name}`)
  }
}
obj.sayHi();