자바스크립트 배열 메서드 정리(feat.함수형프로그래밍,고차함수)🚣‍♀️

함수형 프로그래밍과 고차함수

함수형 프로그래밍은

• 조건문과 반복문의 사용을 억제해 코드의 복잡성을 해결하고 변수의 사용 또한 억제함으로써 외부 상태가 변경되는 문제를 피하고자 하는 프로그래밍 패러다임이다.

고차함수는

• 함수를 인수로 받거나 함수를 리턴하는 함수를 의미한다. 이는 자바스크립트의 함수가 일급 객체이기 때문에 가능하다. 고차함수는 함수형 프로그래밍에 기반을 둔다.

조건문과 반복문의 사용은 코드의 가독성을 해칠 수 있다.
또한 변수의 사용은 정보가 변할 수 있음을 의미한다.
이들을 부수효과라고 하는데 에러의 잠재 원인이다.
따라서 함수형 프로그래밍은 순수함수를 통해 부수효과를 억제해 프로그램 안정성을 높이려는 노력의 일환으로 볼 수 있다.
이를 숙지하고 배열 메서드를 정리해보려고 한다.

배열 메서드

배열 메서드는 원본 배열을 변경하는지 여부에 따라 분류 가능하다.

💁🏻 원본 배열을 변경하는 메서드

push

• 리턴값 👉🏻 push한 요소
• push 메서드를 대체하는 방법으로 배열의 length 프로퍼티를 사용하는 방법이 있다. (참고로 length 프로퍼티를 사용해 배열 끝에 값을 넣는 방법이 push 메서드보다 성능적으로 더 빠르다고 한다.)
• 원본 배열을 직접 변경하기 때문에 스프레드 문법(...) 사용이 권장된다.

pop

• 리턴값 👉🏻 (빈 배열인 경우) undefined / (빈 배열이 아닌 경우) pop한 요소
• push와 pop 메서드를 같이 사용하면 스택 자료구조를 구현할 수 있다.

unshift

• 리턴값 👉🏻 요소가 새롭게 추가된 배열의 길이
• 새로운 요소를 배열의 앞에 추가한다.
• 원본 배열을 직접 변경하기 때문에 스프레드 문법(...) 사용이 권장된다.

shift

• 리턴값 👉🏻 (빈 배열인 경우) undefined / (빈 배열이 아닌 경우) pop한 요소
• push와 shift 메서드를 같이 사용하면 큐 자료구조를 구현할 수 있다.

splice

• 리턴값 👉🏻 제거한 요소를 담은 배열
• 배열 중간에 요소를 추가하거나 제거할 때 사용한다.
• 인자: (startIndex, deleteCount, items)
• indexOf 메서드와 같이 사용할 수 있다.

join

• 리턴값 👉🏻 배열 요소를 구분자로 연결한 문자열
• 디폴트 구분자는 쉼표(,)다.

reverse

• 리턴값 👉🏻 순서를 뒤집은 배열

fill

• 리턴값 👉🏻 정적인 값으로 채운 배열
• 인자: (채울 값, startIndex, endIndex)
• startIndex 이상, (endIndex - 1) 이하까지만 특정 값으로 채운다.

✨ sort

• 리턴값 👉🏻 정렬된 배열
• 숫자 요소나 객체 요소로 이루어진 배열을 정렬하는 경우 콜백함수로 비교함수를 전달해야 한다.

🙋🏻 원본 배열을 변경하지 않는 메서드

concat

• 리턴값 👉🏻 병합된 새로운 배열
• 따라서 리턴값을 반드시 변수에 할당해야 한다.
• 코드의 일관성을 위해 스프레드 문법(...) 사용이 권장된다.

slice

• 리턴값 👉🏻 지정된 요소들을 복사한 배열
• 인수를 생략한 경우에는 모든 요소를 얕은 복사한 배열을 리턴한다.
• 인자: (startIndex, endIndex)
• startIndex 이상, (endIndex - 1) 이하까지만 얕은 복사한다.

includes

• 리턴값 👉🏻 배열에 특정 요소가 포함됐는지 여부의 불리언 값

✨ forEach

• 리턴값 👉🏻 undefined
• for문을 대체할 수 있다. (for문 보다는 성능이 떨어지지만 가독성이 높다)
• 따라서 요소가 많은 배열을 순회하지 않는 경우나 복잡한 코드가 아닌 경우에는 forEach 메서드를 사용하면 된다.
• 콜백함수를 통해 원본 배열 변경이 가능하다.

✨ map

• 리턴값 👉🏻 콜백함수의 리턴값들로 구성된 새로운 배열

✨ filter

• 리턴값 👉🏻 콜백함수의 리턴값이 true인 요소들로 구성된 새로운 배열
• 콜백함수 안에서 특정 조건을 만족하는지 여부를 따져준다.

✨ reduce

• 리턴값 👉🏻 배열 요소들에 대한 하나의 결과값
• 평균, 최대값, 특정 요소의 중복 횟수, 중첩 배열 평탄화, 중복된 요소를 제거할 때 유용하다.
• 중첩된 배열을 평탄화하는 예시 코드다.

const arrOfArrs = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
const newArr = arrOfArrs.reduce((prev, curr) => [...prev, ...curr], []);
console.log(newArr);  // ✅ [1, 2, 3, 4, 5, 6, 7, 8, 9]

✨ some

• 리턴값
  • (배열 요소들에 대한 콜백함수의 리턴값이 단 1번이라도 참인 경우) true
  • (그 외의 경우) false

✨ every

• 리턴값
  • (배열 요소들에 대한 콜백함수의 리턴값이 모두 참인 경우) true
  • (배열 요소들에 대한 콜백함수의 리턴값이 단 1번이라도 거짓인 경우) false

✨ find

• 리턴값
  • 배열 요소들 중 콜백함수의 리턴값이 첫번째로 true인 요소
  • (콜백함수의 리턴값이 true인 요소가 존재하지 않는 경우) undefined

✨ findIndex

• 리턴값
  • 배열 요소들 중 콜백함수의 리턴값이 첫번째로 true인 요소의 인덱스
  • (콜백함수의 리턴값이 true인 요소가 존재하지 않는 경우) -1

✨ indexOf, lastIndexOf

• 리턴값
  • 배열에 담긴 특정 요소의 인덱스
  • (배열에 특정 요소가 존재하지 않는 경우) -1
• indexOf는 배열의 앞, lastIndexOf는 배열의 뒤부터 특정 요소가 존재하는지 찾는다.