10장. 객체 리터럴
1. 객체란?
자바스크립트를 구성하는 거의 모든 것
이 객체이다
원시
타입은 단 하나의 값
을 나타내지만, 객체
타입은 다양한
타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다
즉, 객체는 변경 가능한 값
이다
자바스크립트를 구성하는 거의 모든 것
이 객체이다
원시
타입은 단 하나의 값
을 나타내지만, 객체
타입은 다양한
타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다
즉, 객체는 변경 가능한 값
이다
프로퍼티는 객체의 상태
를 나타내는 값
이고,
프로퍼티의 값이 함수이면, 메서드
라고 부른다
(인스턴스) -> 동작 -> 메서드
2. 객체 리터럴에 의한 객체 생성
-
인스턴스
클래스에 의해 생성되어 메모리에 저장
-
객체 리터럴
{ } 내의 0개 이상의 프로퍼티를 정의
중괄호는 코드 블록을 얘기하는 것이 아님
var person = {
name: 'Lee',
sayHello: function () {
console.log(`Hello! My name is ${this.name}.`);
}
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", sayHello: ƒ}
//this가 window 객체가 되므로 빈문자열이다
console.log(person.sayHello.call()) //Hello! My name is .
인스턴스
클래스에 의해 생성되어 메모리에 저장
객체 리터럴
{ } 내의 0개 이상의 프로퍼티를 정의
중괄호는 코드 블록을 얘기하는 것이 아님
var person = {
name: 'Lee',
sayHello: function () {
console.log(`Hello! My name is ${this.name}.`);
}
};
console.log(typeof person); // object
console.log(person); // {name: "Lee", sayHello: ƒ}
//this가 window 객체가 되므로 빈문자열이다
console.log(person.sayHello.call()) //Hello! My name is .
객체를 생성하기 위해 클래스
를 먼저 정의하고, new 연산자
와 함께 생성자를 호출할 필요가 없다
이것이 가장 큰 자바스크립트의 유연함과 강력함을 나타낸다고 할 수 있다
3. 프로퍼티
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값
으로 구성된다
객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값
으로 구성된다
식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표
를 사용
var obj = {};
var key = 'hello';
// ES5: 프로퍼티 키 동적 생성
obj[key] = 'world';
// ES6: 계산된 프로퍼티 이름
// var obj = { [key]: 'world' };
console.log(obj); // {hello: "world"}
var foo = {
'': '' // 빈 문자열도 프로퍼티 키로 사용할 수 있다. -> 접근은,,, foo['']
};
console.log(foo); // {"": ""}
동일한 프로퍼티에 대해서는 마지막 프로퍼티 값이 덮어쓴다
4. 메서드
호출하는 방식에 따라 다르긴 하다
var circle = {
radius: 5, // ← 프로퍼티
// 원의 지름
getDiameter: function () { // ← 메서드
return 2 * this.radius; // this는 circle을 가리킨다.
}
};
//메서드
console.log(circle.getDiameter()); // 10
//함수
const a = cb => cb()
a(circle.getDiameter) //NaN
console.log(circle.getDiameter.call()) //NaN
window.radius = 4
console.log(circle.getDiameter.call()) //8
5. 프로퍼티 접근
마침표 표기법, 대괄호 표기법
var person = {
name: 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee
마침표 표기법, 대괄호 표기법
var person = {
name: 'Lee'
};
// 마침표 표기법에 의한 프로퍼티 접근
console.log(person.name); // Lee
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name']); // Lee
대괄호
로 접근하는 경우, 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표
로 감싼 문자열 이어야 하고, 존재하지 않는 프로퍼티
에 접근하면 undefined
를 반환한다
이때, Referencee Error가 발생하는 것이 아니다!!
6. 프로퍼티 값 갱신/생성/삭제
존재하는 프로퍼티에 값을 할당해야 프로퍼티 값이 갱신된다
만약, 존재하지 않는다면, 동적으로 생성되고 값이 할당된다
var person = {
name: 'Lee'
};
// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}
// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Lee", age: 20}
// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;
console.log(person); // {name: "Lee"}
7. ES6에서 추가된 객체 리터럴의 확장 기능
- 프로퍼티 축약
// ES6
let x = 1, y = 2;
// 프로퍼티 축약 표현
const z = { x, y };
console.log(z); // {x: 1, y: 2}
- 메서드 축약
프로토타입
이 존재하지 않음 == new 호출 불가
!!!!!!
const obj = {
name: 'Lee',
// 메서드 축약 표현 -> 프로토타입이 없다
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee
- 계산된 프로퍼티 + 객체
내부
에서 생성이 가능
// ES6
const prefix = 'prop';
let i = 0;
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
Author And Source
이 문제에 관하여(10장. 객체 리터럴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@seohee0112/10장.-객체-리터럴
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
존재하는 프로퍼티에 값을 할당해야 프로퍼티 값이 갱신된다
만약, 존재하지 않는다면, 동적으로 생성되고 값이 할당된다
var person = {
name: 'Lee'
};
// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신된다.
person.name = 'Kim';
console.log(person); // {name: "Kim"}
// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 20;
console.log(person); // {name: "Lee", age: 20}
// person 객체에 age 프로퍼티가 존재한다.
// 따라서 delete 연산자로 age 프로퍼티를 삭제할 수 있다.
delete person.age;
// person 객체에 address 프로퍼티가 존재하지 않는다.
// 따라서 delete 연산자로 address 프로퍼티를 삭제할 수 없다. 이때 에러가 발생하지 않는다.
delete person.address;
console.log(person); // {name: "Lee"}
- 프로퍼티 축약
// ES6
let x = 1, y = 2;
// 프로퍼티 축약 표현
const z = { x, y };
console.log(z); // {x: 1, y: 2}
- 메서드 축약
프로토타입
이 존재하지 않음 ==new 호출 불가
!!!!!!
const obj = {
name: 'Lee',
// 메서드 축약 표현 -> 프로토타입이 없다
sayHi() {
console.log('Hi! ' + this.name);
}
};
obj.sayHi(); // Hi! Lee
- 계산된 프로퍼티 + 객체
내부
에서 생성이 가능
// ES6
const prefix = 'prop';
let i = 0;
// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
const obj = {
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i,
[`${prefix}-${++i}`]: i
};
console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}
Author And Source
이 문제에 관하여(10장. 객체 리터럴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seohee0112/10장.-객체-리터럴저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)