JS : ES6에 추가된 문법 정리

 

 

스프레드(...) 연산자

※ 배열 스프레드 연산자

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]


// 배열 얕은 복사
const originalArray1 = [1, 2, 3];
const copiedArray = [...originalArray1];
console.log(copiedArray); // [1, 2, 3]


// 새로운 요소 추가
const originalArray2 = [1, 2, 3];
const newArray = [...originalArray2, 4];
console.log(newArray); // [1, 2, 3, 4]

※ 객체 스프레드 연산자

// 객체의 속성 합치기
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 2, c: 3, d: 4 }


// 객체의 속성 추가 또는 변경
const originalObject = { a: 1, b: 2 };
const newObject = { ...originalObject, c: 3, b: 4 };
console.log(newObject); // { a: 1, b: 4, c: 3 }

 

 

비구조화 할당

※ 배열의 비구조화 할당

// 배열의 비구조화
const numbers = [1, 2, 3];
const [a, b, c] = numbers;
console.log(a, b, c); // 1 2 3


// 일부 값 무시
const numbers = [1, 2, 3, 4, 5];
const [first, , third] = numbers;
console.log(first, third); // 1 3


// 나머지 요소 수집
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 1 2 [3, 4, 5]

※ 객체의 비구조화 할당

// 기본 객체 비구조화
const person1 = { name: 'Daniel', age: 32, job: 'developer' };
const { name, age, job } = person1;
console.log(name, age, job); // Daniel 32 developer


// 변수 이름 변경
const person2 = { name: 'Daniel', age: 32, job: 'developer' };
const { name: fullName, age: years, job: occupation } = person2;
console.log(fullName, years, occupation); // Daniel 32 developer


// 기본 값 설정
const person3 = { name: 'Daniel', age: 32 };
const { name, age, job = 'developer' } = person3;
console.log(name, age, job); // Daniel 32 developer

 

 

 

객체 리터럴

※ 객체 리터럴

// 기본 객체 리터럴
const person = {
  name: 'Daniel',
  age: 32,
  job: 'developer'
};


// 속성명 계산
const key = 'location';
const user = {
  name: 'Daniel',
  [key]: 'New York'
};
console.log(user); // { name: 'Alice', location: 'New York' }


// 메서드 축약
const car = {
  brand: 'Toyota',
  model: 'Camry',
  startEngine() {
    console.log('Engine started!');
  }
};
car.startEngine(); // Engine started!


// 중첩 객체
const student = {
  name: 'Daniel',
  age: 32,
  address: {
    city: 'New York',
    zipCode: '10001'
  }
};


// 객체 속성 변경
const dog = {
  breed: 'Labrador',
  color: 'Golden'
};

dog.color = 'Black';
dog.age = 3;

 

 

옵셔널 체이닝(?.)

※ 옵셔널 체이닝

const person = {
  name: 'Daniel',
  age: 32,
  address: {
    city: 'New York',
    zipCode: '10001',
    details: {
      street: '123 Main St'
    }
  }
};

// 옵셔널 체이닝을 사용한 속성 접근
const street = person?.address?.details?.street;
console.log(street); // '123 Main St'

// 존재하지 않는 속성에 대한 접근
const nonExistentProperty = person?.nonExistent?.property;
console.log(nonExistentProperty); // undefined

 

 

Map

※ Map

// Map 생성
let myMap = new Map();

// 값 추가
myMap.set('name', 'Daniel');
myMap.set('age', 32);
myMap.set('job', 'developer');

// 값 읽기
console.log(myMap.get('name')); // 'Daniel'

// 키 확인
console.log(myMap.has('age')); // true

// 값 삭제
myMap.delete('job');

// Map 순회
myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Map 크기
console.log(myMap.size); // 2

 

 

Set

※ Set

// Set 생성
let mySet = new Set();

// 값 추가
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(2); // 중복된 값은 무시

// 값 읽기
console.log(mySet.has(2)); // true

// 값 삭제
mySet.delete(3);

// Set 순회
mySet.forEach(value => {
  console.log(value);
});

// Set 크기
console.log(mySet.size); // 2