반응형
속성 존재 여부 확인
- 객체에 없는 속성 접근 시 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' }
반응형
'JS > Javascript' 카테고리의 다른 글
[Javascript] 클래스 (0) | 2023.11.07 |
---|---|
[Javascript] 구문 오류 및 예외 처리 (0) | 2023.11.07 |
[Javascript] 객체 (0) | 2023.11.02 |
[javascript] 구조 분해 할당, 배열 구조 분해 (0) | 2023.10.19 |
[함수] 클로저 함수 (Closure Function) (0) | 2023.02.25 |