JavaScript - 자주 사용되는 문법

object shorthand assignment

• key와 value의 이름이 같으면 사용할 수 있다.

일반적인 코드

let name = 'fdongfdong';
let age = 17;

let person = {
  name: name,
  age: age,
};

console.log(person);

{ name: 'fdongfdong', age: 17 }

object shorthand assignment

let name = 'fdongfdong';
let age = 17;

let person = {
  name,
  age,
};

console.log(person);

{ name: 'fdongfdong', age: 17 }

Destructuring

일반적인 코드

let person = {
  name: 'fdongfdong',
  age: 20,
};

let name = person.name;
let age = person['age'];

console.log(name, age);

fdongfdong 20

Destructuring(구조 분해 할당)

let person = {
  name: 'fdongfdong',
  age: 20,
};
let { name, age } = person;

console.log(name, age);

fdongfdong 20

배열에도 사용 가능

let array = [1, 2, 3, 4];
let [a, b, ...rest] = array;

console.log(a, b, rest);

1, 2, [3, 4]

spread

person3의 경우 객체의 주소값만 복사 = 같은 값을 참조하고 있다.

spread를 이용한 객체 복사

let person = { name: 'fdongfdong', age: 12 };
let person2 = { ...person };
let person3 = person;

console.log(person2);
console.log(person3);
console.log(person == person2);
console.log(person == person3);

{ name: 'fdongfdong', age: 12 }
{ name: 'fdongfdong', age: 12 }
false
true

spread를 이용한 값 추가 및 복사

객체와 배열 모두 사용 가능

let person = { name: 'fdongfdong', age: 12 };
let person2 = { ...person, address: 'Seoul', age: 15 };

console.log(person2);

let a = [1, 2];
let b = [...a, 3];
let c = [...a, ...b];
console.log(b);
console.log(c);

{ name: 'fdongfdong', age: 15, address: 'Seoul' }
[ 1, 2, 3 ][ 1, 2, 1, 2, 3 ]

삼항 연산자

let person = { name: 'FdongFdong', age: 17 };

if (person) {
  console.log(person.name);
} else {
  console.log('no person');
}

console.log(person ? person.name : 'no person');

FdongFdong
FdongFdong