1. 객체 (Object)
객체는 여러 데이터를 하나의 변수에 저장할 수 있는 자료형입니다. 배열과 달리 객체는 키(key)와 값(value) 쌍으로 데이터를 저장합니다. 이는 값에 접근할 때 인덱스 번호 대신 키를 사용한다는 점에서 차이가 있습니다.
1.1 객체의 특징
1.1.1 객체의 생성
객체는 중괄호 {}를 사용하여 생성합니다. 객체는 키와 값의 쌍으로 이루어져 있으며, 각 쌍은 콜론 :으로 구분됩니다. 예를 들어, 다음과 같이 babaYaga 객체를 생성할 수 있습니다.
키와 값의 쌍을 '속성(properties)'이라고 하며, 속성 값이 함수인 경우 '메소드(method)'라고 합니다.
const babaYaga = {
name: 'John Wick',
age: 53,
from: '벨라루스',
};
console.log(babaYaga);
최신 문법을 사용하면 function 키워드 없이 메소드를 등록할 수 있습니다.
const babaYaga = {
name: 'John Wick',
age: 53,
from: '벨라루스',
askingHim() {
console.log("Yeah, I'm thinking I'm back!");
},
};
console.log(babaYaga);
1.1.2 객체 속성 접근
객체의 속성 값에 접근하려면 객체 이름 뒤에 점 연산자 .와 속성 키를 입력합니다. 또한 대괄호 []를 사용하여 속성에 접근할 수도 있습니다. 속성 이름이 변수명 규칙을 따르지 않은 경우에 대괄호를 사용해야 합니다.
const babaYaga = {
name: 'John Wick',
age: 53,
from: '벨라루스',
askingHim() {
console.log("Yeah, I'm thinking I'm back!");
},
};
console.log(`${babaYaga.name} from ${babaYaga.from}`);
console.log(`${babaYaga['name']} from ${babaYaga['from']}`);
1.1.3 객체 속성 추가와 삭제
객체에 속성을 추가하려면 객체 이름 뒤에 점 .과 새로운 속성 이름을 입력하고, 값을 할당합니다.
const babaYaga = {
name: 'John Wick',
age: 53,
from: '벨라루스',
askingHim() {
console.log("Yeah, I'm thinking I'm back!");
},
};
babaYaga.job = 'Killer';
console.log(babaYaga);
객체에서 속성을 삭제하려면 delete 키워드를 사용합니다.
const babaYaga = {
name: 'John Wick',
age: 53,
from: '벨라루스',
askingHim() {
console.log("Yeah, I'm thinking I'm back!");
},
};
babaYaga.job = 'Killer';
delete babaYaga.job;
console.log(babaYaga);
1.1.4 객체 속성 확인
in 연산자를 이용해 특정 속성이 객체에 존재하는지 확인할 수 있습니다.
const babaYaga = {
name: 'John Wick',
age: 53,
from: '벨라루스',
askingHim() {
console.log("Yeah, I'm thinking I'm back!");
},
};
console.log('age' in babaYaga); // true
console.log('mercy' in babaYaga); // false
1.1.5 객체의 중첩
객체는 다른 객체를 값으로 가질 수 있습니다. 이를 통해 복잡한 데이터 구조를 표현할 수 있습니다.
const company = {
name: 'Continental',
location: {
city: 'New York',
country: 'USA'
},
employees: {
manager: 'Winston',
concierge: 'Charon'
}
};
console.log(company.location.city); // New York
console.log(company.employees.manager); // Winston
1.1.6 객체의 반복
객체의 속성을 반복(iterate)하는 방법으로 for...in 루프를 사용할 수 있습니다. 이 루프는 객체의 모든 열거 가능한(enumerable) 속성에 대해 한 번씩 반복합니다.
for (let key in babaYaga) {
console.log(`${key}: ${babaYaga[key]}`);
}
1.2 객체의 메소드
자바스크립트 객체는 다양한 메소드를 제공하여 객체의 속성에 접근하고 조작할 수 있게 합니다. 여기서는 Object.keys(), Object.values(), 그리고 Object.entries()에 대해 설명합니다.
1.2.1 Object.keys()
Object.keys() 메소드는 객체의 열거 가능한(enumerable) 속성 이름(키)들을 배열로 반환합니다. 이 메소드는 객체의 속성을 반복(iterate)하거나, 속성 이름을 조작할 때 유용합니다. Object.keys() 메소드는 IE9 버전부터 지원됩니다.
const aespa = {
member1: 'Karina',
member2: 'Winter',
member3: 'Giselle',
member4: 'Ningning'
};
console.log(Object.keys(aespa)); // ['member1', 'member2', 'member3', 'member4']
1.2.2 Object.values()
Object.values() 메소드는 객체의 열거 가능한 속성 값들을 배열로 반환합니다. 이 메소드는 속성 값을 반복하거나, 값을 조작할 때 유용합니다. Object.values() 메소드는 IE를 지원하지 않습니다.
const aespa = {
member1: 'Karina',
member2: 'Winter',
member3: 'Giselle',
member4: 'Ningning'
};
console.log(Object.values(aespa)); // ['Karina', 'Winter', 'Giselle', 'Ningning']
1.2.3 Object.entries()
Object.entries() 메소드는 객체의 열거 가능한 속성 [키, 값] 쌍을 배열의 배열로 반환합니다. 이를 통해 객체의 모든 속성에 대해 반복할 수 있으며, 속성 키와 값을 동시에 접근할 수 있습니다.
const aespa = {
member1: 'Karina',
member2: 'Winter',
member3: 'Giselle',
member4: 'Ningning'
};
console.log(Object.entries(aespa)); // [['member1', 'Karina'], ['member2', 'Winter'], ['member3', 'Giselle'], ['member4', 'Ningning']]