객체 - Object

객체..?

javascript에서 객체는 키와 값이 쌍을 이루는 형태로 저장되는 타입을 의미합니다.

배열은 값이 인덱스 순서에 맞게 저장된다면, 객체는 값이 키에 저장되는것이고 이는 순서성이 보장되지 않습니다.

객체의 생성방법

객체 역시 생성할수 있는 방법이 많지만 보편적인 방법만 알아보기로 하죠.

배열은 어떻게 만들었었나요? 대괄호로 value들을 감싸주었습니다.

객체는 대괄호대신 중괄호 { } 를 사용해서 만들수 있습니다.

 

다만 배열과 다른점은 순서성이 없기 때문에 키를 같이 적어줘야 하는데,
표기는 다음과 같습니다.

// {key:value, key2:value2, key3:value3}
let obj = {name : 'Dae-seong Hwang', age: 26};

// 오브젝트를 생성하면서 사용된 중괄호 내에서는 개행이 이루어져도 괜찮습니다.
let obj2 = {
  email: 'co.la@kakao.com',
  country: 'Korea'
};

객체의 값에 접근하는 방법

배열에서는 인덱스로 접근했었습니다.

하지만 객체는 순서가 없었죠? 대신 키라는 것이 있었는데

이걸 이용해서 객체의 값에 접근할 수 있습니다.

 

배열과는 다르게 여기엔 2가지 방법이 사용될 수 있습니다.

1. Dot notation
2. Bracket notation (또는 Bra-ket notation)

Dot notation

객체 뒤에 점.을 찍고 찾고자 하는 키를 쓰면 됩니다.

let obj = {name : 'Dae-seong Hwang', age: 26};

console.log(obj.name) // Dae-seong Hwang

// 배열에서 이미 존재하는 인덱스 위치에 값을 변경할때와 동일하게
// 객체에서도 기존에 존재하는 키에대한 값을 변경할 수 있습니다.
obj.name = '황대성'

console.log(obj) // {name : '황대성', age: 26}

// 존재 하지 않는 키를 접근하려 할때에는 undefined가 나옵니다.
console.log(obj.email) // undefined

// 존재 하지 않는 키에 대한 값을 할당해주는 경우 obj안에 키와 값이 추가됩니다.
obj.email = 'co.la@kakao.com'

console.log(obj) // {name : 'Dae-seong Hwang', age: 26, email: 'co.la@kakao.com'}

// Dot notation으로 접근할때에는 뒤에 써준 값이 문자열 그대로로 처리됩니다.
// 변수명을 쓰더라도 쓴 문자열에 대한 값을 조회합니다.
let a = 'name'

console.log(obj.a) // undefined

Bracket notation (또는 Bra-ket notation)

객체 뒤에 대괄호 [ ]를 찍고 찾고자 하는 키를 쓰면 됩니다.

인덱스에 접근하는 방법과 유사하지만 분명 다른 과정이라는것에 유의하세요.

let obj = {name : 'Dae-seong Hwang', age: 26};

console.log(obj['name']) // Dae-seong Hwang

// 배열에서 이미 존재하는 인덱스 위치에 값을 변경할때와 동일하게
// 객체에서도 기존에 존재하는 키에대한 값을 변경할 수 있습니다.
obj['name'] = '황대성'

console.log(obj) // {name : '황대성', age: 26}

// 존재 하지 않는 키를 접근하려 할때에는 undefined가 나옵니다.
console.log(obj['email']) // undefined

// 존재 하지 않는 키에 대한 값을 할당해주는 경우 obj안에 키와 값이 추가됩니다.
obj['email'] = 'co.la@kakao.com'

console.log(obj) // {name : 'Dae-seong Hwang', age: 26, email: 'co.la@kakao.com'}

// bracket notation으로 접근할때에는 뒤에 써준 값이 갖고있는 값으로 처리됩니다.
// 변수명을 쓰게되면 변수가 할당하고 있던 값에 대한 키를 조회합니다.
let a = 'name'

console.log(obj[a]) // 황대성

in을 활용한 key의 존재유무

배열과 마찬가지로 객체의 value는 undefined일 수 있습니다.

그렇기에 어떤 키값이 undefined인지를 확인하는 작업이 객체 내의 키가 존재하는지를

검증하는 과정이 될수 없습니다.

 

하지만 in연산자를 활용하여 특정키가 객체안에 존재하는지 (값이 어떻든 상관없이) 확인 할 수 있습니다.

사용방법은 키 in 객체 입니다.

let obj = {name : 'Dae-seong Hwang', age: 26};

console.log('name' in obj) // true
console.log('hi' in obj) // false

객체의 메서드

자주사용되는 몇 메서드만 열거합니다. 자세한 내용은 MDN페이지를 참고하면 좋습니다. (객체의 메서드는 일반적으로 생성해서 사용하는 경우가 많습니다.)

Object.keys()

주어진 객체 자신의 열거가능한 속성들의 이름의 배열을 반환합니다.

Object.values()

주어진 객체의 열거가능한 모든 스트링 속성들의 값들을 포함하고 있는 배열을 반환합니다.