ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [JavaScript] 자바스크립트 concat 메서드 이해하기
    프로그래밍 이야기/JavaScript 공부 2020. 7. 20. 02:33

    conat 메서드란?

    concat 메서드는 파라미터로 전달되는 값들을 기존 배열에 합쳐서 새로운 배열을 반환해주는 배열의 메서드들 중 하나이다.

    한 가지 특별한 점은, 만약 파라미터로 전달되는 인자 값이 배열일 경우에는 해당 배열이 펼쳐지면서 기존 배열에 합쳐진다.

    참고로, concat은 concatenation이라는 단어의 줄임말이라고 한다.

     

    문법

    concat 메서드는 배열에 사용되고, 파라미터로 어떤 값이든 전달할 수 있다.

    const myArr = [1, 2, 3];
    
    // arr.concat(value1, value2, ...)
    console.log(myArr.concat(4, 5)); // [1, 2, 3, 4, 5]
    console.log(myArr.concat('육', '칠')); // [1, 2, 3, '육', '칠']
    console.log(myArr.concat(true, false)); // [1, 2, 3, true, false]
    console.log(myArr.concat({name: 'bigtop'})); // [1, 2, 3, {...}]

    이렇게 보면 push와 크게 다를 게 없어 보이지만, 일단 가장 큰 차이점은, push는 기존 배열의 마지막 요소로 값을 추가하는 반면, concat메서드는 slice메서드처럼 기존 배열에 아무런 영향을 주지 않는다는 것이다.

    만약 파라미터에 아무런 값도 전달하지 않을 경우에는 이 부분도 slice와 마찬가지로 기존의 배열 전체가 그대로 반환된다.

    const myArr = [1, 2, 3];
    
    // arr.concat(value1, value2, ...)
    console.log(myArr.concat()); // [1, 2, 3]

    사실 concat메서드는 배열에 값을 추가하는 용도보다는 주로 배열과 배열을 합치는데 사용된다. 

    앞서 concat메서드의 정의에서도 살펴볼 수 있듯이 파라미터로 배열이 전달될 경우에는 전달된 배열을 다 펼쳐서 합친다는 특징이 있다.

    앞선 예시코드에서도 볼 수 있듯 이런 펼쳐짐(?) 현상은, 인자 값이 배열인 경우에만 해당되고 객체인 경우에는 펼쳐지지 않고 그냥 객체가 추가되니 오해하지 말아야할 부분이다.

    const myArr1 = [1, 2];
    const myArr2 = [3, 4];
    
    console.log(myArr1.concat(myArr2)); // [1, 2, 3, 4]
    console.log(myArr1); // [1, 2]
    console.log(myArr2); // [3, 4]

    위 코드의 마지막 두 줄에서 볼 수 있듯, concat메서드는 기존의 배열에는 아무런 영향도 미치지 않는다.

     

    그리고 만약 여러 배열을 합치는 경우에는 그냥 파라미터로 계속해서 이어서 값을 전달해주면 된다.

    단, 순서가 중요한 경우에는 가장 앞쪽으로 기준이 될 배열에 concat메서드를 활용해야 한다.

    const myArr1 = [5, 6];
    const myArr2 = [1, 2];
    const myArr3 = [3, 4];
    
    const sumArr = myArr2.concat(myArr3, myArr1);
    console.log(sumArr); // [1, 2, 3, 4, 5, 6]

     

    주의사항

    하지만, 한 가지 주의해야될 부분은 인자값이 배열인 경우에도 한번만 펼칠 뿐, 중첩된 배열을 모두 펼치진 않는다.

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

     

    문자열에도!!

    concat 메서드는 문자열에도 사용될 수 있다.

    const str1 = 'Big';
    const str2 = 'Top';
    
    console.log(str1.concat(' ', str2)); // "Big Top"
    
    console.log(str2.concat(', ', str1)); // "Top, Big"

    단, 결과가 모두 문자열로 형 변환돼서 반환되고

    - 인자가 배열인 경우에는 쉼표로 값들이 구분되어 문자열로 합쳐진 결과가,

    - 인자가 객체가 경우에는 [object Object]라는 문자열이 이어 붙는다.

    const str1 = 'Big';
    const str2 = 'Top';
    
    console.log(str1.concat([1, 2, 3])); // Big1,2,3
    console.log(str2.concat({name: 'Bigtop'})); // Top[object Object]

     

    댓글

Designed by BigTop.