concat()은 자바스크립트의 배열(Array)의 메소드들 하나이다.
우선 MDN의 정의를 한번 보자.
concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
concat은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다.
인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다.
concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다. 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.
- 실제 객체가 아닌 객체 참조: concat은 새 배열에 참조를 복사합니다. 원본 배열과 새 배열에서 같은 객체를 가리키게 됩니다. 즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타납니다.
- 문자열, 숫자, 불리언 등 자료형(String, Number, Boolean 객체 아님): concat은 새 배열에 문자열과 수의 값을 복사합니다.
보다시피 복잡하다.
여기서 중요한 관점은 "기존 배열에 합쳐서 새 배열을 만든다.", "새 배열을 만들 때는 얕은 복사가 이뤄진다." 이다.
얕은 복사는 원본배열의 데이터를 유지하면서 새로운 데이터를 만들어 결과물을 내는 것을 말한다.
쉽게 말하면
"중심이 되는 배열(데이터)을 복사해서 내가 원하는 다른 배열(데이터)과 결합한다." 이다.
MDN에서 사용하는 기본 사용법을 한번 보자.
/* 배열 2개 붙이기 */
const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];
alpha.concat(numeric);
// 결과: ['a', 'b', 'c', 1, 2, 3]위 코드에서 중요한건 alpha배열은 문자열 배열이고, numeric배열은 숫자형 배열이다.
이것은 문자열과 숫자열, 불리언 형태의 데이터들도 합칠 수 있다는 이야기이다.
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];
num1.concat(num2, num3);
// 결과: [1, 2, 3, 4, 5, 6, 7, 8, 9]위 코드는 배열 3개를 이어 붙힌 것이다.
const alpha = ['a', 'b', 'c'];
alpha.concat(1, [2, 3]);
// 결과: ['a', 'b', 'c', 1, 2, 3]
자, 여기서 이제 규칙성을 발견 했을 것이다.
변수 이름을 한글로 써서 쉽게 알아보자.
const 붙힘을당하는배열 = [1, 2, 3, 4];
const 붙혀야하는배열01 = [
{
고윳값:1, 이름:"홍길동", 나이: 20
},
{
고윳값:2, 이름:"변기태", 나이: 22
},
];
const 붙혀야하는배열02 = {"가", "나", "다"}
const 붙혀야하는배열03 = [true, false]
let 확인01 = 붙힘을당하는배열.concat(붙혀야하는배열01, 붙혀야하는배열02 ,붙혀야하는배열03)
console.log(확인01)
/*
확인01의 결과값
[1, 2, 3, 4, {고윳값: 1, 이름: '홍길동', 나이: 20}, {고윳값: 2, 이름: '변기태', 나이: 22}, "가", "나", "다", true, false]
*/
let 확인02 = 붙힘을당하는배열.concat(붙혀야하는배열02, 붙혀야하는배열03 ,붙혀야하는배열01)
console.log(확인02)
/*
확인02의 결과값
[1, 2, 3, 4, "가", "나", "다", true, false, {고윳값: 1, 이름: '홍길동', 나이: 20}, {고윳값: 2, 이름: '변기태', 나이: 22}]
*/위 내용을 확인해보면 객체, 불리언, 문자열, 숫자열 등 다양한 것들을 붙힐 수 있으면서,
순서까지 설정을 할 수 있다.
concat()은 인자를 다르게 부여하면 다른 형식의 메소드가 된다.
배열 사이에 특정한 기호나 띄어쓰기를 규칙적으로 줄 수 있다.
말보다는 예시를 보는게 더 빠를 듯 하다.
const 원본01 = "안녕?"
const 글자01 = "내"
const 글자02 = "블로그에"
const 글자03 = "온"
const 글자04 = "것을"
const 글자05 = "환영해!!"
let 확인03 = 원본01.concat(" ", 글자01, " ", 글자02, " ", 글자03, " ", 글자04, " ", 글자05)
console.log(확인03)
// 안녕? 내 블로그에 온 것을 환영해!!위 코드와 같이 띄어쓰기를 넣는 것이 가능하다.
예를 들기 위해 과장되게 사용을 해보았다.
위에 예시를 이용하여 외국인들의 이름을 성, 중간이름, 마지막이름 값을 받아 띄어쓰기를 하는 방식으로 사용이 가능 할 듯 하다.
다음은 concat()의 알고리즘 문제를 한번 보자.
문제는 제주코딩베이스캠프 9번 문제이다.
문제
데이터
var year = '2019';
var month = '04';
var day = '26';
var hour = '11';
var minute = '34';
var second = '27';
var result = //빈칸을 채워주세요
console.log(result);
출력
2019/04/26 11:34:27
문제 답안
var year = '2019';
var month = '04';
var day = '26';
var hour = '11';
var minute = '34';
var second = '27';
var result = year.concat("/", month, "/", day, " ", hour, ":", minute, ":", second)
console.log(result);
출처
제주코딩베이스캠프 Code Festival: JavaScript 100제 - 인프런 | 강의
이 강좌를 통해 문법을 보다 명확하게 이해하시고, 문제 풀이에 대한 자신감을 얻으시길 바랍니다., [사진] [사진] [사진] [사진] 제주코딩베이스캠프의 JS 100제 런칭 소식을 알려드립
www.inflearn.com
이어서 퍼블리싱에 활용하는 방법을 구상해보려 했으나....생각이 나지를 않는다 ㅠㅠ
혹, 이 글을 본 쌉고수 퍼블리셔가 계시면 댓글로 알려주시면 진심으로 감사합니다.