10.1 객체란?
✅ 객체 타입
객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다.
자바스크립트는 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식) 등은 모두 객체다.
변경이 불가능한 원시 타입과 다르게 객체 타입은 변경 가능한 값이다.
✅ 객체
0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티와 메서드로 구성되어 있다,
프로퍼티는 키와 값으로 구성된다.
✅ 프로퍼티
객체의 상태를 나타내는 값(data)
키와 값으로 구성된다.
✅ 메서드
프로퍼티를 참조하고 조작할 수 있는 동작(behavior)
프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.
10.2 객체 리터럴에 의한 객체 생성
✅ 자바스크립트이 객체 생성 방법
- 객체 리터럴
Object생성자 함수
- 생성자 함수
Object.create메서드
- 클래스(ES6)
✅ 객체 리터럴
중괄호{…} 내에 0개 이상의 프로퍼티를 정의한다.
자바스크립트 엔진은 변수가 할당되는 시점에 객체 리터럴을 해석해 객체를 생성한다.
let person = {
name: 'Lee',
sayHello: function() {
console.log(`Hello! My name is ${this.name}`)
}
}
console.log(typeof person) // object
console.log(person) //{name: "Lee", sayHello: f}
let empty = {} // 빈 객체
console.log(typeof empty) //object
10.3 프로퍼티
let person = {
// 프로퍼티 키는 name, 값은 'dayoung'
name: 'dayoung',
// 프로퍼티 키는 birth, 값은 '1996-10-11'
birth: '1996-10-11'
}
✅ 프로퍼티 키
빈 문자열을 포함하는 모든 문자열 또는 심벌 값
✅ 프로퍼티 값
자바스크립트에서 사용할 수 있는 모든 값
✅ 프로퍼티 키 특징
- 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.
- 문자열 또는 문자열로 평가할 수 있는 표현식을 사용해 프로퍼티 키를 동적으로 생성할 수 있다.
이 경우, 대괄호(
[])로 묶어서 사용해야 한다.
- 빈 문자열을 사용해도 에러는 발생하지 않지만 키로서 의미를 갖지 못하므로 권장하지 않는다.
- 프로퍼티 키에 문자열이나 심벌 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다.
var,function과 같은 예약어를 사용해도 에러가 발생하지 않으나 권장하지 않는다.
- 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓰며 에러가 발생하지 않는다.
let person = {
firstName: "Dayoung",
'last-name': "woo" // 식별자 네이밍 규칙을 준수하지 않아 따옴표를 생략할 수 없다.
}
// 따옴표를 생략하면 last-name을 연산자가 있는 표현식으로 해석한다.
let personCopy = {
firstName: "Dayoung",
last-name: "woo" // SyntaxError: Unexpected token -
}let obj = {}
let key = 'hello' // 표현식을 사영해 프로퍼티 키를 동적으로 생성
obj[key] = 'world' // 표현식이므로 대괄호로 감싸 사용
console.log(obj) // {hello: 'world'}let foo = {
'' : '' // 빈 문자열도 사용가능하지만 권장하지 않는다.
}let foo = {
0: 1,
1: 2,
2: 3
}
// 숫자 리터럴을 프로퍼티 키로 사용하묜 따옴표는 붙지 않지만 내부적으로 문자열로 변환된다.
console.log(foo) // {0: 1, 1: 2, 2: 3}let foo = {
var: '',
function: ''
}
// 예약어를 사용해도 에러가 발생하지 않으나 권장하지 않는다.
console.log(foo) // {var: '', function: ''}let foo = {
name: 'woo',
name: 'dayoung'
}
// 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
console.log(foo) // {name: 'dayoung'}
10.4 메서드
✅ 메서드
프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.
let circle = {
radius: 5, // 프로퍼티
getDiameter: function() {
return 2 * this.radius; // this는 circle을 가리킨다.
}
}
console.log(circle.getDiameter()) // 10this 키워드는 객체 자신을 가리키는 참조변수다.
10.5 프로퍼티 접근
✅ 프로퍼티에 접근하는 방법
- 마침표 표기법: 마침표 프로퍼티 접근 연산자(
.)를 사용
- 대괄호 표기법: 대괄호 프로퍼티 접근 연산자(
[…])를 사용
let person = {
name: 'Dayoung'
}
// 마침표 표기법에 의하 프로퍼티 접근
console.log(person.name) // 'Dayoung'
// 대괄호 표기법에 의한 프로퍼티 접근
console.log(person['name'])
✅ 프로퍼티 접근 시 주의 사항
- 대괄호 표기법을 사용하는 경우, 따옴표로 감싸지 않은 이름을 프로퍼티 키로 사용하면 자바스크립트 엔진은 식별자로 인식한다.
- 객체에 존재하지 않는 프로퍼티에 접근하면
undefined를 반환한다
- 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는다면 반드시 대괄호 표기법을 사용해야 한다.
단, 프로퍼티 키가 숫자로 이뤄진 문자열인 경우 따옴표를 생략할 수 있다.
- Node.js 환경과 브라우저 환경에서 실행한 결과가 달라질 수도 있다.
let person = {
firstName: 'woo'
}
// 따옴표로 감싸지 않은 프로퍼티 이름은 식별자로 인식한다.
console.log(person[firstName]) // ReferenceError: firstName is not defined
console.log(person['firstName']) // woolet person = {
name: 'dayoung'
}
// 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다
console.log(person.birth) // undefiendlet person = {
'last-name': 'woo',
1: 10
}
person.'last-name' // SyntaxError: Unexpected string
person.last-name // 브라우저 환경: NaN, Node.js: last is not defined
// person.last - name 으로 인식
// person.last는 undefined
// 브라우저 환경에선 name이라는 전역변수가 존재하기 때문에 undefined - name => NaN
// Node 환경에서는 존재하지 => Refernce Error: name is not defined
pseron[last-name] // ReferenceError: last is no defined
person['last-name'] // 'woo'
// 프로퍼티 키가 숫자로 이루어진 문자열인 경우 따옴표를 생략할 수 있다.
person.1 // SyntaxError: Unexpeted number
person.'1' // SyntaxError: Unexpeted string
perons[1] // 10
person['1'] // 10
10.6 프로퍼티 값 갱신
이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.
let person = {
name: 'woo'
}
person.name = 'dayoung'
console.log(person) // {name: 'dayoung'}
10.7 프로퍼티 동적 생성
존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 추가되고 프로퍼티 값이 할당된다.
let person = {
name: 'dayoung'
}
person.birth = '1996-10-11'
console.log(person) // {name: 'dayoung', birth: '1996-10-11'}
10.8 프로퍼티 삭제
✅ delete 연산자
객체의 프로퍼티를 삭제하는 연산자로 delete 연산자의 피연산자는 표현식이어야 한다.
만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.
let person = {
name: 'woo'
}
// 존재하지 않는 프로퍼티를 삭제하려고 해도 에러가 발생하지 않는다.
delete person.birth;
delete person.name
console.log(person) // {}
10.9 ES6에서 추가된 객체 리터럴의 확장 기능
10.9.1 프로퍼티 축약 표현
ES6에서는 프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다.
let x = 1, y = 2
// 프로퍼티 축약 표현
const obj = {x, y}
console.log(obj) // {x: 1, y: 2}
10.9.2 계산된 프로퍼티 이름
✅ 계산된 프로퍼티 이름
대괄호 표기법을 사용해 프로퍼티 키를 문자열 또는 문자열로 타입 변환할 수 있는 값으로 평가되는 표현식으로 동적 생성한다.
const prefix = 'prop'
let i = 0
let obj = {}
// 계산된 프로퍼티 이름으로 프로퍼티 키 동적 생성
obj[prefix + '-' + ++i] = i
// ES6
obj[`${prefix}-${++i}`] = i
console.log(obj) // {prop-1: 1, prop-2: 2}
10.9.3 메서드 축약 표현
ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
const obj = {
name: 'Woo',
// 메서드 축약 표현
sayHi() {
console.log('Hi! ' + this.name)
}
}
obj.sayHi()
QUIZ
const first = ''
const name = 'dayoung'
const obj = {
'first-name': "woo"
}
obj[first-name]= 'woo'
console.log(obj)