알고리즘 문제들을 풀다가 배열 메서드들의 종류가 상당히 많다는 것을 알게 되었고, 한번 정리를 해놓으면 도움이 될거라는 생각이 들었다.

• 배열 메서드는 원본 메서드를 변경하는 경우와 원본 배열을 직접 변경하지 않는 메서드들이 있는데, 원본 배열을 직접 변경하는 메서드는 부수효과(Side Effect)가 있으므로 원본 배열을 직접 변경하지 않는 메서드들을 사용하는 것이 좋다.

1. Array.isArray()

• Array.isArray는 Array 생성자 함수의 정적 메서드다.
• Array.isArray 메서드는 전달된 인수가 배열이면 true, 배열이 아니면 false를 반환한다.

Array.isArray([]);      //true
Array.isArray([1, 2]);  //true
Array.isArray(new Array());      //true
Array.isArray([name = 1, key = 2]); //true


Array.isArray();        //false
Array.isArray('Hi');    //false
Array.isArray(null);    //false
Array.isArray(undefined);//false
Array.isArray(1);       //false

2. Array.prototype.indexOf()

• indexOf메서드는 원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다.
• 원본 배열에 인수로 전달한 요소와 중복되는 요소가 여러 개 있다면 첫 번째로 검색된 요소의 인덱스를 반환한다.
• 원본 배열에 인수로 전달한 요소가 존재하지 않으면 -1을 반환한다.

  • indexOf 메서드는 배열에 특정 요소가 존재하는지 확인할 때 유용하다.

const fruits = ['apple', 'orange', 'grape'];

console.log(fruits.indexOf('grape')); // 2 인덱스 2에 존재
console.log(fruits.indexOf('banana')); // 존재하지 않으므로 -1 반환

3. Array.prototype.includes()

• indexOf 메서드와 비슷하지만, includes 메서드를 사용하면 가독성이 더 좋다.
• includes 메서드는 true 와 false를 반환한다.

const fruits = ['apple', 'orange', 'grape'];

console.log(fruits.includes('grape')); // true
console.log(fruits.includes('banana')); // false

4. Array.prototype.push()

• push 메서드는 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고, 변경된 length 프로퍼티 값을 반환한다.
• push 메서드는 원본 배열을 직접 변경한다. (부수효과 존재)
• push 메서드는 성능면에서 좋지 않기때문에, 스프레드 문법을 사용하는 것이 좋다.

const arr = [1, 2, 3];

console.log(arr.push(4)); // 4
console.log(arr); // [1, 2, 3, 4];

const arr = [1, 2, 3];

const newArr = [...arr, 4];

console.log(newArr.length); //4
console.log(newArr); // [1, 2, 3, 4];
console.log(arr); // [1, 2, 3];

5. Array.prototype.pop()

• pop 메서드는 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
• 원본 배열이 빈 배열이면, undefined를 반환한다.
• pop메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2, 3];

console.log(arr.pop()); // 3
console.log(arr);       // [1, 2]

6. Array.prototype.unshift()

• unshift 메서드는 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다.
• unshift 메서드는 원본 배열을 직접 변경한다.
• 부수효과가 존재하기 때문에 스프레드 문법을 사용하는 편이 좋다.

const arr = [1, 2, 3];

console.log(arr.unshift(4, 5)); //5
console.log(arr);               // [4, 5, 1, 2, 3]

const arr = [1, 2, 3];

const newArr = [4,5, ...arr];

console.log(arr); // [1, 2, 3]
console.log(newArr); // [4, 5, 1, 2, 3]

7. Array.prototype.shift()

• shift 메서드는 우너본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
• 원본 배열이 빈 배열이면 undefined를 반환한다.
• shift 메서드는 원본 배열을 직접 변경한다.

const arr = [1, 2, 3];

console.log(arr.shift()); // 1
console.log(arr); // [2, 3];

8. Array.prototype.concat()

• concat 메서드는 인수로 전달된 값들 (배열 또는 원시값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
• 인수로 전달한 값이 배열인 경우 배열을 해체하여 새로운 배열의 요소로 추가한다.
• 원본 배열은 변경되지 않는다.

const arr1= [1, 2];
const arr2= [3, 4];

let result = arr1.concat(arr2); // [1, 2, 3, 4]

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

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

//원본 배열은 변경되지 않는다.
console.log(arr1) //[1, 2]

• concat 메서드는 ES6 스프레드 문법으로 대체할 수 있다.

const arr1 = [1, 2];
const arr2 = [3, 4];

let result = [...arr1, ...arr2];

console.log(result); //[1, 2, 3, 4]

- 결론적으로 push/unshift 메서드와 concat 메서드를 사용하는 대신 ES6의 스프레드 문법을 일관성 있게 사용하는 것을 권장한다.

9. Array.prototype.splice()

• splice 메서드는 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우에 사용한다.
• splice 메서드는 총 3개의 매개변수가 있으며, 원본 배열을 직접 변경한다.
• splice(원본 배열의 요소를 제거하기 시작할 인덱스, start부터 제거할 인덱스 개수, 제거한 위치에 삽입할 요소들의 목록)

const arr = [1, 2, 3, 4];


//원본 배열의 인덱스 1부터 2개의 요소를 제거하고, 그 자리에 새로운 요소 20, 30을 삽입한다.
const result = arr.splice(1, 2, 30, 40);

console.log(result); // [2, 3] 제거한 요소가 반환된다.
console.log(arr); // [1, 30, 40, 4] splice 메서드는 원본 배열을 직접 변경한다.

10. Array.prototype.slice()

• slice 메서드는 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.
• 원본 배열은 변경되지 않는다. (splice 메서드는 원본 배열을 변경한다)
• slice 메서드는 2개의 매개변수를 갖는다.
• slice(복사를 시작할 인덱스, 복사를 종료할 인덱스(생략가능))

const arr = [1, 2, 3, 4];

//arr[0] 부터 arr[1](arr[1] 미포함)이전까지 복사하여 반환한다.
let result = arr.slice(0, 1);

console.log(result) // [1]

result = arr.slice(1, 2);

console.log(result); // [2]

console.log(arr); // [1, 2, 3, 4]

11. Array.prototype.join()

• join 메서드는 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다.
• 구분자는 생략 가능하며 기본 구분자는 콤마(',')다.

const arr = [1, 2, 3, 4];

let result = arr.join();

console.log(result); // 1, 2, 3, 4

result = arr.join('');

console.log(result); // 1234

result = arr.join(':');

console.log(result); // 1:2:3:4

12. Array.prototype.reverse()

• reverse 메서드는 원본 배열의 순서를 반대로 뒤집는다.
• reverse 메서드는 원본 배열이 변경 된다.
• 반환값은 변경된 배열이다.

const arr = [1, 2, 3, 4];

let result = arr.reverse();

console.log(result); // [4, 3, 2, 1]
console.log(arr); // [4, 3, 2, 1]

13. Array.prototype.fill()

• fill 메서드는 인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다.
• 이때 원본 배열이 변경된다.

const arr = [1, 2, 3, 4, 5];

let result = arr.fill(1);

console.log(result); // [1, 1, 1, 1, 1]

result = arr.fill(0, 1); // 인수로 전달받은 값 0을 인덱스 1부터 끝까지 채운다.

console.log(result); // [1, 0, 0, 0, 0]

result = arr.fill(1, 1, 3);

console.log(result); // [1, 1, 1, 0, 0], fill 메서드는 원본 배열을 직접 변경한다.

• fill 메서드를 사용하면 배열을 생성하면서 특정 값으로 요소를 채울 수 있다.

const arr = new Array(12);

console.log(arr); // [ <12 empty items>]

const result = arr.fill(0); 

console.log(result); // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

14. Array.prototype.flat()

• flat 메서드는 인수로 전달한 깊이만큼 재귀적으로 배열을 평탄화 한다.

const arr = [1, [2, 3, 4, 5]];

let result = arr.flat();

console.log(result) // [1, 2, 3, 4, 5]

result = arr.flat(1) // 깊이 값의 기본값은 1이다. 

console.log(result); // [1, 2, 3, 4,5]

• 평탄화 할 깊이값을 생략할 경우, 기본 값은 1이고, 인수로 Infinity를 전달하면 중첩 배열 모두를 평탄화한다.

const arr = [1,[2, [3, [4]]]];

console.log(arr.flat(2)); // [ 1, 2, 3, [ 4 ]]

console.log(arr.flat(Infinity)); // [1, 2, 3, 4]

15. Array.of()

• Array.of 메서드는 전달된 인수를 요소로 갖는 배열을 생성한다.
• Array.of 는 Array 생성자 함수와 다르게 전달된 인수가 1개이고 숫자이더라도 인수를 요소로 갖는 배열을 생성한다.

console.log(Array.of(1)); // [1]
console.log(Array.of(1, 2, 3)); // [1, 2, 3]
console.log(Array.of('String')); // ['String']

16. Array.from()

• Array.from 메서드는 유사 배열 객체 또는 이러터블 객체를 인수로 전달받아 배열로 변환 하여 반환한다.

console.log(Array.from({length : 2, 0 : 'a', 1 : 'b'})); // ['a', 'b']
console.log(Array.from('Hello')); // [ 'H', 'e', 'l', 'l', 'o' ]

---

- 배열 고차 함수 정리

고차 함수는 함수를 인수로 전달받거나 함수를 반환하는 함수를 말한다.
자바스크립트는 함수형 프로그래밍 언어로서 조건문과 반복문을 제거하여 복잡성을 해결하고 변수의 사용을 억제하여 상태 변경을 피하려는 언어이다. 자바스크립트는 고차 함수를 다수 지원하는데, 그 중에서도 배열은 매우 유용한 고차 함수를 지원한다.

1. Array.prototype.sort()

• sort 메서드는 배열의 요소를 정렬한다. 기본적으로 오름차순으로 요소를 정렬한다.
• sort 메서드는 원본 배열을 직접 변경하며, 정렬된 배열을 반환한다.

const fruits = ['Banana', 'Orange', 'Apple'];

fruits.sort();

console.log(fruits); // [ 'Apple', 'Banana', 'Orange' ]

• 한글 문자열인 요소도 오름차순으로 정렬된다.

const fruits = ['바나나', '오렌지', '사과'];

fruits.sort();

console.log(fruits); // [ '바나나', '사과', '오렌지' ]

• sort메서드는 기본적으로 오름차순으로 요소를 정렬한다. 따라서 내림차순으로 요소를 정렬하고 싶다면 sort 메서드 사용 후, reverse 메서드를 사용하여 요소의 순서를 뒤집는다.

const fruits = ['Banana', 'Orange', 'Apple'];

fruits.sort();

console.log(fruits); // [ 'Apple', 'Banana', 'Orange' ]

fruits.reverse();

console.log(fruits); // [ 'Orange', 'Banana', 'Apple' ]

• 숫자 요소로 이루어진 배열을 정렬할 때는 주의가 필요하다.

const numbers = [40, 100, 10, 5, 2, 25, 11, 3];

numbers.sort();

// 제대로 잘 정렬이 되지 않는다.

console.log(numbers); // [10, 100, 11, 2, 25, 3, 40, 5]

• 배열의 요소가 숫자 타입이라면, 배열의 요소들을 일시적으로 문자열로 변환 후, 유니코드 코드 포인트의 순서를 기준으로 정렬하기 때문에, 숫자대로 잘 정렬이 되지 않는다.
• 이럴 때, sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야한다.

const numbers = [40, 100, 10, 5, 2, 25, 11, 3];

// 오름차순 정리

numbers.sort((a, b) => {return a - b});

console.log(numbers); // [2, 3, 5, 10, 11, 25, 40, 100]

// 내림차순 정리 

numbers.sort((a, b) => {return b - a });

console.log(numbers); // [100, 40, 25, 11, 10, 5, 3, 2]

2. Array.prototype.forEach()

• forEach 메서드는 for문을 대체할 수 있는 고차함수로서, 자신의 내부에서 반복문을 실행한다.
• forEach 메서드는 반복문을 추상화한 고차 함수로서 내부에서 반복문을 통해 자신을 호출한 배열을 순회 하면서 수행해야 할 처리를 콜백 함수로 전달받아 호출한다.
• forEach 메서드는 중간에 break문이나 continue문을 사용할 수 없다. 즉 배열의 모든 요소를 순회하며 중간에 중단할 수 없다.
• forEach 메서드는 원본 배열을 변경하지 않는다.

const numbers = [1, 2, 3, 4, 5];

const arr = [];

numbers.forEach((nums) => {
    return arr.push(nums ** 2);
})

console.log(arr); // [ 1, 4, 9, 16, 25 ]

• forEach 메서드의 콜백함수는 forEach 메서드를 호출한 배열의 요소값과 인덱스, forEach 메서드를 호출한 배열 자체, 즉 this를 순차적으로 전달 받을 수 있다.
  Array.forEach((item, index, array) => {})
• forEach 메서드의 반환값은 언제나 undefined다 .

const result = [1, 2, 3].forEach((nums) => {return nums});

console.log(result); // undefined

3. Array.prototype.map()

• map메서드는 자신이 호출한 배열의 모든 요소를 순회하면, 인수로 전달받은 콜백 함수를 반복 호출한다.
• 그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
• 원본 배열은 변경되지 않는다.

const numbers = [1, 4, 9];

const roots = numbers.map((nums) => {
        return Math.sqrt(nums);
})

console.log(roots); // [1, 2, 3]
console.log(numbers); // [1, 4, 9]

- forEach 메서드와 map 메서드의 차이점은 forEach 메서드는 단순히 반복문을 대체하기 위한 고차 함수고, map 메서드는 요소값을 다른 값으로 매핑한 새로운 배열을 생성하기 위한 고차 함수다. forEach 메서드는 언제나 undefined를 반환하고, map 메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 차이가 있다.

• forEach문과 마찬가지로 map 메서드의 콜백 함수는 map 메서드를 호출한 배열의 요소값과 인덱스, map 메서드를 호출한 배열 자체, 즉 this를 순차적으로 전달 받을 수 있다.
  Array.map((item, index, array) => {})

4. Array.prototype.filter()

• filter 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
• 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
• filter 메서드를 사용한 원본 배열은 변경되지 않는다.

const numbers = [1, 2, 3, 4, 5];

const odds = numbers.filter((item) => {return item % 2;})

console.log(odds); // [ 1, 3, 5 ]

• filter 메서드는 콜백 함수의 반환값이 true인 요소만 추출한 새로운 배열을 반환한다.
• forEach, map 메서드와 마찬가지로 filter 메서드는 filter 메서드를 호출한 배열의 요소값, 인덱스, 호출한 배열(this)를 순차적으로 전달한다.

5. Array.prototype.reduce()

reduce는 내용이 많아 따로 게시글로 빼놓았습니다!

6. Array.prototype.some()

• some 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출한다.
• 이때 some 메서드는 콜백 함수의 반환값이 단 한 번이라도 참이면 true, 모두 거짓이면 false를 반환한다.
• 콜백함수 안에 정의한 조건을 만족하는 요소가 1개 이상 존재하는지 확인하여 그 결과를 boolean 타입으로 반환한다.
• some 메서드를 호출한 배열이 빈 배열일 경우 언제나 false를 반환한다.

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers.some((item) => {return item > 10});

console.log(result); // false

---------------------------------------------------------------------------------------------------

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const result = numbers.some((item) => {return item >= 10});

console.log(result); // true

---------------------------------------------------------------------------------------------------
  
const numbers = [];

const result = numbers.some((item) => {return item});

console.log(result); // false

7. Array.prototype.every()

• every 메서드는 some 메서드와 반대로 콜백 함수의 반환값이 모두 참이면 true, 단 한번이라도 거짓이라면 false를 반환한다.
• 즉 배열의 모든 요소가 콜백 함수를 통해 정의한 조건을 모두 만족하는지 확인하여 boolean 타입으로 반환한다.
• 호출한 배열이 빈 배열이라면 언제나 true를 반환한다.

const numbers = [1, 2, 3, 4, 5];

const result = numbers.every((item) => { return item > 0 });

console.log(result) // true

---------------------------------------------------------------------------------------------------
  
const numbers = [1, 2, 3, 4, 5];

const result = numbers.every((item) => { return item > 1 });

console.log(result) // false

---------------------------------------------------------------------------------------------------

const numbers = [];

const result = numbers.every((item) => { return item });

console.log(result) // true

8. Array.prototype.find()

• find 메서드는 자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true인 첫 번째 요소를 반환한다.
• 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 undefined를 반환한다.

  - filter 메서드는 콜백 함수의 호출 결과가 true 인 요소만 추출한 새로운 배열을 반환한다. 따라서 filter 메서드의 반환값은 언제나 배열이다.

  하지만 find 메서드는 콜백 함수의 반환값이 true인 첫 번째 요소를 반환하므로 find의 결과값은 배열이 아닌 요소다.

[1, 2, 2, 3].filter((item) => item === 2 ); // [2, 2] 배열 반환

[1, 2, 2, 3].find((item) => item === 2); // 2 요소 반환

9. Array.prototype.findIndex()

• findIndex 메서드는 자신을 호출한 배열의 요소를 순회하며 전달된 콜백함수를 호출하여 반환값이 true인 첫번째 요소의 인덱스를 반환한다.
• true 인 요소가 존재하지 않는다면 -1 을 반환한다.

const users = [
  {id : 1, name : 'Lee'},
  {id : 2, name : ' Kim'},
  {id : 3, name : 'Choi'},
  {id : 4, name : 'Park'}
];

users.findIndex((users) => users.id === 2); // 1

users.findIndex((users) => users.name === 'Park'); // 3

users.findIndex((users) => users.id === 5); // -1

10. Array.prototype.flatMap()

• flatMap 메서드는 map 메서드를 통해 생성된 새로운 배열을 평탄화 한다. map 메서드와 flat 메서드를 순차적으로 실행하는 효과가 있다.

• flatMap 메서드는 평탄화 깊이를 지정할 수는 없고 1단계만 가능하다. 깊이를 지정하려면 map 과 flat 메서드를 따로따로 써주어야 한다.

• (밑에 예시처럼 split 메서드와 함께 써주면 좋을거 같다..!)

const arr = ['hello', 'world'];

const result = arr.flatMap((item) => {return item.split('')});

console.log(result); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']