JS 배열 메서드 완벽 정리

✅ find()

▪️설명 : 제공된 배열에서 판별 함수를 만족하는 첫 번째 요소를 반환한다. 만족하는 값이 없으면 undefined가 반환된다. 

 

▪️ 리턴 값

• 조건을 만족하는 요소 1개
• 없으면 undefined

 

▪️ 기본코드

array.find((element, index, array) => {
  return 조건;
});

 

▪️ 예제코드

See the Pen find() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ findIndex()

▪️ 설명 : 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다. 만족하는 요소가 없으면 -1을 반환한다.

 

▪️ 리턴 값

• 만족하는 첫 번째 요소의 인덱스
• 없으면 -1

 

▪️ 기본코드

array.findIndex((element, index, array) => {
  return 조건;
});

 

▪️ 예제코드

See the Pen findIndex() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ some()

▪️ 설명 : 배열 안의 어떤 요소라도 주어진 판별 함수를 적어도 하나라도 통과하면 true를 반환한다.

 

▪️ 리턴 값

• 조건 만족 true
• 전부 불만족 false

 

▪️ 기본코드

array.some((element, index, array) => {
  return 조건;
});

 

▪️ 예제코드

See the Pen findIndex() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ every()

▪️ 설명 : 배열의 모든 요소가 조건을 만족하면 true를 반환한다. 하나라도 조건을 만족하지 않으면 false를 반환한다.

 

▪️ 리턴 값

• 전부 만족 true
• 하나라도 불만족 false

 

▪️ 기본코드

array.every((element, index, array) => {
  return 조건;
});

 

▪️ 예제코드

See the Pen every() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ reduce()

▪️ 설명 : 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

 

▪️ 리턴 값

• 누적 계산된 하나의 값 any

 

▪️ 기본코드

array.reduce((acc, cur, index, array) => {
  return 새로운누적값;
}, 초기값);

 

▪️ 예제코드

See the Pen Untitled by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ sort()

▪️ 설명 : 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 기본 정렬 순서는 문자열(유니코드)를 따른다.

 

▪️ 리턴 값

• 정렬된 배열
• ! 원본 배열도 변경됨

 

▪️ 예제코드

See the Pen sort() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ includes()

▪️ 설명 : 배열의 항목에 특정 값이 포함되어 있는지를 판단하여 boolean값으로 반환

 

▪️ 리턴 값

• 포함 true
• 미포함 false

 

▪️ 기본코드

array.includes(value);

 

▪️ 예제코드

See the Pen includes() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ slice()

▪️ 설명 : 배열의 일부를 잘라 새로운 배열로 반환한다. (begin ~ end, end는 미포함)

 

▪️ 리턴 값

• 잘라낸 새 배열

 

▪️ 기본코드

array.slice(start, end);

 

▪️ 예제코드

See the Pen slice() 메서드 by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ join()

▪️ 설명 : 배열 요소를 하나의 문자열로 결합한다. 단, 배열의 항목이 1개일 경우 구분 기호를 사용하지 않는다.

 

▪️ 리턴 값

• 결합된 문자열

 

▪️ 기본코드

array.join(separator);

 

▪️ 예제코드

See the Pen Untitled by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

✅ reverse()

▪️ 설명 : 배열의 순서를 거꾸로 뒤집어 반환한다. 

 

▪️ 리턴 값

• 뒤집힌 배열
• ! 원본 배열도 변경됨

 

▪️ 예제코드

See the Pen Untitled by k.nang Min (@k-nang) on CodePen.

 

▪️ 예제결과

 

 

 

 

 

 

 

❗find()는 요소(값) 자체를 반환하지만 findIndex()는 위치를(index)를 반환한다.

❗some()은 "하나라도 조건을 만족", every()는 "모두 만족" 확인한다.

 

 

!!! console.log()는 개발자 도구에서만 확인 가능하므로, 예제 결과는 화면캡처로 대체