[자바스크립트] reduce() / Array.from() / ForEach()

Reduce()

reduce() 메서드는 배열에 대해 주어진 리듀서 함수를 실행하고 결과값을 반환 

아래는 쉽게 이해할 수 있는 reduce 작동 방법 애니메이션이다. 

http://reduce.surge.sh/

 

 

Array.from() 

배열이나 객체를 복사해 새로운 배열을 만듦 

이터러블 객체나 유사배열은 실제 배열이 아닌 배열같은 객체임

→ 배열 메소드들인 push나 pop사용 불가능 

→ 이런 객체들을 배열처럼 사용해야 할 때 Array.from()을 사용함 

 

 

그 어떤 공식문서도 한번에 이해하기 힘든데 이분이 쉽게 정리해주신 것 같다. 

 Array.from({ 객체: 를 받으면 })  → 요 객체가 이터러블이나 유사 배열인지 확인한다.

 Array.from({ 객체: 를 받으면 },  (요 함수) => 를 통해 )  → 새로운 배열을 만들고, 새롭게 만든 배열로 복사한다.

(출처: https://devbirdfeet.tistory.com/185)

 

// 기본 배열
// 첫번째 인자로 {length:_} 를 넣고, 두번째 인자로 (value와 index)가 들어가 index만 반환 
Array.from({length :5},(v,i) => i); // [0,1,2,3,4] 


// 기존 배열을 가공한 새 배열 만들기 
Array.from([1,2,3], x => x+x); //2, 4, 6

 

forEach()

배열에 활용가능한 메서드, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행

→ 매개변수와 함게 배열의 각 요소에 적용하게 될 콜백 함수를 전달함

 

• Current Value (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach 메서드를 호출한 배열