[JavaScript/DeepDive]27.배열(2)

• [27.8] 배열 메서드
• 배열 메서드는 결과물을 반환하는 패턴이 두 가지이므로 주의가 필요하다.
• 배열에는 원본 배열(배열 메서드)를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.
• const  arr = [1];
  
  // push 메서드는 원본 배열(arr)을 직접 변경한다.
  arr.push(2);
  console.log(arr); // [1,2]
  
  // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다.
  const result = arr.concat(3);
  console.log(arr); // [1,2]
  console.log(result); // [1,2,3]
• ES5부터 도입된 배열 메서드는 대부분 원본 배열을 직접 변경하지 않지만 초창기 배열 메서드는 원본 배열을 직접 변경하는 경우가 많다.
  • 원본 배열을 직접 변경하는 메서드는 외부 상태를 직접 변경하는 부수 효과가 있으므로 사용할 때 주의해야 한다.
• Array.isArray
  • Array.isArray는 Array 생성자 함수의 정적 메서드다.
  • Array.isArray 메서드는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.
• Array.prototype.indexOf
  • indexOf 메서드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.
    • 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스를 반환한다.
    • 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.
      • const arr = [1, 2, 2, 3];
        
        // 배열 arr에서 요소 2를 검색하여 첫 번째로 검색된 요소의 인덱스를 반환한다.
        arr.indexOf(2); // -> 1
        // 배열 arr에 요소 4가 없으므로 -1을 반환한다.
        arr.indexOf(4); // -> -1
        // 두번째 인수는 검색을 시작할 인덱스다. 두 번째 인수를 생략하면 처음부터 검색한다.
        arr. indexOf(2, 2) // -> 2
• Array.prototype.push
  • push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
  • push 메서드는 원본 배열을 직접 변경하는 부수 효과가 있다.
    • const arr = [1, 2];
      
      // 인수로 전달받은 모든 값을 원본 배열 arr의 마지막 요소로 추가하고 변경된 length 값을 반환한다.
      let result = arr.push(3, 4);
      console.log(result); // 4
      
      // push 메서드는 원본 배열을 직접 변경한다.
      console.log(arr); // [1, 2, 3, 4]
• Array.prototype.pop
  • pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다. 
  • pop 메서드는 원본 배열을 직접 변경한다.
  • pop 메서드와 push 메서드를 사용하면 스택을 쉽게 구현할 수 있다.
• Array.prototype.unshift
  • unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
  • unshift 메서드는 원본 배열을 직접 변경한다.
• Array.prototype.shift
  • shift 메서드는 원본 배열에서 첫 번재 요소를 제거하고 제거한 요소를 반환한다.
  • shift 메서드는 원본 배열을 직접 변경한다.
  • shift 메서드와 push 메서드를 사용하면 큐를 쉽게 구현할 수 있다.
• Array.prototype.concat
  • concat 메서드는 인수로 전달된 값들(배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
  • 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다.
  • push와 unshift 메서드는 concat 메서드로 대체할 수 있다.
    • push와 unshift 메서드는 원본 배열을 직접 변경하지만 concat 메서드는 원본 배열을 변경하지 않고 새로운 배열을 반환한다.
    • 따라서 push와 unshift 메서드를 사용할 경우 원본 배열을 반드시 변수에 저장해 두어야 하며 concat 메서드를 사용할 경우 반환값을 변수에 할당받아야 한다.
• Array.prototype.splice
  • 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 splice 메서드를 사용한다.
  • splice 메서드는 3개의 매개변수가 있으며 원본 배열을 직접 변경한다.
    • const arr = [1, 2, 3, 4];
      
      // 원본 배열의 인덱스 1부터 2개의 요소를 제거하고 그 자리에 새로운 요소 20, 30을 삽입한다.
      const result = arr.splice(1, 2, 20, 30);
      
      // 제거한 요소가 배열로 반환된다.
      console.log(result); // [2, 3]
      // splice 메서드는 원본 배열을 직접 변경한다.
      console.log(arr); // [1, 20, 30, 4]
  • 배열에서 특정 요소를 제거하려면 indexOf 메서드를 통해 특정 요소의 인덱스를 취득한 다음 splice 메서드를 사용한다.
• Array.prototype.slice
  • slice 메서드는 인수로 전달받은 전달된 범위의 요소들을 복사하여 배열로 반환한다.
  • 원본 배열을 변경되지 않는다.
    • const arr = [1, 2, 3];
      
      // arr[0]부터 arr[1] 이전(arr[1] 미포함)까지 복사하여 반환한다.
      arr.slice(0, 1); // -> [1]
      
      // arr[1]부터 arr[2] 이전(arr[2] 미포함)까지 복사하여 반환한다.
      arr.slice(1, 2); // -> [2]
      
      // 원본은 변경되지 않는다.
      console.log(arr); // [1, 2, 3]
  • 생성된 복사본은 얕은 복사를 통해 생성된다.
• Array.prototype.join
  • join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다.
    • 구분자는 생략 가능하며 기본 구분자는 콤마(',')다.
• Array.prototype.reverse
  • reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다.
  • 이때 원본 배열이 변경된다.
  • 반환값은 변경된 배열이다.
• Array.prototype.fill
  • ES6에서 도입된 fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소를 채운다.
  • 이때 원본 배열이 변경된다.
• Array.prototype.includes
  • ES8에서 도입된 icnludeds 메서드는 배열 내에 특정 요소가 포함되어 있는지 확인하여 ture 또는 false를 반환한다.