13-5. Array 오브젝트(ES3 기준) / 엘리먼트 삽입, 첨부

unshift()

• 0번 인덱스에 파라미터 값 삽입

• 배열에 있던 엘리먼트는 뒤로 이동

    var value = [1, 2];
    value.unshift(345, 67);
    console.log(value); // [345, 67, 1, 2]
  

[item1 [, item2 [, ...]]]opt

위 모습을 보십시오.
document를 볼 때 많이 볼 수 있는 모습입니다.
파라미터 작성여부는 선택(option)입니다.
파라미터를 하나만 작성할 땐 item1만 작성하고 두개 이상을 작성할 땐 , item2 이렇게 콤마를 작성한다는 것입니다.

push()

• 배열 끝에 파라미터 값을 첨부

    var value = [1, 2];
    value.push(345, 67);
    console.log(value); // [1, 2, 345, 67]
  

push는 이럴 때 많이 사용합니다.
서버에서 데이터를 받아서 위의 테이블처럼 행과 열의 형태로 만들려고 할 때

100개의 데이터
100개의 데이터를 반복해서 html에 넣습니다.
그럼 html은 100번을 렌더링해야됩니다.

100번 insert -> 100번 렌더링

이것은 좀 비효율적입니다.

서버에서 받은 데이터를 문자열로 html을 만들면 됩니다.
-gt; 100개를 push로 배열에다가 집어넣는 것입니다.
나중에 배열 전체를 읽어서 문자열로 정리하는 겁니다.
그런 다음에 한번에 html로 보내면 브라우저는 한번만 랜더링하겠죠?
그러면 아무래도 속도를 좀 더 빠르게, 그리고 효율적으로 개선시킬 수 있습니다.

ES3에서는 이런 문제가 있었습니다.
문자열을 연결할 때 + 로 연결하죠? += 이걸로도 연결하죠?
이렇게 연결하는 것보다 push해서 문자열을 쭉 배열에 넣고난 다음에 이를 join 메소드로 연결하는 것이 속도가 더 빨랐습니다.

배열까지 사용해서 연결하는데 이게 더 빨라? 라는 생각이 드실수도 있습니다.
그런데 ES3에서는 +로 문자열을 연결하는 것이 느렸습니다.

ES6에서는 템플릿을 많이 씁니다.
템플릿은 값을 변수로 연결할 수 있습니다.
템플릿이 한줄만 있으면 data가 한개던 몇백줄이던 되던 상관 없습니다.
템플릿에 연결만 하면 되기 때문입니다.
이 템플릿으로 한번만 인써트 시키면 됩니다.

지금 단계에선 아직 DOM을 안다뤘기 때문에 말하기 좀 그렇습니다만, 대략적으로 이런 개념이 있다고 보시면 되겠습니다.
테이블 형태로 데이터를 작성할 땐, push / join을 많이 쓴다더라. 이정도로만 이해하셔도 될거 같습니다.

concat()

• 배열에 파라미터 값을 연결하여 반환

    var value = [1, 2];
    var result = value.concat(3, 4);
    console.log(result); // [1, 2, 3, 4]
  

• 파라미터가 1차원 배열이면 값만 반영

    var value = [1, 2];
    var result = value.concat([3], [4]);
    console.log(result); // [1, 2, 3, 4]