1. 객체란 무엇이며 필요한 이유
1) 객체란?
현실의 사물을 프로그래밍 언어에 적용시킨 것으로, 하나의 공간에 여러 속성을 저장할 수 있게 해주는 데이터 타입이다.
const robin = { age: 30, name: 'robin', };
2) 객체가 필요한 이유
- 속성값과 메소드를 포함할 수 있기 때문에 하나의 단위로 동작과 상태를 구조화하기 편하다.
- 다양한 데이터 타입을 포함할 수 있기 때문에 많은 정보를 저장하고 그 정보에 접근하기 용이하다.
- 유지보수가 편해진다. 이미 생성된 객체의 값을 또 다시 사용하게 될 때 중복으로 선언하지 않고 값에 접근하여 불러오면 되기 때문에 가독성 또한 높아진다.
2. 객체에서 property, key, value
객체에 정보를 담는 방법은 property(속성)를 부여하는 것이다. 속성은 key(속성명)와 value(속성값)로 나뉜다.
const robin = { age: 30, // key값은 age, value값은 30 name: 'robin', // key값은 name, value값은 'robin' };
1) key(속성명)
key는 반드시 문자열로 선언해야 하며, 따옴표를 붙혀주지 않아도 되지만 문자열에 띄어쓰기가 존재할 경우에는 따옴표로 문자열이라는 것을 표기해주어야 한다.(보통은 띄어쓰기를 사용하지 않음)
2) value(속성값)
선언된 key값에 값을 넣어주는 역할인 value는 다양한 데이터 타입이 들어올 수 있다.
3. 객체에 접근 하는 두 가지가 있는 이유
1) 마침표 표기법 (Dot Notation)
객체명.key로 접근하여 value값을 도출하는 방법으로 보통 많이 쓰이는 객체 접근법
const robin = { age: 30, name: 'robin', }; robin.age; // 30 robin.name; // 'robin'
2) 대괄호 표기법 (Bracket Notation)
객체명['key']로 접근하여 value값을 도출하는 방법. 반드시 따옴표를 붙혀줘야 key값을 찾으며, 따옴표를 붙혀주지 않으면 인식하지 못한다. (key값이 숫자인 경우는 붙혀주지 않아도 됨)
const robin = { age: 30, name: 'robin', }; robin['age']; // 30 robin['name']; // 'robin'
4. 객체의 값을 추가, 수정, 삭제하는 방법
1) 객체의 값을 추가하는 방법
객체가 선언된 상태에서 객체명.key = value 로 객체에 속성을 부여하는 방법
const robin = {} robin.name = 'robin' console.log(robin) // {name: 'robin'}
2) 객체의 값을 수정하는 방법
객체명.수정key = 수정value로 객체의 값(value)를 수정할 수 있다.
const robin = {age: 25} robin.age = 30 console.log(robin) // {age: 30}
3) 객체의 값을 삭제하는 방법
delete연산자를 이용하여 delete 객체명.삭제key로 객체의 값을 삭제할 수 있다.
const robin = {age: 25} delete robin.age console.log(robin) // {}
5. 객체와 배열이 섞인 복잡한 객체 만들어서 접근하는 방법
아래에 선언된 menu는 객체와 배열이 섞인 복잡한 객체이다. 이처럼 객체와 배열이 섞여 있을 때 특정값에 접근하는 방법은 배열에서의 [n]을 통한 접근과 마침표를 이용해 특정값에 접근이 가능하다.
const menu = [{
coffee:['americano', 'latte']},{
otc: ['tea', 'sparkling']
}]
console.log(menu[0].coffee[0]) // 'americano'
// 선언된 menu는 []로 시작하기 때문에 배열이다. americano를 찾기 위해서는 menu 배열의 첫번째 요소에 먼저 접근해야하기 때문에, menu[0]이 된다.
// 콘솔창에 menu[0]을 찍으면 {coffee: Array(2)} 가 나오는데 이제 마침표 접근법을 통해 menu[0].coffee로 ['americano', 'latte']로 접근이 가능하다.
// 이제 여기서 다시 coffee라는 객체의 property(속성)의 value(속성값)으로 배열이 들어있기 때문에 americano에 접근하기 위해서는 coffee[0]로 접근이 가능하다
// 결론적으로 menu[0].coffee[0]으로 접근하면 'americano'라는 값에 접근이 가능하고
// 'tea'라는 값에 접근하기 위해서는 menu 배열의 1번 인덱스 menu[1]에 먼저 접근하고
// menu[1]의 otc라는 property에 접근하기 위해 menu[1].etc 로 접근 후
// etc 배열의 0번 인덱스인 'tea'에 접근하기 위해 menu[1].etc[0]으로 접근한다.6. 배열의 타입이 객체인 이유
1) 배열의 타입이 객체인 이유
자바스크립트에서 타입을 크게 나누면, 원시 타입과 참조 타입이 있다. 객체는 참조타입이며, 객체의 하위 타입에 배열이 존재한다. 그렇기 때문에 기본적으로 배열은 객체처럼 작동한다. (key값은 숫자(index)가 된다.)
2) 배열과 객체가 따로 존재하는 이유
- 객체는 원하는 순서와 위치에 데이터를 삽입할 수 없다.
- 객체에는 length나 indexof 처럼 순서와 길이에 사용할 수 있는 메서드가 없다
// 순서가 중요한 로직을 다룰 때는 객체보다는 배열을 사용하는 것이 유용하다.
