※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.

목차
객체와 배열 고급
요약:
속성 존재 여부 확인
배열 기반의 다중 할당
객체 기반의 다중 할당
다중 할당 (구조 분해 할당) 활용 예시
얕은 복사: 참조 변수만 바꾸기
깊은 복사: 내용물도 복사
배열 전개 연산자로 깊은 복사하기
객체 전개 연산자로 깊은 복사하기
전개 구문 spread operator

객체와 배열 고급

속성 존재 여부 확인, 다중 할당, 얕은 복사(참조 복사), 깊은 복사

요약:

☝🏿

“객체.속성1”의 값이 null이나 NaN, 0, “”가 아니라는 게 확실하면 if (객체.속성1)로 속성1의 존재 여부를 확인하고(확실치 않다면 if (객체.속성1 !== undefined)로),

☝🏿

할당 연산자 오른쪽에 배열이나 객체를 써서 다른 배열과 객체에 다중 할당(구조 분해 할당)해줄 수 있다.

☝🏿

전개 연산자로 배열과 객체 내부에 직접 할당해주면 깊은 복사가 되고, 그냥 참조변수명만 새로 만들어 연결하면 얕은 복사가 된다. 한 마디로 전개 연산자는 깊은 복사의 화신!

속성 존재 여부 확인

: 객체 내부에 어떤 속성이 있는지 확인하는 것. 객체에 없는 속성에 접근하면 undefined가 나오는 것을 활용한다.

if (객체.name !== undefined) { console.log('name 속성이 있음.') }

더 짧게는 (false로 변환될 수 있는 값이 들어오지 않는다는 전제 하에):

if (객체.name) { console.log('name 속성이 있음') }

더 짧게 :

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

특정 속성이 없으면 디폴트 값을 지정해주는 식으로 활용할 수 있다:

객체.name = (객체.name !== undefined) ? 객체.name : '익명의 누군가'

더 짧게 (false로 변환될 수 있는 값이 들어오지 않는다는 전제 하에):

객체.name = 객체.name || '익명의 누군가'

배열 기반의 다중 할당

다중 할당 = 구조 분해 할당(destructuring assignment) : 한 번에 여러 개의 변수에 값을 할당하는 것.

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

let [a, b] = [1, 5] => a=1, b=5
const [c, d, e] = [11, 22, 33, 44, 55] => c=11, d=22, e=33

객체 기반의 다중 할당

: 객체 내부에 있는 속성을 꺼내서 한꺼번에 변수로 할당

{ 속성_이름, 속성_이름 } = 객체

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

// 객체 내부의 name과 price 속성을 꺼내 변수에 할당하기:
const 객체 = {
		name: '혼자 공부하는 파이썬',
		price: 18000,
		publisher: '한빛미디어',
}

const { name, price } = 객체
console.log(name, price)
const { a=name, b=price } = 객체
console.log(a, b)

=> 결과:
혼자 공부하는 파이썬 18000
혼자 공부하는 파이썬 18000

다중 할당 (구조 분해 할당) 활용 예시

// 구조 분해 할당을 사용하지 않음: 
// user가 객체일 때
const getUserName = (user) => {
	return user.name
}

// user가 배열일 때
const getUserName = (user) => {
	return user[0]
}

// 구조 분해 할당을 사용함:
// 객체일 때
const getUserName = ({name, age}) => {
	return name;
};

// 배열일 때
const getUserName = ([name, age]) => {
	return name
};

얕은 복사: 참조 변수만 바꾸기

배열과 객체를 할당할 때.

const 물건1 = ['우유', '식빵']
const 물건2 = 물건1
// => 물건1과 물건2는 같은 주소의 객체이다.

객체도 얕은 복사를 하면 같은 주소의 객체가 공유된다. 한 집에 문을 두 개 내는 형국. 이쪽 문으로 들어와서 속성을 수정하면 저쪽 문으로 속성을 호출해갈 때 수정된 값이 나가게 된다.

깊은 복사: 내용물도 복사

배열 전개 연산자로 깊은 복사하기

[…배열]

아하!

const 물건1 = ['우유', '식빵']
const 물건2 = ['부추', ...물건1, '밀가루']  // = [부추,우유,식빵,밀가루]
// => 물건1과 물건2는 완전히 다른 객체가 되었다.

객체 전개 연산자로 깊은 복사하기

{…객체}

const 강아지1 = { 이름: '구름', 예방접종: true}
const 강아지2 = {...강아지1, 이름: '별'} // = { 이름: '별', 예방접종: true }
// => 강아지1과 강아지2는 다른 집주소를 가진 독립된 객체가 되었다.

배열 깊은 복사 때완 달리 키:값 ‘덮어쓰기’가 가능하기 때문에 전개 순서가 중요함.

(+추가)

전개 구문 spread operator

: 지금까지 한 것. 전개 연산자로 깊은 복사를 해주는 연산자.

: 기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여서 새로운 객체나 배열을 생성할 때 사용하는 ...객체/배열 문법. 기존의 데이터 (객체나 배열)에는 전혀 영향을 주지 않고 복사해서 새로운 것을 만든다는 장점이 있다.

참고:

[책] 혼자 공부하는 자바스크립트 - 윤인성

Uploaded by N2T

[책] CH6 객체 part4(끝). 다중 할당과 깊은 복사