객체 ③ 객체와 배열 고급

이번 글에서는 앞서 배운 객체 개념을 바탕으로 보다 심화된 내용을 알아보자.

 

속성 존재 여부 확인하기

객체.키로 객체 내 특정 속성 값에 접근할 수 있는데,

이때 해당 속성 자체가 존재하지 않으면 undefined를 반환한다.
 
이를 이용해 객체 내 특정 속성의 존재 여부를 확인할 수 있다.

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

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

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

name 속성이 있습니다.
price 속성이 없습니다.

 
만약 특정 속성 값이 0, false, 빈 문자열 등 false로 변환될 수 있는 값이 아님이 확실하다면 더 간략하게 작성할 수 있고

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

if (book.name) {
  console.log('name 속성이 있습니다.')
} else {
  console.log('name 속성이 없습니다.')
}

if (book.price) {
  console.log('price 속성이 있습니다.')
} else {
  console.log('price 속성이 없습니다.')
}

위 전제 조건을 성립할 경우 짧은 조건문을 사용하면 훨씬 더 간략하게 작성할 수 있다.

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

book.name && console.log('name 속성이 있습니다.')
book.price && console.log('price 속성이 있습니다.')

 

그리고 이러한 속성 존재 여부 확인 코드는 속성의 기본값을 지정하는 용도로 자주 사용된다.

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

book.name = book.name !== undefined ? book.name : '제목 미정'
book.price = book.price !== undefined ? book.price : '가격 미정'

console.log(JSON.stringify(book, null, 2))

{
  "name": "혼자 공부하는 자바스크립트",
  "author": "윤인성",
  "publisher": "한빛미디어",
  "price": "가격 미정"
}

 
마찬가지로 특정 속성 값이 0, false, 빈 문자열 등 false로 변환될 수 있는 값이 아님이 확실하다면 더 간략하게 작성할 수 있고

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

book.name = book.name ? book.name : '제목 미정'
book.price = book.price ? book.price : '가격 미정'

console.log(JSON.stringify(book, null, 2))

위 전제 조건을 성립할 경우 짧은 조건문을 사용하면 훨씬 더 간략하게 작성할 수 있다.

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

book.name = book.name || '제목 미정'
book.price = book.price || '가격 미정'

console.log(JSON.stringify(book, null, 2))

 

다중 할당

 
최신 JavaScript부터 배열 기반의 다중 할당과 객체 기반의 다중 할당 기능이 추가되었다.
 
이때 다중 할당이란 배열과 객체 하나로 여러 변수에 값을 할당하는 것을 말한다.
 
배열 기반의 다중 할당

[변수, 변수, 변수, ...] = 배열

 

오른쪽 상수 배열의 값이 순서대로 왼쪽 변수 배열의 값에 할당된다.
 
이때 두 배열의 크기는 같지 않아도 되고 let, const 키워드 모두 사용할 수 있다.

let [a, b] = [1, 2]
const [c, d, e] = [3, 4, 5, 6, 7]

console.log(a, b, c, d, e)

1 2 3 4 5

 
객체 기반의 다중 할당

{ 속성명, 속성명 } = 객체

 

오른쪽 객체 내 속성의 값이 속성명과 동일한 이름을 가지는 왼쪽 변수에 할당된다.

이때 변수명은 속성명과 동일할 필요 없이 따로 지정할 수도 있다.

{ 변수=속성명, 변수=속성명 } = 객체

const book = {
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}

const { name, author } = book
const { a=name, b=author } = book

console.log(name, author)
console.log(a, b)

혼자 공부하는 자바스크립트 윤인성
혼자 공부하는 자바스크립트 윤인성

 

전개 연산자

 
최신 JavaScript부터 전개 연산자를 사용한 깊은 복사 기능이 추가되었다.
 
기본적으로 배열과 객체는 할당 시 얕은 복사가 이루어진다.
 
얕은 복사는 우변의 이름을 좌변의 이름으로 바꾸는 것에 불과하기에 좌변과 우변이 서로 의존적이지만

깊은 복사는 우변과 좌변이 완전히 독립적으로 작동한다.

먼저 배열의 얕은 복사를 확인해보자.

const todo_0929 = ['장보기', '청소하기']
const todo_0930 = todo_0929
	
todo_0930.push('과제하기')
todo_0930.push('빨래하기')
	
console.log(todo_0929)
console.log(todo_0930)

(4) ["장보기", "청소하기", "과제하기", "빨래하기"]
(4) ["장보기", "청소하기", "과제하기", "빨래하기"]

todo_0929를 todo_0930으로 얕은 복사하였고

이는 곧 todo_0929의 이름을 todo_0930으로 바꾸는 것에 불과하기에

todo_0930에 추가한 원소가 todo_0929에도 추가되었다.

즉, todo_0929와 todo_0930이 서로 의존적이다.

객체의 얕은 복사 역시 위와 동일하다.

const daisy = {
  name: 'daisy',
  age: 6,
  sex: 'female'
}

const buddy = daisy

buddy.name = 'buddy'
buddy.age = 2

console.log(JSON.stringify(daisy))
console.log(JSON.stringify(buddy))

{"name":"buddy","age":2,"sex":"female"}
{"name":"buddy","age":2,"sex":"female"}

이때 전개 연산자를 사용하면 배열과 객체의 깊은 복사가 가능하다.
 
배열 전개 연산자

변수 = [...배열]

 

전개 연산자를 사용하면 배열이 전개되어 요소 값 자체가 전달된다. 

const todo_0929 = ['장보기', '청소하기']
const todo_0930 = [...todo_0929]
	
todo_0930.push('과제하기')
todo_0930.push('빨래하기')
	
console.log(todo_0929)
console.log(todo_0930)

(2) ["장보기", "청소하기"]
(4) ["장보기", "청소하기", "과제하기", "빨래하기"]

이때 전개된 배열과 함께 추가적인 값을 전달할 수도 있다.

변수 = [...배열, 자료, 자료]

const todo_0929 = ['장보기', '청소하기']
const todo_0930 = [...todo_0929, '과제하기', '빨래하기']
	
console.log(todo_0929)
console.log(todo_0930)

(2) ["장보기", "청소하기"]
(4) ["장보기", "청소하기", "과제하기", "빨래하기"]

객체 전개 연산자

변수 = {...객체}

 

전개 연산자를 사용하면 객체가 전개되어 속성의 키와 값이 모두 전달된다.

const daisy = {
  name: 'daisy',
  age: 6,
  sex: 'female'
}

const buddy = {...daisy}

buddy.name = 'buddy'
buddy.age = 2

console.log(JSON.stringify(daisy))
console.log(JSON.stringify(buddy))

{"name":"daisy","age":6,"sex":"female"}
{"name":"buddy","age":2,"sex":"female"}

이때 전개된 객체와 함께 추가적인 값을 전달할 수도 있다.

변수 = {...객체, 자료, 자료}

이때 자료는 키: 값의 형태로,

전개된 객체에 존재하는 속성에 대한 키와 값이 될 수도, 전개된 객체에 존재하지 않는 속성에 대한 키와 값이 될 수도 있다.

const daisy = {
  name: 'daisy',
  age: 6,
  sex: 'female'
}

const buddy = {
  ...daisy,
  name: 'buddy',
  age: 2,
  isVaccinated: true
}

console.log(JSON.stringify(daisy))
console.log(JSON.stringify(buddy))

{"name":"daisy","age":6,"sex":"female"}
{"name":"buddy","age":2,"sex":"female",“isVaccinated":true}

 
 
 
 

---

이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다.