📖7주차 학습 범위

10장 객체 리터럴 ( p.124 ~ p.136 )

📆 스터디 진행 날짜

2024 / 01 / 06(토) 10:00 AM

---

🎯 객체 리터럴

📌 객체란?

자바스크립트는 객체 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 "모든 것"이 객체다.
원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.
객체는 0개 이상의 프로퍼티로 구성된 집합이며,프로퍼티는 키와 값으로 구성된다.
프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.

📌 리터럴이란?

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말한다.

즉, 객체 리터럴은 사람이 이해할 수 있는 객체를 생성하기 위한 표기법이다.

객체 리터럴은 ({...}) 내에 0개 이상의 프로퍼티를 정의한다.변수에 할당되는 시점에 자바스크립트 엔진은 객체 리터럴을 해석해 객체를 생성한다.

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

🎯 객체 리터럴의 확장 기능

ES6에서는 더욱 간편하고 표현력 있는 객체 리터럴의 확장 기능을 제공한다.

📌 ES5 표현식

<script>
//ES5까지 객체 리터럴 기존 표현식
var x = 1, y = 2;

var object = {
	x: x,
    y: y
};

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

// 메서드 
var object = {
	name: 'kim',
    sayHi: function(){
    console.log('Hi' + this.name);
    }
};

obj.sayHi(); // Hi! kim
</script>

📌 ES6 축약 표현식

<script>
/* ES6 에서는 프로퍼티 값으로 변수를 사용하는 경우 
변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 
이때 프로퍼티 키는 변수 이름으로 자동 생성 된다.*/

let x = 1, y = 2;

const object = { x,y };

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

// 메서드 축약 표현

const object = {
	name: 'kim',
    sayHi(){
    console.log('Hi!' + this.name);
    }
};

object.sayHi();//Hi! kim
</script>