모던자바스크립트 - 2

💙분할 대입

객체나 배열로부터 값을 추출하기 위한 방법
{ } 를 변수 선언부에서 이용하면 객체 안에 일치하는 속성 추출이 가능하다
일부만 추출하거나 순서를 추출하는 것은 가능하나 존재하지 않는 속성은 지정할 수 없다.

const Book = {
  title : "java"
  author : "juhee"
};

const {title, author} = myBook;
const {title:tt, author:aa} = myBook2;

const msg = `이 책의 이름은 ${title}입니다. 작가는 ${author} 입니다.`;
const msg2 = `이 책의 이름은 ${tt}입니다. 작가는 ${aa} 입니다.`;

💙디폴트값

함수의 인수가 객체를 분할 대입할 경우 설정해서 사용한다.
값이 없을 때 초기값이다.

const sayHello = (title="java") => cosole.log(`이 책의 이름은 ${title}입니다.`);
sayHello();

// 객체 분활 대입의 디폴트값
const myBook = {
  title="java";
}
const{title="java"} = myBook;
const msg = `이 책의 이름은 ${title}입니다.`;

💙스프레드 구문

...을 이용해서 배열, 객체, 문자열 등 iterable한 값을 펼쳐서(spread) 복사하거나 전달하는 문법이다.
중복 키가 있을 경우 뒤에 있는 값이 우선이다.

// 요소 전개 
const arr1 = [1,2];
console.log(arr1);
console.log(...arr1)

const arr2 = [1,2,3,4,5];
const [num1, num2, ...arr3] = arr2;

// 배열 복사
const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // arr1의 모든 요소를 복사
console.log(arr2); // [1, 2, 3]

💙객체 생략 표기법(shorthand)

객체의 속성명과 설정한 변수명이 같으면 생략 가능

// 원래 방식
const name = "Alice";
const age = 25;

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

// 생략 표기법
const name = "Alice";
const age = 25;

const person = { name, age };

console.log(person); // { name: 'Alice', age: 25 }

💙map

배열의 각 요소를 변형해서 새로운 배열을 만드는 함수이다.

const numbers = [1, 2, 3, 4];
const doubled = [];

// 기존 for문 사용
for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

// map 사용
const doubled = numbers.map(num => num * 2); // [2, 4, 6, 8]

💙filter

map 함수와 비슷하지만 return 뒤에 조건식을 입력하여 일치하는 것만 반환한다.

const numbers = [1, 2, 3, 4, 5];

const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]