객체리터럴
객체 타입의 값, 즉 객체는 변경 가능한 값
- 프로퍼티 값이 함수일 경우, 일반함수와 구분하기 위해 method라고 부릅니다.
- 객체는 프로퍼티와 메서드로 구성된 집합체입니다.
프로퍼티: 객체의 상태를 나타내는 값(data)
메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
클래스는 무언가를 생성할때 틀을 만들어놓은 것이라고 할 수 있습니다.
그래서 하나의 클래스를 가지고 여러개의 인스턴스를 만들 수 있습니다. (예를 들어 클래스는 붕어빵 틀이 '클래스' 이고 붕어빵, 슈크림붕어빵이 여러개의 '인스턴스' 가 되는 것입니다.
각각 만들어진 인스턴스는 개별적인 요소를 갖고 있지만 공통된 클래스를 가졌다는 점에서
여러가지를 공유할 수 있습니다.
자바스크립트는 클래스 기반 객체지향 언어와 달리 다양한 객체 생성 방법이 있습니다.
- 객체 리터럴
- object 생성자 함수
- 생성자 함수
- object.create 메서드
- 클래스(ES6)
✅ 객체 리터럴은 ({}) 중괄호 내의 0개 이상 프로퍼티를 정의한다. 즉 빈객체도 정의할 수 있습니다. 블록스코프가 아닙니다.
var person = {
name: 'lee',
sayHello: function() {
console.log(`hello, my name is ${this.name}.`);
}
};
person.sayHello() // output: hello, my name is lee.
person.sayHello.call // output: hello, my name is . name이 window 프로퍼티 window.name 이 없기 때문에 안나옵니다.
// 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성됩니다.
let chicken = {
brand: '교촌',
name: '허니콤보'
};
// 프로퍼티 키(brand) = 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
// 프로퍼티 값(교촌) = 자바스크립트에서 사용할 수 있는 모든 값
// 식별자 네이밍 규칙 프로퍼티키
let chicken = {
brand: '교촌', // 식별자 네이밍을 규칙을 준수하는 프로퍼티키
'last-name': '허니콤보' // 식별자 네이밍을 규칙을 준수하지 않는 프로퍼티키
last-name: '허니콤보' // SyntaxError '-'연산자가 있는 표현식으로 해석되어 오류가 발생합니다.
// 이미 존재하는 프로퍼티키를 중복 선언하면 나중에 선언한 프로퍼티가 덮어씁니다.
// 이때 에러가 발생하지 않아서 어디서 오류가 발생했는지 찾기 어렵습니다.
};- 프로퍼티 삭제
let person = {
name: 'lee'
};
// 프로퍼티 동적 생성
person.age = 20;
// person 객체에 age 프로퍼티가 존재합니다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있습니다.
// 만약 age 프로퍼티를 삭제하지 못하게 할려면 object.defineProperty을 사용합니다.
Object.defineProperty({person, 'age', {value: 20, configurable: false})
deleate person.age // output: false 삭제되지 않습니다.
- 메서드 축약 표현
- ES6에서는 메서드를 정의할때 function 키워드를 생략한 축약 표현을 사용할 수 있습니다.
// ES5
var person = {
name: 'lee',
sayHello: function() {
console.log('hello, my name is' + this.name.);
}
};
//ES6
const person = {
name: 'lee',
sayHello() {
console.log(`hello, my name is ${this.name}.`);
}
};
📌 축약형은 생성자 함수를 사용 할 수 없습니다. 프로토타입이 없어서 생성자 함수를 연결할 수
없어서 실행이 되지 않습니다. 메서드 선언형태를 정확하게 정리를 해 목적성을 띄었다고 보시면 될 거 같습니다.
