자바스크립트(JavaScript) - concat(), join() 배열의 내장함수 #6 [엄탱 개발일지]

안녕하세요. 숯 같은 개발자 엄탱입니다!

여러분 모두 오늘 하루 고생 많으셨습니다 :)

제가 티스토리에 글을 올리는 이유는 여러 가지 이유가 있겠지만
가장 중요한 건 제 티스토리는 공부의, 공부에 의한, 공부를 위한 사람들을 위한 장소입니다 :)

여러분 모두 파이팅입니다!!

자 그럼 시작하겠습니다!

시간 없으신 분들께서는 아래 순서대로만 보셔도 돼요!

간단 한 줄 정리
사용법
주의사항(concat) - 이 부분 정말 중요하다고 생각해요.

concat, join 간단 한 줄 정리

concat(): 원본 배열 변경 없이, 배열이나 값들을 기존 배열에 합쳐 새배열을 반환합니다.
join(): 원본 배열 변경없이, 배열의 모든 요소를 연결해 하나의 문자열로 만들어 반환합니다.

하하 오늘은 간단 한 줄 정리가 간단히 정리되었네요!!

concat() 정의

사전적 정의

concatenate의 약어로 concatenate는 사슬같이 잇다, 연쇄시키다 라는 뜻을 갖고 있습니다.

사전적 의미로 보아 concat은 무엇인가 서로 이어주는 역할을 하는 것 같습니다!

MDN 사이트 정의

MDN
concat() 함수는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
1. 기존 배열을 변경하지 않습니다.
2. 추가된 새로운 배열을 반환합니다.

Array.prototype.concat() - JavaScript | MDN

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.

developer.mozilla.org

위의 내용을 보시면 사전적 의미에서 이어준다는 concat은 기존 배열을 변경하지 않고 기존 배열들을 합쳐 하나의 배열로 이어주는 역할을 합니다!

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); // ["a", "b", "c", "d", "e", "f"]

console.log(array1); // ["a", "b", "c"]
console.log(array2); // ["d", "e", "f"]

위의 예제를 확인해 보시면 array1과 array2를 서로 합쳐서 array3이라는 하나의 배열로 반환되는 것을 볼 수 있고 array1, array2 둘 다 데이터가 변경되지 않은 것을 볼 수 있습니다!

concat 사용법

다음은 concat 구문입니다.

array.concat([value1[, value2[, ...[, valueN]]]])

필요한 매개변수

배열 또는 값
만약 value1 ~ valueN 인자를 생략하면 기존 배열의 얕은 복사본을 반환

MDN
concat은 메서드를 호출한 배열 뒤에 각 인수를 순서대로 붙여 새로운 배열을 만듭니다. 인수가 배열이면 그 구성요소가 순서대로 붙고, 배열이 아니면 인수 자체가 붙습니다. 중첩 배열 내부로 재귀하지 않습니다. concat은 this나 인수로 넘겨진 배열의 내용을 바꾸지 않고, 대신 주어진 배열을 합친 뒤 그 얕은 사본을 반환합니다.

사용법은 어려운 게 없으니 간략히 예제들만 보여드리고 주의사항으로 넘어가겠습니다!

배열 이어 붙이기

배열에 값 이어 붙이기

배열에 객체 이어 붙이기

concat 주의사항 (중요)

저는 이 부분이 중요하다고 생각하는데, 많은 블로그에서 이 내용에 대해서는 다루질 않더라고요!

우선 MDN 사이트에서 설명을 봐볼까요??

MDN
concat에서 반환 값 새 배열에는 원본 배열의 요소를 다음과 같은 방법으로 복사합니다.
실제 객체가 아닌 객체 참조: concat은 새 배열에 참조를 복사합니다.
원본 배열과 새 배열에서 같은 객체를 가리키게 됩니다.
즉, 참조하는 객체를 수정하면 그 내용이 새 배열과 원본 배열 둘 다에서 나타납니다.
문자열, 숫자, 불리언 등 자료형(String, Number, Boolean 객체 아님): concat은 새 배열에 문자열과 수의 값을 복사합니다.

참고
배열이나 값을 이어 붙여도 원본은 변하지 않으며, 새로운 배열이나 원본 배열을 조작해도 서로 영향을 받지 않습니다.

MDN 사이트에서 정말 잘 설명이 되어있습니다.
정리하자면, concat 사용 시 원본에 변형이 없지만, 원본 배열의 요소를 얕은 복사(참조 복사)를 하여 새배 열에 넣어서 반환하는 것입니다.
그렇기 때문에 추후에 새 배열 혹은 원본 배열에서 공통으로 갖고 있는 참조하는 객체를 수정하면 두 배열 모두 데이터가 변경된다는 뜻입니다!
단, 기본형 변수는 값을 복사하기 때문에 제외입니다.

이해가 안돼도 좋습니다!! 예제를 보시면 이해가 될 거예요!

위의 예제를 간단히 정리하겠습니다.

alpha4를 얕은 복사 하여 result4에 할당합니다.
alpha4를 확인해보니 변화가 없습니다. (원본 배열 유지)
result4에서 두 배열이 공통으로 갖고 있는 참조형 값을 수정했습니다. (새로 할당이 아닌 수정입니다.)
result4에서 두 배열이 공통으로 갖고 있는 기본형 값을 수정했습니다.
alpha4에서 기본형 값은 변경이 안되지만, 참조형 타입의 데이터는 값이 변경되었습니다.

혹시 이해가 되실까요? 잘 이해하셨겠지만!! 만약 어려우신 분들이 있으시다면 댓글 남겨주시면 답변드리겠습니다 :)

더 자세한 내용은 slice, splice 편에서 slice 주의사항에 작성했으니 참고해 주시길 바라겠습니다. -> slice, splice 편 보러 가기