JS기초_5.3(객체와 배열 고급)

속성 존재 여부 확인

const data = {
    name: 'bob',
    age: 35
}

if (data.name !== undefined) {
    console.log('name 속성이 있습니다.')
} else {
    console.log('name 속성이 없습니다.')
}

//짧은 조건문 사용

object.name || console.log('name 속성이 없습니다.')

 

 

배열 기반의 다중 할당

[식별자, 식별자, 식별자, _] = 배열

let [a, b] = [1, 2]   // a=1, b=2 할당
console.log(a, b)
1, 2

[a, b] = [b, a]     //a에 b가 할당되고, b에 a가 할당되므로 값이 서로 교환
(2)[2, 1]
console.log(a, b)
2, 1

 

 

객체 기반의 다중할당

객체 속성 꺼내서 다중 할당하기

{속성 이름, 속성 이름} = 객체
{식별자=속성 이름, 식별자=속성 이름} = 객체


//객체 생성
const object = {
    name: '혼자 공부하는 파이썬',
    price: 18000,
    publisher: '한빛미디어'
}

//객체에서 변수 추출
const { name, price } = object  // name 속성과 price 속성을 그대로 꺼낸다
console.log('# 속성 이름 그대로 꺼내서 출력하기')
console.log(name, price)
console.log('')

const { a=name, b=price } = object   // name 속성을 a로, price 속성을 b로 꺼낸다
console.log('# 다른 이름으로 속성 꺼내서 출력하기')
console.log(a, b)


//출력
# 속성 이름 그대로 꺼내서 출력하기
혼자 공부하는 파이썬 18000

# 속성 이름 그대로 꺼내서 출력하기
혼자 공부하는 파이썬 18000

 

 

배열 전개 연산자

배열 얕은 복사

복사했을 때 이름만 다르게 붙는 것을 얕은 복사(참조 복사)라고 한다.

const a = ['milk', 'bread']
const b = a
b.push('tomato')

console.log(a)
console.log(b)

//실행
[ 'milk', 'bread', 'tomato' ]
[ 'milk', 'bread', 'tomato' ]

 

배열 깊은 복사

깊은 복사는 클론을 만든다고 표현한다. 최신 자바스크립트에서는 전개 연산자를 사용한다.

[...배열]
//이렇게 하면 얕은 복사와 다르게 두 배열이 독립적으로 작동한다.

const a = ['milk', 'bread']
const b = [...a]
b.push('tomato')

console.log(a)
console.log(b)

//출력
[ 'milk', 'bread' ]
[ 'milk', 'bread', 'tomato' ]

전개 연산자를 사용한 배열 자료 추가

const a = ['milk', 'bread']
const b = ['tomato', ...a]

console.log(a)
console.log(b)

//출력
[ 'milk', 'bread' ]
[ 'tomato', 'milk', 'bread' ]

 

 

객체 전개 연산자

객체 얕은 복사

const a = {
    name: 'bob',
    age: 35
}
const b = a
b.name = 'john'
b.age = 33

console.log(JSON.stringify(a))
console.log(JSON.stringify(b))

//출력
{"name":"john","age":33}
{"name":"john","age":33}

객체 깊은 복사

const a = {
    name: 'bob',
    age: 35,
    country: 'korea'
}
const b = {...a}
b.name = 'john'
b.age = 33

console.log(JSON.stringify(a))
console.log(JSON.stringify(b))

//출력
{"name":"bob","age":35,"country":"korea"}
{"name":"john","age":33,"country":"korea"}

전개 연산자를 사용한 객체 요소 추가

const a = {
    name: 'bob',
    age: 35,
    contury : 'korea'
}
const b = {
    ...a,
    name : 'john',
    age : 33,
    gender : 'M'
}

console.log(JSON.stringify(a))
console.log(JSON.stringify(b))

//출력
{"name":"bob","age":35,"contury":"korea"}
{"name":"john","age":33,"contury":"korea","gender":"M"}

 

 

키워드 정리

• 속성 존재 여부 확인은 객체 내부에 어떤 속성이 있는지 확인하는 것을 의미. 객체에 없는 속성은 접근하면 undefined가 나오는데, 이를 활용하면 된다.
• 다중 할당은 배열과 객체 하나로 여러 변수에 값을 할당하는 것을 의미
• 얕은 복사(참조 복사)는 복사하는 행위가 단순하게 다른 이름을 붙이는 형태로 동작하는 복사를 의미
• 깊은 복사는 복사 후 두 객체를 완전하게 독립적으로 사용할 수 있는 복사를 의미

 

Q1.

정답 2번