[JavaScript] 객체 생성 및 속성 추가

배열 또한 객체(object)이다.

console.log( typeof([]) )

 

객체 생성

배열은 인덱스를 이용해 요소에 접근하지만 객체는 키를 사용하여 값에 접근한다.

 

객체는 중괄호 { }로 생성하고, '키: 값'의 형태로 자료를 쉼표(,)로 연결해서 입력한다.

const product = {
    제품명: '망고',
    원산지: '필리핀'
}

 

객체의 요소 접근

(방법1) - 대괄호 [ ] 와 키

product['제품명']
product['원산지']

 

(방법2) - 온점 (.)

product.제품명
product.원산지

 

+ 식별자로 사용할 수 없는 단어를 키로 사용한 경우 (키를 문자열로)

const test = {
    "hello world": 777,
    "im good~!": 1
}

test["hello world"]
test["im good~!"]

문자열을 이용해 키를 등록할 수 있다. 이때는 대괄호 [ ]를 사용해야만 요서에 접근할 수 있다.

 

속성과 메소드

배열 내부에 있는 값을 요소라고 한다.

객체에 있는 값은 속성이라고 한다. 객체의 속성은 모든 형태의 자료형을 가질 수 있다.

const object = {
    number: 123,
    string: '스트링',
    boolean: true,
    array: [1, 2, 3, 4, 5],
    
    method: function() { }
}

 

객체의 속성 중 함수 자료형을 메소드라고 부른다.

const people = {
    name: 'LSM',
    eat: function() { console.log('먹는다') }
}

people.eat()

 

최신 버전의 자바 스크립트에서는 아래처럼 쉽게 선언할 수 있다.

const people = {
    name: 'LSM',
    eat(food) {
        console.log(`${this.name}는 ${food}를 먹다.`)
    }
}

people.eat('바나나')

메소드에서 this 키워드

메소드 내에서 자기 자신이 가진 속성을 출력할 때 자신이 가진 속성임을 나타내는 this 키워드를 사용한다.

const people = {
    name: 'LSM',
    eat: function(food) { console.log(`${this.name}는 ${food}를 먹는다`) }
}

people.eat('바나나')

 

객체 속성 추가

객체를 생성하고 속성을 지정하고 값을 입력해주면 추가가 된다.

const people = {

}

people.이름 = 'LSM'
people.나이 = 23

console.log( JSON.stringify(people, null, 2) )

 

객체 속성 삭제

delete 키워드를 사용하여 속성을 제거한다.

const people = {
    name: 'LSM'
}

// 객체 속성 삭제
delete people.name

console.log( JSON.stringify(people, null, 2) )