[Javascript] 객체와 배열 다중 할당, 전개 연산자

 

속성 존재 여부 확인

• 객체에 없는 속성 접근 시 undefined가 리턴 되므로 해당 조건을 통한 존재여부 확인 가능
• 특정 속성이 false로 반횐될 수 있는 값(0, false,빈 문자열)이 아닐 떄에는 단순 조건문 처리로 처리

const person = {
  name: 'John',
  age: 20,
  hobby: '',
};

person.gender === undefined ? console.log('속성 존재하지 않음') : console.log('속성 존재');

// false로 반환될 수 있는 경우를 대비한 전제한 상태로 조건 처리
person.hobby || console.log('속성존재')

// false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있을 시 기본 속성을 지정해둠
person.hobby  = person.hobby || '없음'

---

배열 다중 할당

• 한 번에 여러 개의 변수에 값을 할당하는 방법
• 배열의 크기는 같을 필요 없으며, const 키워드로도 사용 가느

// [형식]
[식별자, 식별자, ...] = 배열

let [b, c]  = [2, 4]

console.log(b, c); // → 2 4


[b, c] = [c, b]
console.log(b, c); // → 4 2

const [a, b,c] = [1,2,3,4,5]
console.log(a, b, c); // → 1, 2, 3

---

객체 다중 할당

• 객체 내부에 있는 속성을 꺼내 변수로 할당 할 때 사용

// [형식]
let {속성명, 속성명} = 객체
const {식별자 =속성명, 식별자 = 속성명} = 객체

const person = {
  name: 'John',
  age: 20,
};

let { name, age } = person;

console.log(name);

let {a=age} = person
console.log(a);

---

전개 연산자

• 전개연산자 : 배열을 함수의 매개변수로 전개하고 싶을 때 사용
• 얇은 복사(참조 복사)  : 복사한 두 배열이 동일하게 자료를 저장

const arrA = [1, 2, 3],
  arrB = arrA;

arrA.push(4);

console.log(arrA); //→ [1, 2, 3, 4]
console.log(arrB); // → [1, 2, 3, 4]

• 깊은 복사(Clone)  : 복사한 두 배열이 독립적으로 자료를 저장 , 전개 연산자를 이용

배열 전개 연산자

• 복사한 두 배열이 서로 독립적으로 작동

// [형식]
[...배열]

// 배열 요소 추가 형식
[...배열, 자료, 자료]

const arrA = [1, 2, 3],
  arrB = [...arrA]

	arrA.push(4)

	console.log(arrA); // → [1, 2,3,4]
	console.log(arrB); // → [1, 2, 3]

---

객체 전개 연산자

// [형식]
{...객체}

// 전개 연산자를 활용한 객체 요소 추가
{자료, ...객체, 자료}

객체의 얇은 복사(참조 복사)

const person = {
	name : 'John',
	age: 20
}

const another = person

another.name= 'Jane'
another.age= 10

console.log(person); //⇒ { name: 'Jane', age: 10 }
console.log(another);  //⇒ { name: 'Jane', age: 10 }

객체 전개 연산자 활용

const person = {
	name : 'John',
	age: 20
}

const another = {
	...person,
	gender: 'female'


}

another.name='Jane'
another.age=22


console.log(person); //⇒ { name: 'Jane', age: 10 }
console.log(another);  //⇒ { name: 'Jane', age: 22, gender: 'female' }