자바스크립트의 concat: 배열 합치기의 마법사 🧙‍♂️

concat 함수 톺아보기 💡

concat은 배열이나 문자열을 연결할 때 사용하는 아주 깔끔하고 직관적인 방법입니다. 특히 데이터를 합치거나 복사할 때 강력한 도구로 사용되죠. 이번에는 concat의 사용법부터 실무에서의 활용까지 아주 깊이 있고 풍부하게 다뤄볼게요!

---

concat이란? 🤔

concat은 배열이나 문자열을 변경하지 않고(원본 불변) 새로운 배열이나 문자열을 반환하는 메서드입니다. 여러 배열이나 문자열을 한데 묶어 새롭게 사용하고 싶을 때 딱이에요.

---

문법 📜

배열에 사용하는 경우:

const newArray = array1.concat(array2, array3, ...);

 

문자열에 사용하는 경우:

const newString = string1.concat(string2, string3, ...);

---

배열에서 concat 사용법 📖

1. 배열 합치기

const fruits = ["apple", "banana"];
const veggies = ["carrot", "spinach"];
const food = fruits.concat(veggies);

console.log(food); // ["apple", "banana", "carrot", "spinach"]

 

여기서 핵심은 원본 배열은 변하지 않는다는 점이에요.

console.log(fruits); // ["apple", "banana"] (원본 유지)
console.log(veggies); // ["carrot", "spinach"] (원본 유지)

 

2. 다중 배열 합치기

concat은 여러 배열도 한 번에 합칠 수 있어요.

const fruits = ["apple", "banana"];
const veggies = ["carrot", "spinach"];
const grains = ["rice", "quinoa"];

const allFoods = fruits.concat(veggies, grains);

console.log(allFoods); // ["apple", "banana", "carrot", "spinach", "rice", "quinoa"]

 

3. 값 추가하기

단순히 배열에 새로운 값을 추가하는 것도 가능합니다.

const fruits = ["apple", "banana"];
const moreFruits = fruits.concat("cherry", "mango");

console.log(moreFruits); // ["apple", "banana", "cherry", "mango"]

 

4. 중첩 배열 처리

concat은 중첩 배열을 평탄화하지 않아요. 중첩 배열은 그대로 유지됩니다.

const array1 = [1, 2];
const array2 = [3, [4, 5]];
const result = array1.concat(array2);

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

 

만약 중첩 배열을 평탄화하고 싶다면 flat 메서드를 추가로 사용해야 합니다.

console.log(result.flat()); // [1, 2, 3, 4, 5]

---

문자열에서 concat 사용법 📖

1. 문자열 합치기

문자열을 이어붙일 때도 concat을 사용할 수 있어요.

const greeting = "Hello, ";
const name = "Alice";

const message = greeting.concat(name, "!");

console.log(message); // "Hello, Alice!"

 

2. 단순 더하기와 비교

문자열을 합칠 때는 + 연산자와 concat 모두 사용할 수 있지만, 가독성과 의도를 명확히 하기 위해 concat이 더 적합한 경우가 많습니다.

const greeting = "Hi, ";
const name = "Bob";

// `+` 연산자 사용
console.log(greeting + name + "!"); // "Hi, Bob!"

// `concat` 사용
console.log(greeting.concat(name, "!")); // "Hi, Bob!"

---

concat vs push vs 스프레드 문법 🤷‍♂️

배열을 다룰 때 concat 외에도 push나 스프레드 연산자(...)를 사용할 수 있습니다. 이들의 차이점을 비교해 볼까요?

 

concat

• 새 배열을 반환
• 원본 배열을 변경하지 않음(불변성 유지)

const arr = [1, 2];
const newArr = arr.concat(3);

console.log(arr); // [1, 2] (원본 유지)
console.log(newArr); // [1, 2, 3]

 

push

• 기존 배열을 변경
• 불변성을 유지해야 하는 경우 적합하지 않음

const arr = [1, 2];
arr.push(3);

console.log(arr); // [1, 2, 3] (원본 변경)

 

스프레드 문법(...)

• 새로운 배열을 반환
• 불변성을 유지하며, 가독성이 좋아 현대 코드에서 많이 사용됨

const arr = [1, 2];
const newArr = [...arr, 3];

console.log(arr); // [1, 2] (원본 유지)
console.log(newArr); // [1, 2, 3]

---

실무에서의 활용 예제 💼

1. API 응답 합치기

concat은 페이징 데이터나 여러 API 응답을 합칠 때 유용합니다.

const page1 = [{ id: 1, name: "Alice" }];
const page2 = [{ id: 2, name: "Bob" }];

const allData = page1.concat(page2);

console.log(allData); // [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }]

 

2. JSX에서의 리스트 합치기

React에서 여러 배열을 합쳐 리스트를 렌더링하는 경우에도 concat을 쓸 수 있어요.

function UserList() {
  const admins = ["Alice", "Bob"];
  const users = ["Charlie", "Daisy"];
  const allUsers = admins.concat(users);

  return (
    <ul>
      {allUsers.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

 

3. 대체 텍스트 만들기

동적인 텍스트를 생성할 때도 concat이 활용됩니다.

function DynamicMessage({ name }) {
  const baseMessage = "Welcome, ";
  const fullMessage = baseMessage.concat(name || "Guest", "!");

  return <p>{fullMessage}</p>;
}

---

요약: concat, 언제 쓰는 게 좋을까? 🧐

• 배열을 합칠 때: 여러 데이터를 한데 묶어 새 배열을 만들어야 할 때
• 불변성이 필요할 때: 원본 배열을 변경하지 않고 새로운 배열을 반환
• React 개발에서: 리스트 데이터를 합쳐 JSX에서 렌더링

concat은 단순하지만 강력합니다.

데이터를 효율적으로 다루고, 불변성을 유지하면서도 직관적인 코드를 작성하는 데 꼭 필요한 도구예요.

이제 concat으로 깔끔한 코드를 작성해 보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷