코딩에 갇힌 지 6일차(객체 - 고급)

Undong·2023년 3월 11일
0
post-thumbnail

객체와 배열 고급

속성 존재 여부 확인

  • 객체 내부에 어떤 속성이 있는지 확인해보는 코드는 굉장히 자주 사용하는 코드입니다.
  • 객체에 없는 속성에 접근하면 undefined 자료형이 나옵니다.
  • 따라서 조건문으로 undefined인지 아닌지 확인하면 속성 존재 여부를 확인할 수 있습니다.
const object = {
  name: '혼자 공부하는 파이썬',
  price: 18000,
  publisher: '한빛미디어',
};

if (object.name !== undefined) {
  console.log('name 속성이 있습니다.');
} else {
  console.log('name 속성이 없습니다.');
}

if (object.author !== undefined) {
  console.log('author 속성이 있습니다.');
} else {
  console.log('author 속성이 없습니다.');
}
  • 더 짧게 사용하기
Object.name || console.log('name 속성이 없습니다.');
Object.author || console.log('author 속성이 없습니다.');
  • 기본 속성 지정하기
Object.name = Object.name || '제목 미정'
Object.author = Object.author || '저자 미상'

배열 기반의 다중 할당

  • 한 번에 여러 개의 변수에 값을 할당하는 다중 할당 기능이 추가 되었습니다.
[식별자, 식별자, 식별자, ...] = 배열
let = [a, b] = [1, 2];
undefined
console.log(a, b);
1, 2
undefined

객체 기반의 다중 할당

  • 객체 내부에 있는 속성을 꺼내서 변수로 할당
{속성 이름, 속성 이름} = 객체
{ 식별자 = 속성 이름, 식별자 = 속성 이름} = 객체
  • 객체 속성 꺼내서 다중 할당하기
const object = {
  name: '혼자 공부하는 파이썬',
  price: 18000,
  publisher: '한빛미디어',
};

const { name, price } = object;
console.log('# 속성 이름 그대로 꺼내서 출력하기');
console.log(name, price);
console.log('');

const { a = name, b = price } = object;
console.log('# 다른 이름으로 속성 꺼내서 출력하기');
console.log(a, 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);
  • 전개 연산자를 사용한 배열 요소
[...배열, 자료, 자료, 자료]
  • 전개 연산자로 배열 전개하고 자료 추가하기
const 물건1 = ['우유', '식빵'];
const 물건2 = ['고구마', ...물건1, '토마토'];

console.log(물건1);
console.log(물건2);
  • 배열을 여러 번 전개하기
const 물건1 = ['우유', '식빵'];
const 물건2 = ['고구마', '토마토'];

[...물건1, ...물건2]
[...물건2, ...물건1]

객체 전개 연산자

  • 전개 연산자를 사용한 객체 복사
{...객체}
  • 얕은 복사로 객체 복사하기
const 구름 = {
  이름: '구름',
  나이: 6,
  종족: 'rkddkwl',
};
const 별 = 구름;
별.이름 = '별';
별.나이 = 1;

console.log(JSON.stringify(구름));
console.log(JSON.stringify(별));
  • 전개 연산자를 사용해 깊은 복사하기
const 구름 = {
  이름: '구름',
  나이: 6,
  종족: 'rkddkwl',
};
const= { ...구름 };.이름 = '별';.나이 = 1;

console.log(JSON.stringify(구름));
console.log(JSON.stringify());
  • 변경하고 싶은 속성만 추가하기
const 구름 = {
  이름: '구름',
  나이: 6,
  종족: '강아지',
};
const= {
  ...구름,
  이름: '별',
  나이: 1,
  예방접종: true,
};

console.log(JSON.stringify(구름));
console.log(JSON.stringify());
  • 전개 부분 뒤로 이동하기
const 구름 = {
  이름: '구름',
  나이: 6,
  종족: '강아지',
};
const= {
  이름: '별',
  나이: 1,
  예방접종: true,
  ...구름,
};

console.log(JSON.stringify(구름));
console.log(JSON.stringify());
profile
console.log("Hello")

0개의 댓글