※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.
목차
객체와 배열 고급
속성 존재 여부 확인, 다중 할당, 얕은 복사(참조 복사), 깊은 복사
요약:
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