자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 자바스크립트를 구성하는 거의 '모든 것'이 객체다.
원시 타입(primitive type)은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조(data structure)다. 원시 타입의 값은 변경 불가능한 값이지만, 객체는 변경 가능한 값이다.
객체는 프로퍼티와 메서드로 구성된 집합체다. 프로퍼티와 메서드는 각각 객체의 상태를 나타내는 값, 프로퍼티를 참조하고 조작할 수 있는 동작이라 할 수 있다.
const visitor = {
name: 'john',
sayHello: function() {
console.log(`Hello, Welcome ${this.name}`)
}
console.log(typeof visitor) // object
console.log(visitor) // {name: 'john', sayHello: f}
const person = {
name: 'john',
age: 20
}
//key: name, age
//value: 'john', 20
console.log(person.name) // 'john'
console.log(person['age']) // 20
console.log(person) // {name: 'john', age: 20}
// 다만, 대괄호 프로퍼티 접근 연산자는 반드시 따옴표를 이용해야 한다.
console.log(person[name]) // ReferenceError: name is not defined
// 값 갱신
let guest = {
name: 'angela',
}
guest.name = 'kim'
console.log(guest) // {name: 'kim'}
// 동적 생성
guest.age = 25
console.log(guest) // {name: 'kim', age: 25}
// 삭제
delete guest.name;
console.log(guest) // {age: 25}
let name = 'kim;
let nationality = 'ROK'
const tourist = { name, nationality }
console.log(tourist); // {name: 'kim', nationality: 'ROK'}
프로퍼티 키로 표현식을 사용할 경우 대괄호로 묶어야 한다.
const title = 'prop';
let i = 0;
const object = {
[`${title}-${++i}`]: i,
[`${title}-${++i}`]: i,
[`${title}-${++i}`]: i
}
console.log(object) // {title-1: 1, title-2: 2, title-3: 3}
const visitor = {
name: 'john',
sayHello: function() {
console.log(`Hello, Welcome ${this.name}`)
}
const visitor = {
name: 'john',
sayHello() {
console.log(`Hello, Welcome ${this.name}`)
}
//function을 생략해 쓸 수 있다.