[Javascript] 실무에서 가장 자주쓰이는 배열 메서드 (indexOf, forEach, includes, ...)

오늘은 Javascript에서 자주 사용되는 배열 메서드에 대해 살펴볼 것이다.

 

---

1. indexOf

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

 

구문

arr.indexOf(searchElement[, fromIndex])

 

매개변수

searchElement

  배열에서 찾을 요소이다.

 

fromIndex(Optional)

  검색을 시작할 인덱스 값이다. 인덱스가 배열의 길이보다 크거나 같은 경우 -1이 반환되므로 배열이 검색되지 않는다. 제공된 인덱스 값이 음수이면 배열 끝에서부터의 오프셋 값으로 사용된다.

  참고: 제공된 인덱스가 음수이면 배열은 여전히 앞에서 뒤로 검색된다. 계산 된 인덱스가 0보다 작으면 전체 배열이 검색된다.

  기본값: 0(전체 배열 검색).

 

반환 값

배열 내의 요소의 최초의 인덱스. 발견되지 않으면 -1.

 

 

 

---

2. forEach

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다.

 

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

 

구문

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

 

매개변수

callback

  각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받는다.

  currentValue

  처리할 현재 요소

  index(Optional)

  처리할 현재 요소의 인덱스

  array(Optional)

  forEach() 를 호출한 배열

 

thisArg(Optional)

  calback을 실행할 때 this로 사용할 값

 

 

반환 값

undefined

 

 

 

 

---

3. includes

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별한다.

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

 

구문

arr.includes(valueToFind[, fromIndex])

 

매개변수

valueToFind

  탐색할 요소

*참고: 문자나 문자열을 비교할때, 대소문자를 구분한다.

fromIndex

  이 배열에서 searchElement 검색을 시작할 위치이다. 음의 값은 array.length + fromIndex의 인덱스를 asc로 검색한다. 기본값은 0이다.

 

반환 값

Boolean

 

 

 

---

4. push

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

 

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

const count = animals.push('cows');
console.log(count);
// expected output: 4

 

구문

arr.push(element1[, ...[, elementN]])

 

매개변수

elementN

배열의 끝에 추가할 요소.

 

반환 값

호출한 배열의 새로운 length 속성

 

 

 

 

 

---

5. slice

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함) 에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 원본 배열은 바뀌지 않는다.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

 

구문

arr.slice([begin[, end]])

 

매개변수

begin(Optional)

  0을 시작으로 하는 추출 시작점에 대한 인덱스를 의미

  음수 인덱스는 배열의 끝에서부터의 길이를 나타낸드. slice(-2) 는 배열의 마지막 두 개의 엘리먼트를 추출한다.

  begin이 undefined인 경우에는, 0번 인덱스부터 slice 한다.

  begin이 배열의 길이보다 큰 경우에는, 빈 배열을 반환한다.

 

end(Optional)

  추출을 종료 할 0 기준 인덱스이다. slice는 end 인덱스를 제외하고 추출한다.

  예를 들어, slice(1, 4) 는 두 번째 요소부터 네번째 요소까지(1, 2 및 3을 인덱스로 하는 요소) 추출한다.

  음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다. 예를들어 slice(2, -1) 는 세번째부터 끝에서 두번째 요소까지 추출한다.

  end가 생략되면 slice() 는 배열의 끝까지(arr.length)추출한다.

  만약 end 값이 배열의 길이보다 크다면, slice() 는 배열의 끝까지(arr.length) 추출한다.

 

반환 값

추출한 요소를 포함한 새로운 배열

 

 

 

 

---

6. keys

 

keys() 메서드는 배열의 각 인덱스를 키 값으로 가지는 새로운 Array Iterator 객체를 반환한다.

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();

for (const key of iterator) {
  console.log(key);
}

// expected output: 0
// expected output: 1
// expected output: 2

 

구문

arr.keys()

 

반환 값

새로운 Array 반복기 객체.

 

 

 

 

---

7. filter

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

 

 

구문

arr.filter(callback(element[, index[, array]])[, thisArg])

 

매개변수

callback

  각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세 가지 매개변수를 받는다.

  element

  처리할 현재 요소

  index(Optional)

  처리할 현재 요소의 인덱스

  array(Optional)

  filter를 호출한 배열

 

thisArg(Optional)

  callback을 실행할 때 this로 사용하는 값

 

반환 값

테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환.

 

 

 

 

 

---

8. sort

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 정렬은 stable sort가 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

 

정렬 속도와 복잡도는 각 구현방식에 따라 다를 수 있다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

 

구문

arr.sort([compareFunction])

 

매개변수

compareFunction(Optional)

  정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 반환에 따라 각 문자의 유니 코드 코드 포인트 값에 따라 정렬된다.

 

반환 값

정렬한 배열. 원 배열이 정렬되는 것에 유의하자. 복사본이 만들어지는 것이 아니다.

 

 

 

 

 

 

---

9. find

find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환한다. 그런 요소가 없다면 undefined를 반환한다.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// expected output: 12

 

구문

arr.find(callback[, thisArg])

 

매개변수

callback

배열의 각 값에 대해 실행할 함수. 아래의 세 인자를 받는다.

  element

  콜백함수에서 처리할 현재 요소.

  index(Optional)

  콜백함수에서 처리할 현재 요소의 인덱스

  array(Optional)

  find함수를 호출한 배열

 

thisArg

선택 항목. 콜백이 호출될 때 this로 사용할 객체.

 

반환 값

주어진 판별 함수를 만족하는 첫 번째 요소의 값. 그 외에는 undefined.

 

 

 

 

 

---

10. every

every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트한다. Boolean 값을 반환 한다.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

 

구문

// 화살표 함수
every((element) => { ... } )
every((element, index) => { ... } )
every((element, index, array) => { ... } )

// 콜백 함수
every(callbackFn)
every(callbackFn, thisArg)

// 인라인 콜백 함수
every(function callbackFn(element) { ... })
every(function callbackFn(element, index) { ... })
every(function callbackFn(element, index, array){ ... })
every(function callbackFn(element, index, array) { ... }, thisArg)

 

매개변수

callbackFn

  각 요소를 시험할 함수. 다음 세 가지 인수를 받는다.

  

  요소

  배열에서 처리되는 현재 요소

  index(Optional)

  처리할 현재 요소의 인덱스

  array(Optional)

  every를 호출한 배열.

thisArg(Optional)

  callbackFn을 실행할 때 this로 사용하는 값

 

반환 값

callbackFn이 모든 배열 요소에 대해 참(truthy)인 값을 반환하는 경우 true, 그 외엔 false.

 

 

 

 

 

---

#References

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN