JS 기초 - 객체

1. 객체

: 여러 속성을 하나의 변수 안에 저장할 수 있도록 해주는 데이터 타입

- 표시 : 중괄호 { }

- key(속성), value(값)으로 구성

 

1) 객체 생성하기

let person = {
    name : '해린'
    age : 20
    team : 'NewJeans'
}

2) 객체 출력하기

console.log(person)

 

객체는 중괄호로 표현되고 객체 안의 데이터들이 출력된다.

앞으로 데이터를 보고 중괄호만 보더라도 이건 객체구나 ~ 하고 알아봐야 해!

 

3) 객체 내 데이터에 접근하기

(1) 객체이름.key이름 (주로 사용)

console.log(person.name)

 

(2) 객체이름['key이름']

console.log(person['age'])

 

(1), (2) 순으로 출력

 

4) 객체 내 데이터 변경하기

객체이름.key이름 = '바꿀내용'

이렇게 대입만 해주면 쉽게 변경된다.

person.name = '다니엘'
console.log('현재 객체', person)

 

 

★★★ 중요

저번 게시글 '배열'과 함께 봐야함

★ 배열 안에 객체를 넣을 수 있고, 객체 안에 배열을 넣을 수 있다 !

 

1) 배열 안에 객체를 넣을 수 있고,

let orderList = [{
    name : '아메리카노'
    iced : 'iced'
    place : 'takeout'
},{
    name : '바닐라라떼'
    iced : 'hot'
    place : 'here'
}]
console.log(orderList)

 

배열 안에 객체가 들어있다는 걸 볼 수 있다.

 

→ 아메리카노만 출력하고 싶다면?

: 배열(인덱스번호)에 접근한 다음 객체 안에 접근하면 된다.

console.log(orderList[0].name)

 

 

+) 여기서 자주 쓰는 배열함수 : map()

→ 조건에 맞는 새로운 배열을 만들어내는 함수

 

let name = orderList.map(list => list.name)
console.log(name)

 

'name'만 있는 새로운 배열이 만들어진 걸 알 수 있다.(map함수)

 

2) 객체 안에 배열을 넣을 수 있다.

 

let chart = {
	
    name : 'Melon Top 100'
    title : ['사건의 지평선', 'OMG', 'ditto']
    singer : ['윤하', 'NewJeans', 'NewJeans']
}
console.log(chart)

 

객체 안에 배열이 들어간 걸 볼 수 있다.

 

'ditto'만 출력하고 싶다면?

→ 객체에 접근한 다음 배열에 접근하면 된다.

 

console.log(chart.title[2])