JavaScript 에센셜 | 위니북스

객체

1. 객체 (Object)

객체는 여러 데이터를 하나의 변수에 저장할 수 있는 자료형입니다. 배열과 달리 객체는 키(key)와 값(value) 쌍으로 데이터를 저장합니다. 이는 값에 접근할 때 인덱스 번호 대신 키를 사용한다는 점에서 차이가 있습니다.

1.1 객체의 특징

1.1.1 객체의 생성

객체는 중괄호 {}를 사용하여 생성합니다. 객체는 키와 값의 쌍 으로 이루어져 있으며, 각 쌍은 콜론 :으로 구분됩니다. 예를 들어, 다음과 같이 user 객체를 생성할 수 있습니다.

키와 값의 쌍을 '속성(properties)' 이라고 하며, 속성 값이 함수인 경우 '메소드(method)' 라고 합니다.

const company = 'weniv' const user = { name: 'licat', company: company, location: { country: 'korea', city: 'jeju' } greeting: function() { console.log('Hello, I am licat!'); }, }; console.log(user);

최신 문법을 사용하면 객체를 좀 더 간결하게 표현할 수 있습니다. company 속성 처럼 변수의 이름과 프로퍼티 키의 이름이 같은 경우 축약하여 작성할 수 있습니다. 메서드의 경우 function 키워드를 생략하고 작성할 수 있습니다.

const company = 'weniv' const user = { name: 'licat', company, location: { country: 'korea', city: 'jeju' } greeting() { console.log('Hello, I am licat!'); }, }; console.log(user);

1.1.2 객체 속성 접근

객체의 속성 값에 접근하려면 객체 이름 뒤에 점 연산자 .와 속성 키를 입력합니다. 또한 대괄호 []를 사용하여 속성에 접근할 수도 있습니다. 속성 이름이 변수명 규칙을 따르지 않은 경우에 대괄호를 사용해야 합니다.

1.1.3 객체 속성 추가와 삭제

객체에 속성을 추가하려면 객체 이름 뒤에 점 .과 새로운 속성 이름을 입력하고, 값을 할당합니다.

const user = { name: 'licat', company: 'weniv', location: { country: 'korea', city: 'jeju' } greeting() { console.log('Hello, I am licat!'); }, }; user.job = 'CEO'; console.log(user);

객체에서 속성을 삭제하려면 delete 키워드를 사용합니다.

const user = { name: 'licat', company: 'weniv', location: 'jeju', greeting() { console.log('Hello, I am licat!'); }, }; delete user.job; console.log(user);

1.1.4 객체 속성 확인

in 연산자를 이용해 특정 속성이 객체에 존재하는지 확인할 수 있습니다.

const user = { name: 'licat', company: 'weniv', location: 'jeju', greeting() { console.log('Hello, I am licat!'); }, }; console.log('company' in user); // true console.log('age' in user); // false

1.1.5 객체의 중첩

객체는 다른 객체를 값으로 가질 수 있습니다. 이를 통해 복잡한 데이터 구조를 표현할 수 있습니다.

1.1.6 객체의 반복

객체의 속성을 반복(iterate)하는 방법으로 for ... in 루프를 사용할 수 있습니다. 이 루프는 객체의 모든 열거 가능한(enumerable) 속성에 대해 한 번씩 반복합니다. in 앞의 값에는 매번 반복마다 다른 속성 이름(property key)이 변수(variable)로 지정됩니다. in 뒤의 값에는 반복작업을 수행할 객체를 지정합니다.

for (const key in object) {
  // ...
}

for (const key in object) {
  // ...
}

주의할 점은, for ... in이 반드시 순서대로 반복되지 않는다는 것입니다. 만약 처리 과정에 순서가 중요하다면 Object.keys()나 Object.entries()를 사용하여 배열로 변환한 후 순회하는 것이 좋습니다.

for(const key of Object.keys(user)) { console.log(`${key}: ${user[key]}`); }

1.2 객체의 메소드

자바스크립트 객체는 다양한 메소드를 제공하여 객체의 속성에 접근하고 조작할 수 있게 합니다. 여기서는 Object.keys(), Object.values(), 그리고 Object.entries()에 대해 설명합니다.

1.2.1 Object.keys()

Object.keys() 메소드는 객체의 열거 가능한(enumerable) 속성 이름(키)들을 배열로 반환합니다. 이 메소드는 객체의 속성을 반복(iterate)하거나, 속성 이름을 조작할 때 유용합니다. Object.keys() 메소드는 IE9 버전부터 지원됩니다.

const weniv = { ceo: 'Licat', manager: 'Mura', designer: 'Soulgom', developer: 'Binky' } console.log(Object.keys(weniv));

1.2.2 Object.values()

Object.values() 메소드는 객체의 열거 가능한 속성 값들을 배열로 반환합니다. 이 메소드는 속성 값을 반복하거나, 값을 조작할 때 유용합니다. Object.values() 메소드는 IE를 지원하지 않습니다.

const weniv = { ceo: 'Licat', manager: 'Mura', designer: 'Soulgom', developer: 'Binky' } console.log(Object.values(weniv));

1.2.3 Object.entries()

Object.entries() 메소드는 객체의 열거 가능한 속성 [키, 값] 쌍을 배열의 배열로 반환합니다. 이를 통해 객체의 모든 속성에 대해 반복할 수 있으며, 속성 키와 값을 동시에 접근할 수 있습니다.

const weniv = { ceo: 'Licat', manager: 'Mura', designer: 'Soulgom', developer: 'Binky' } console.log(Object.entries(weniv));

Object의 정체
위의 예시에서 갑자기 keys 메서드 앞에 Object 라는 객체가 나타났습니다. 이 객체는 사용자가 생성한 객체가 아니라 자바스크립트 안에 원래 내장되어 있는 객체입니다.
자바스크립트를 만들어낸 개발자들이 사용자가 언어를 편하게 사용할 수 있도록 여러가지 유용한 값들과 메서드를 미리 만들어둔 것이죠. 앞서서 배운 Math 객체와 같은 개념이라고 보시면 되겠습니다.