[JavaScript] push() & concat()

오늘은 리액트를 공부하다가 미뤄놓았던 궁금증을 풀어보았다.

📖리액트를 다루는 기술📖의 6장에서 내장함수에 대한 언급이 있었는데, 거기에 concat, filter와 같은 함수가 있었다.

그런데 concat 함수를 찾아보다보니 push함수와 비교가 많이 되길래 같이 공부해보았다.

 

---

이 두 함수들은 배열에 요소를 추가할 때 사용된다. 그럼 그 사이에서 두 함수의 차이는 무엇일까?

먼저, push 함수를 알아보고, concat함수에 대해서 알아보겠다.

왜 두 함수를 같이 비교하는것인가?

그 이유는 두 개의 배열을 하나의 배열로 합칠 때, 일어나는데 하나의 원소를 밀어넣는 push 대신에 concat을 사용하라고 두 함수를 같이 비교하는 것이다. 

이 글은 MDN을 참고하여 작성하였다.

 

push()

push는 기존 배열에 원소를 추가하며 배열의 총 길이를 리턴하는 메소드이다. 

이 메소드는 arr.push([element1[, ...[, elementN]]]) 이 형식처럼 작성해주면된다.

push메소드는 아래 코드와 같이 작동된다.

 

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
//변수 count는 push메소드를 통해서 cows원소가 추가된 배열 animals의 길이를 출력한다.

console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

 

push()메소드는 아래와 같은 세가지 경우에 사용이 된다.

1. 배열에 원소를 추가할 때
2. 두개의 배열을 병합할 때
3. 배열처럼 생긴 객체를 사용할 때 ( Using an object in an array-like fashion) - 유사배열

 

1,2번의 예시코드는 위에 나타나있다. 그러면, 세번째 이유는 무엇일까?

Array.prototype.push가 객체에서도 사용된다는 것이다.

예시코드를 보면서 이해해보자

 

let obj = {
    length: 0,

    addElem: function addElem(elem) {
        // obj.length is automatically incremented
        // every time an element is added.
        [].push.call(this, elem)
    }
}

// Let's add some empty objects just to illustrate.
obj.addElem({})
obj.addElem({})
console.log(obj.length)
// → 2

 

obj가 배열이 아님에도 불구하고, push()메소드가 적용되는 것을 확인할 수 있다.

객체에 배열을 사용하지 않는다.

하지만, 객체에서 call과 Array.prototype.push를 사용하면서 메소드가 배열로 착각하고 실행되도록 하는 것이다. 

(유사배열의 경우엔 원래 배열의 메서드의 사용이 불가능하지만, 배열 프로토타입에서 forEach 메서드를 빌려오면 사용가능하다. -> call, apply)

유사배열과 배열을 구분하기 위해서는 Array.isArray메서드로 확인해볼 수 있다.

나는 이 부분을 공부하면서 유사배열이라는 것을 처음 알게 되었는데, 유사배열과 배열의 차이점은 여기서 더 자세하게 보고 알 수 있었다.

 

여기서 중요하게 기억해야되는 것은 함수의 리턴값이다.

들어가는 변수 : 해당 배열의 끝자리에 넣고싶은 element

리턴값 : push()메소드가 불린 이후의 새로운 길이값을 리턴

 

---

concat()

concat()메소드는 두 개 이상의 배열을 병합할 때 사용되는 메소드이다.

이 메소드는 기존의 배열을 바꾸지 않고, 새로운 배열을 리턴해준다.

기존 배열을 복사한 후 원소를 추가하여 새 배열을 리턴

concat()메소드를 사용해서 두 배열을 합치는 코드는 아래와 같다.

 

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result in ['a', 'b', 'c', 1, 2, 3]

 

여기서 push()와의 차이는 무엇일까?

바로 문자열로 추가되는지, 배열 자체로 추가 되는지가 차이점이다.

아래 코드를 한 번 확인해보자

 

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

//concat을 사용할 때
letters.concat(numbers);
// result in ['a', 'b', 'c', 1, 2, 3]

//push를 사용할 때
letters.push(numbers);
console.log(letters);
// result in ['a', 'b', 'c', [1, 2, 3]]

 

위의 예시를 보면 무슨 차이가 있는지 한 눈에 확인이 되죠?!?!?

 

자, 그러면 다음으로는 배열안에 있는 배열이 있을 때인 중첩구조에는 push나 concat을 했을 때 어떻게 반영이 될지 보겠다.

밑의 예시를 먼저 봐보자.

 

const num1 = [[1]];
const num2 = [2, [3]];

const numbers = num1.concat(num2);

console.log(numbers);
// results in [[1], 2, [3]]

// modify the first element of num1
num1[0].push(4);

console.log(numbers);
// results in [[1, 4], 2, [3]]

 

num1[0].push(4); 이 코드는 num1배열의 0번째 요소에 4를 추가해주라는 명령이다.

따라서, 결과로 원소가 1만 있었던 배열안에 [1,4]로 출력이 되는것을 확인해줄수 있다.

 

---

이렇게 두가지 메소드들을 정리하다보니, push()는 하나의 요소나 아이템들을 하나씩 하나씩 추가해줘야할 때 사용할 것이고, 배열자체를 다룰 때에는 concat()을 쓰는게 더 효율적이라고 생각되었다.

그리고, push()가 리턴해주는 값이 배열의 길이라는 점을 기억해야겠다고 생각했다.

다른 내장함수들도 많이 공부하고 써봐서 더 효율적인 코드를 작성할 수 있도록 해야겠다!🤨😏