JavaScript | Object

Object?

let heroList = {name: 'Peter Parker', nickname: 'Spider Man', age: 15}

한글로는 객체라고 부르는 object는 property로 구성 되어있으며, key와 value로 나뉘어져있다.
name이 key값이고, 'Peter Parker'는 value값이다.
Object는 Array와 다르게 index값이 없어 호출할때 임의의 순서대로 property들이 출력된다.

객체를 사용하는 이유

1. 직관적이다
2. 재사용하기 쉽다
3. 유지보수 및 업그레이드가 쉽다

객체에 접근하는 방법

객체에 접근 하는 방법은 2가지가 존재한다

1. Dot notation (. )
2. Bracket notation([' '])

1. Dot notation

console.log(heroList.age) // 15
console.log(heroList.name) // Peter Parker

Dot notation은 해당 객체 이름뒤에 콤마를 찍고 원하는 key값을 넣어 객체에 접근할 수 있다.

2. Bracket notation

console.log(heroList['nickname']) // Spider Man

Bracket notation은 해당 객체 이름뒤에 대괄호([ ])속에 원하는 key값을 넣어 객체에 접근할 수 있다.

3. 차이점

Dot notation은 숫자로 시작하거나 띄어쓰기가 있는 key를 호출 할 수 없고, 변수로 선언된 key값을 불러올 수 없다.
반면, Bracket notation은 string값의 key를 호출 할 수 있다. 물론 띄어쓰기가 된 key도 호출 가능하다. 또한 변수로 선언된 key값을 불러올 수 있다.

let heroList = {name: 'Peter Parker', nickname: 'Spider Man', age: 15};
let nick = 'nickname';

console.log(heroList[nick]) // Spider Man
console.log(heroList.nick) // undefined

객체와 배열이 섞인 복잡한 객체 접근하는 방법

let eplPlayer = [{team: 'Man city', player: ['Kevin De Bruyne', 'Bernardo Silva', 'Rúben Dias']}, {team: 'Manchester United', player: ['Christiano Ronaldo', 'Paul Pogba']}]
let findNoShowDo = eplPlayer[1].player[0]

console.log(findNoShowDo) // Christiano Ronaldo

객체와 배열이 섞인 객체에 접근하는 방법은 순서대로 배열에 접근할때는 대괄호([ ])를 이용하고 객체에 접근할때는 Dot notation이나 Bracket notation을 활용해 접근하면 된다.