[#JS] Enhanced Object Literal

RookieAND·2023년 1월 24일
0

Javascript

목록 보기
12/19
post-thumbnail

✒️ Enhanced Object Literal

1. 단축 속성 (shothand property)

  • 객체 생성 이전에 식별자를 제공할 경우 이를 프로퍼티 이름으로 지정한다.
  • 이후 해당 식별자를 프로퍼티 값을 가져올 위치를 식별하는데 모두 사용한다.
  • 특정 변수의 이름과 값을 key, value로 가지는 객체를 만들 수 있다.
  • 굳이 프로퍼티에 대한 값을 적지 않고, 속성의 이름만 적어도 괜찮다.
const name = "Baik Gwangin";
const major = "Computer Science";
const age = 25;

// ES5 이전에는 아래와 같이 객체 리터럴을 생성하였다.
// 속성의 이름과 일치하는 변수가 존재할 경우, 속성 값을 자동으로 할당시킨다.
const person = {
	name: name,
	major: major,
	age: age,
};

// 속성의 이름과 일치하는 변수가 존재할 경우, 속성 값을 자동으로 할당시킨다.
const person = {
	name,
	major,
	age,
};

2. 객체에 메서드 추가하기

  • ES6 이후부터 객체에 함수를 추가할 경우, function 키워드를 생략할 수 있다.
  • 화살표 함수도 사용이 가능하나. 이때는 this 가 상위 스코프에 바인딩된다.
const name = "Baik Gwangin";
const major = "Computer Science";
const age = 25;

// 속성의 이름과 일치하는 변수가 존재할 경우, 속성 값을 자동으로 할당시킨다.
const person = {
	name,
	major,
	age,
	greet() {
		console.log(`Hello, ${this.name}`);
	},
	hello: () => console.log(`Hi!`),
};

person.greet(); // Hello, Baik Gwangin
person.hello(); // Hi!
  • 이렇게 생성된 메서드의 경우 생성자 함수로 사용이 불가하다.
  • 또한 prototype 프로퍼티가 없고, super 키워드를 사용할 수 있다.
const person = {
    getGreeting() {
        return "Hello";
    }
};

const friend = {
    getGreeting() {
        return super.getGreeting() + ", hi!";
    }
};

// Object.setPrototypeOf(obj, prototype) 메서드로 프로토타입 지정.
// 여기서는 friend 의 프로토타입을 person 으로 설정
Object.setPrototypeOf(friend, person);
console.log(friend.getGreeting());  // "Hello, hi!"

3. 계산된 속성 이름 (computed property name)

  • ES6부터는 객체를 생성함과 동시에 동적으로 프로퍼티를 정의할 수 있다.
  • 객체 정의 시, 대괄호 [] 를 사용하여 프로퍼티 정의가 가능해졌다.
const key = "name";

// key의 값은 name이다. 이후 person 객체에서는 동적으로 프로퍼티를 할당한다.
// 이에 따라 person 객체의 name 속성에 "Baik Gwangin" 문자열을 할당시킨다.
const person = {
	[key]: "Baik Gwangin",
};

console.log(person.name); // "Baik Gwangin"
profile
항상 왜 이걸 써야하는지가 궁금한 사람

0개의 댓글