속성 존재 여부 확인
객체 내부에 어떤 속성이 있는지 확인하는 방법은 자주 사용된다
const object = {
name: '박은정',
hobby: '독서',
dream: '프론트엔드 개발자'
}조건문으로 indefined 여부를 확인
객체에 없는 속성에 접근하면 undefined 자료형이 나오기 때문에
조건문으로 indefined 여부를 확인하면 속성 존재 여부를 확인할 수 있다
if (object,name !== undefined) console.log('name 속성이 있습니다.')
else console.log('name 속성이 없습니다.')
if (object.home !== undefined) console.log('home 속성이 있습니다.')
else console.log('home 속성이 없습니다.')객체의 특정 속성이 false로 변환될 수 있는 값
객체의 특정 속성이 false로 변환될 수 있는 값 0, false, 빈 문자열 이 아닐 때 if문의 조건식에 입력한다 (무조건 true로 나오기 때문에 코드실행됨)
if (object.name) console.log('name 속성이 있습니다.')
else console.log('name 속성이 없습니다.')
if (object.home) console.log('home 속성이 있습니다.')
else console.log('home 속성이 없습니다.')OR 연산자 활용
object.name || console.log('name 속성이 있습니다.')
object.author || console.log('author 속성이 있습니다.')기본 속성 지정
객체의 기본 속성을 지정하는 경우도 많다
객체의 속성이 있는지 확인하고 있다면 해당 속성을, 없다면 문자열을 지정한다
const object = {
name: '박은정',
hobby: '독서',
dream: '프론트엔드 개발자'
}
object.name = object.name !== undefined ? object.name " '이름 모름'
object.home = object.home !== undefined ? object.home : '집 주소 모름'
console.log(JSON.stringfy(object, null, 2))
/*
==실행결과==
{
"name": "박은정",
"hobby": "독서",
"dream": "프론트엔드 개발자",
"home": "집 주소 모름" // author 속성이 없었으므로 기본 속성이 적용된다
}
*/속성이 무조건 true이라는 전제가 있을 때
실제로 많이 쓰인다
object.name = object.name || '이름 모름'
object.home = object.home || '집 주소 모름'다중 할당
배열
한 번에 여러 개의 변수에 값을 할당한다
[식별자, 식별자, 식별자, ...] = 배열let [a,b] = [1,2]
console.log(a, b) // 1, 2
[a, b] = [b, a]
console.log(a,b) // 2, 1할단 연산자 = 왼쪽에 식별자 변수, 상수 의 배열을 넣고 오른쪽에 배열을 위치시키면 배열의 위치에 맞게 값들이 할당된다
객체
객체 내부에 있는 속성을 꺼내서 변수로 할당할 때 사용한다
{ 속성이름, 속성이름 } = 객체
{ 식별자 = 속성이름, 식별자 = 속성이름 } = 객체const object = {
name: '박은정',
hobby: '독서',
dream: '프론트엔드 개발자'
}
const { name, hobby } = object
console.log(name) // 박은정
console.log(hobby) // 독서
const { a=name, b=hobby } = object
console.log(a) // 박은정
console.log(b) // 독서전개 연산자
얕은 복사
배열과 객체는 할당할 때 얕은 복사라는 것이 이루어진다
배열은 복사해도 다른 이름이 붙을 뿐인 것을 얕은 복사 (참조복사) 라고 한다
const 물건_1 = ['우유', '식빵']
const 물건_2 = 물건_1
물건_2.push('고구마')
물건_2.push('토마토')
console.log(물건_1) // ['우유', '식빵', '고구마', '토마토']
console.log(물건_2) // ['우유', '식빵', '고구마', '토마토']깊은 복사
복사한 두 배열이 완전히 독립적으로 자동한다
자바스크립트 개발에서는 깊은 복사를 클론을 만드는 것이라고 표현한다
전개연산자를 사용해 깊은복사를 할 수 있어, 얕은복사된 것과는 달리 두 배열이 독립적으로 작동된다
[...배열]배열 전개 연산자
const 물건_1 = ['우유', '식빵']
const 물건_2 = [...물건_1]
물건_2.push('고구마')
물건_2.push('토마토')
console.log(물건_1) // ['우유', '식빵']
console.log(물건_2) // ['우유', '식빵', '고구마', '토마토']전개 연산자를 입력한 곳에 배열이 전개되어 들어가는 것뿐이기 때문에
배열을 여러 번 전개하거나 다른 2개 이상의 배열을 붙일 때에도 활용할 수 있다
const a = ['우유', '식빵']
const b = ['고구마', '토마토']
[...a, ...b] // ['우유', '식빵', '고구마', '토마토']
[...b, ...a] // ['고구마', '토마토', '우유', '식빵']객체 전개 연산자
{...객체}전개연산자를 사용한 객체 요소 추가
{...객체, 자료, 자료, 자료}const object = {
first: 1,
second: 2,
third: 3
}
const object_2 = {
...object,
one: 1,
two: 2,
three: 3
}
console.log(JSON.stringify(object)) // '{"first":1,"second":2,"third":3}'
console.log(JSON.stringify(object_2))
// '{"first":1,"second":2,"third":3,"one":1,"two":2,"three":3}'