[JS] 코딩테스트 009 - concat

문제9 : concat을 활용한 출력 방법
다음 소스 코드를 완성하여 날짜와 시간을 출력하시오.

/**
 * 
 * 데이터
 */

let year = '2019';
let month = '04';
let day = '26';
let hour = '11';
let minute = '34';
let second = '27';

let result = //빈칸을 채워주세요

console.log(result);

/**
출력
2019/04/26 11:34:27
*/

 

let result = year.concat('/',month,'/',day,' ', hour,':', minute,':', second);

console.log(result);

 

---

concat은 concatenate 단어의 축약.

"concatenate"라는 단어는 컴퓨터 과학과 수학 분야에서는 사용되지만,
일반적인 영어 대화에서는 거의 쓰이지 않는다.
(네이티브들도 "concatenate"를 보면 "프로그래밍 관련 용어인가?" 하고 생각할 수도 있음. 😆)

하지만 개발자들끼리는 concat이 익숙한 용어임.

✅ 정리

• concat은 concatenate의 줄임말! ("연결하다"라는 뜻)
• 자바스크립트뿐만 아니라 여러 프로그래밍 언어에서 연결 기능을 담당하는 함수로 사용됨.
• 일반적인 영어 회화에서는 거의 안 쓰이지만, 개발자들 사이에서는 흔한 용어!

---

 

🔹 concat() 메서드란?

concat() 메서드는 배열(Array)이나 문자열(String)을 합칠 때 사용하는 자바스크립트의 내장 메서드야! 원본 데이터를 변경하지 않고, 새로운 배열이나 문자열을 반환하는 것이 특징

 

 

1️⃣ 배열에서 concat() 사용

배열을 합칠 때 concat()을 사용하면 기존 배열을 변경하지 않고 새로운 배열을 반환해.

 

✅ 배열 합치기

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

const newArr = arr1.concat(arr2);

console.log(newArr); // [1, 2, 3, 4, 5, 6]
console.log(arr1);   // [1, 2, 3] (원본 변경 X)
console.log(arr2);   // [4, 5, 6] (원본 변경 X)

👉 arr1.concat(arr2)는 arr1과 arr2를 합친 새로운 배열을 반환하지만, 원본 배열(arr1, arr2)은 변하지 않아.

 

✅ 여러 개의 배열 합치기

여러 개의 배열을 한 번에 합칠 수도 있다.

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

const result = arr1.concat(arr2, arr3);
console.log(result); // [1, 2, 3, 4, 5, 6]

 

✅ 배열 + 값 합치기

배열과 개별 요소를 함께 합칠 수도 있어.

const numbers = [1, 2, 3];
const newNumbers = numbers.concat(4, 5);

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

 

✅ 중첩된 배열(nested array) 합치기

중첩된 배열(2차원 배열 이상)을 합치면 내부 배열은 그대로 유지

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

const result = arr1.concat(arr2);
console.log(result); // [1, 2, [3, 4]] (중첩 배열 유지됨)

👉 [3, 4]는 내부 배열이기 때문에 평탄화(flatten)되지 않고 그대로 포함돼!

 

📌 배열을 펼치고 싶다면 concat() 대신 flat() 또는 **전개 연산자(...)**를 사용할 수도 있어.

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

// flat() 사용
console.log(arr1.concat(arr2).flat()); // [1, 2, 3, 4]

// 전개 연산자(...) 사용
console.log([...arr1, ...arr2.flat()]); // [1, 2, 3, 4]

---

2️⃣ 문자열에서 concat() 사용

concat()은 문자열을 합칠 때도 사용

 

✅ 문자열 합치기

const str1 = "Hello, ";
const str2 = "World!";
const result = str1.concat(str2);

console.log(result); // "Hello, World!"

 

✅ 여러 개의 문자열 합치기

const str1 = "안녕";
const str2 = " 나는 ";
const str3 = "챗GPT야!";

const result = str1.concat(str2, str3);
console.log(result); // "안녕 나는 챗GPT야!"

📌 문자열에서는 + 연산자를 더 많이 사용해!
같은 결과를 + 연산자로도 만들 수 있어.

const result = str1 + str2 + str3;
console.log(result); // "안녕 나는 챗GPT야!"

---

3️⃣ 배열 concat() vs 전개 연산자 (...)

배열을 합칠 때 **전개 연산자(...)**도 많이 사용돼. 둘의 차이를 비교해 볼게!

 

✅ concat() 사용

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

const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

 

✅ 전개 연산자(...) 사용

const result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

👉 concat()과 동일한 결과가 나오지만, 전개 연산자(...)가 더 직관적이고 가독성이 좋아서 최신 코드에서는 더 많이 사용돼!

하지만 concat()은 매개변수에 여러 개의 배열을 넣을 수 있고, 원본 데이터를 그대로 유지하는 장점

---

4️⃣ 정리

✅ concat()은 배열과 문자열을 합칠 때 사용하는 메서드
✅ 원본 배열(문자열)은 변경되지 않고, 새로운 배열(문자열)을 반환
✅ 여러 개의 배열 또는 값도 함께 합칠 수 있음
✅ 배열을 펼치려면 flat() 또는 ... 전개 연산자를 사용할 것
✅ 배열 합치기는 concat()보다 전개 연산자(...)가 더 직관적

 

 

 

*** 위 포스팅은 챗GPT 답변을 기반으로 작성되었습니다.