1. 구조 분해 할당

구조 분해 할당(Destructuring assignment)이란 배열 또는 객체의 값을 말 그대로 분해해 개별 변수에 즉시 할당하는 것을 의미한다.
배열과 객체에서 사용하며, 주로 어떠한 객체나 배열에서 선언문 없이 즉시 분해해 변수를 선언하고 할당하고 싶을 때 사용한다.

배열 구조 분해 할당

const arr = [1, 2, 3];

const [a, b, c] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

➡ 배열의 각 요소가 변수에 순서대로 할당

객체 구조 분해 할당

객체 구조 분해 할당은 객체의 속성을 쉽게 변수에 할당하는 방법이다.

const user = {
  name: "Alice",
  age: 25,
  country: "Korea"
};

const { name, age, country } = user;

console.log(name);   // "Alice"
console.log(age);    // 25
console.log(country); // "Korea"

➡ 객체의 키와 동일한 변수 이름을 사용하여 값을 가져올 수 있다.

React에서 Props 구조 분해 할당

<UserProfile name="Alice" age={25} />

const UserProfile = ({ name, age }) => {
  return (
    <div>
      <h1>{name}</h1>
      <p>나이: {age}</p>
    </div>
  );
};

export default UserProfile;

➡ props 객체에서 name과 age를 구조 분해하여 바로 사용할 수 있다.

2. 전개 구문

전개 구문(Spread Syntax)은 배열이나 객체, 문자열과 같이 순회할 수 있는 값에 대해 말 그대로 전개해 간결하게 사용할 수 있는 구문이다.

배열의 전개 구문

배열을 펼쳐서 개별 요소로 변환한다.

배열 복사하기

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // arr1을 새로운 배열로 복사

console.log(arr2); // [1, 2, 3]
console.log(arr1 === arr2); // false (새로운 배열이 생성됨)

➡ 전개 구문을 사용하면 원본 배열을 변경하지 않고 새로운 배열을 생성할 수 있다.

배열 합치기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArr = [...arr1, ...arr2];

console.log(combinedArr); // [1, 2, 3, 4, 5, 6]

➡ 여러 개의 배열을 합칠 때 concat()보다 더 간결하게 사용할 수 있다.

객체의 전개 구문

객체에서도 배열과 비슷하게 사용이 가능하다. 객체를 새로 만들 때 이 전개 구문을 사용할 수 있으며, 마찬가지로 객체를 합성하는 데 있어 편리함을 가져다 준다.

객체 복사하기

const user = { name: "Alice", age: 25 };
const newUser = { ...user };

console.log(newUser); // { name: "Alice", age: 25 }
console.log(user === newUser); // false (새로운 객체가 생성됨)

➡ 객체의 참조를 복사하는 것이 아니라, 새로운 객체를 생성한다.

객체 병합하기

const user = { name: "Alice", age: 25 };
const additionalInfo = { country: "Korea", age: 30 };

const mergedUser = { ...user, ...additionalInfo };

console.log(mergedUser); // { name: "Alice", age: 30, country: "Korea" }

➡ 속성이 중복될 경우, 뒤쪽의 객체가 우선 적용된다 (age가 30으로 덮어씌워짐).

3. 객체 초기자

객체를 선언할 때 객체에 넣고자 하는 키와 값을 가지고 있는 변수가 이미 존재한다면 해당 값을 간결하게 넣어줄 수 있는 방식이다.

기본적인 객체 초기화

const person = {
  name: "Alice",
  age: 25,
  country: "Korea"
};

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

➡ 중괄호 {}를 사용하여 객체를 선언하고 속성을 정의하는 것이 기본적인 객체 초기자이다.

변수 값을 속성으로 사용하기

객체 속성의 값이 변수와 같다면, 축약 표현(Shorthand Property)을 사용할 수 있다.**

const name = "Bob";
const age = 30;

const user = { name, age };

console.log(user); // { name: "Bob", age: 30 }

➡ name: name 대신 name만 적어도 되는 것이다.

4. Array 프로토타입 메서드

map

인수로 전달받은 배열과 똑같은 길이의 새로운 배열을 반환하는 메서드다.
배열의 각 아이템을 순회하면서 각 아이템을 콜백으로 연산한 결과로 구성된 새로운 배열을 만들 수 있다.

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

const squared = numbers.map(num => num * num);

console.log(squared); // [1, 4, 9, 16, 25]

➡ 각 요소를 제곱하여 새로운 배열을 생성한다.

JSX에서 map() 사용하기

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const UserList = () => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

➡ React에서 map()을 사용하여 리스트를 동적으로 렌더링할 때 자주 활용된다.
➡ key 속성은 React에서 리스트를 렌더링할 때 필수!

filter

truthy 조건을 만족하는 경우에만 해당 원소를 반환하는 메서드다.
말 그대로 필터링하는 역할의 메서드이며, filter의 결과에 따라 원본 배열의 길이 이하의 새로운 배열이 반환된다.

즉, 앞선 map과 다르게 같은 크기의 배열이 나오지 않을 수도 있다.
주로 기존 배열에 대해 어떠한 조건을 만족하는 새로운 배열을 반환할 때 쓰인다.

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

const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

➡ 짝수만 골라서 새로운 배열을 생성한다.

React에서 filter() 활용

import { useState } from "react";

const TodoList = () => {
  const [todos, setTodos] = useState(["Study React", "Exercise", "Buy groceries"]);

  const removeTodo = (task) => {
    setTodos(todos.filter(todo => todo !== task));
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo}>
          {todo} <button onClick={() => removeTodo(todo)}>삭제</button>
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

➡️ 실행 흐름

• useState를 사용해 todos 배열을 관리.
• filter()를 사용해 클릭한 task를 제외한 새로운 배열을 setTodos로 업데이트.
• map()을 이용해 리스트를 렌더링하고, 각 항목에 삭제 버튼 추가.

reduce

배열의 모든 요소를 누적하여 단일 값(숫자, 객체, 배열 등) 으로 반환할 때 사용된다.

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

const sum = numbers.reduce((acc, cur) => acc + cur, 0);

console.log(sum); // 15

➡ 초깃값(0)을 기준으로 배열의 모든 값을 더해서 결과를 반환한다.

acc: 누적값 (초깃값부터 시작)
cur: 현재 값
0: 초기값 (생략 가능, 하지만 명시하는 것이 좋음)

React에서 reduce() 활용

const cart = [
  { item: "Laptop", price: 1000 },
  { item: "Phone", price: 500 },
  { item: "Tablet", price: 700 }
];

const totalPrice = cart.reduce((acc, cur) => acc + cur.price, 0);

console.log(totalPrice); // 2200

➡ React에서 쇼핑 카트의 총 가격을 계산할 때 활용할 수 있다.

forEach

forEach는 콜백 함수를 받아 배열은 순회하면서 단순히 그 콜백 함수를 실행하기만 하는 메서드다.

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

numbers.forEach(num => {
  console.log(num);
});
// 출력: 1 2 3 4 5

➡ 각 요소를 하나씩 순회하며 콘솔에 출력한다.

주의할 점은 forEach는 아무런 반환값이 없다는 것이다. 단순히 콜백 함수만 실행할 뿐, map과 같이 결과를 반환하는 작업은 수행하지 않는다. 즉, forEach의 반환값은 undefined로 의미 없다는 것을 알아두어야 한다.

🌟 forEach() vs map() 차이

const numbers = [1, 2, 3];

// forEach(): 결과 없음
numbers.forEach(num => num * 2); 
console.log(numbers); // [1, 2, 3] (변화 없음)

// map(): 새로운 배열 생성
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

➡ map()은 새로운 배열을 반환하지만, forEach()는 반환값이 없다.
➡ 배열 변환이 필요하면 map(), 단순 반복 작업이면 forEach()를 사용하는 것이 좋다.

5. 삼항 조건 연산자

삼항 조건 연산자는 자바스크립트에서 유일하게 3개의 피연산자를 취할 수 있는 문법이다.

조건문 ? 참일 때 값 : 거짓일 때 값

const age = 20;

const status = age >= 18 ? "성인" : "미성년자";

console.log(status); // "성인"

➡ age가 18 이상이면 "성인", 그렇지 않으면 "미성년자"가 반환된다.

삼항 연산자를 활용한 JSX 조건부 렌더링

<WelcomeMessage isLoggedIn={true} /> // "환영합니다!"
<WelcomeMessage isLoggedIn={false} /> // "로그인하세요"

const WelcomeMessage = ({ isLoggedIn }) => {
  return <h1>{isLoggedIn ? "환영합니다!" : "로그인하세요"}</h1>;
};

export default WelcomeMessage;

➡ React에서 JSX 내부에서 조건부 렌더링을 할 때 자주 사용된다.