코딩세상
JavaScript - 순수함수와 배열 메소드(map, filter, reduce) 본문
순수함수
- 순수함수는 부작용이 없는 함수를 의미합니다.(외부 상태에 영향을 주거나 받지 않는 함수를 말합니다.)
순수 함수의 다음과 같은 특징을 가집니다.
- 함수는 단일 책임을 가집니다. 함수는 하나의 일만 수행합니다.
- 함수는 부작용이 없습니다. 함수는 자신의 범위 밖의 상태를 변경하지 않습니다.
- 함수는 참조 투명성을 가집니다. 함수는 동일한 입력에 대해 항상 동일한 출력을 반환합니다.
// 순수함수 예시 function add(a, b) { return a + b; } // 비순수함수 예시 let c = 10; function multiply(a) { c = a * c: return c; } |
add 함수는 순수함수입니다. 왜냐하면 add 함수는 매개변수 a와 b만으로 결과값을 반환하고 외부 상태에 영향을 주거나 받지 않기 때문입니다.
multiply 함수는 비순수함수입니다. 왜냐하면 multiply 함수는 전역 변수 c를 사용하고 변경하며 입력값 a에 따라 결과값이 달라지기 때문입니다.
JavaScript에서 배열과 객체는 mutable이기 때문에, 배열과 객체의 메소드는 대부분 순수함수로 작성되어 immutable한 값을 리턴합니다.
javascript에서 배열 메소드 중 map, filter, reduce
map
- map은 배열의 모든 요소에 대해 주어진 함수를 적용하고 그 결과를 새로운 배열로 반환합니다.
문법
// 사용 방법 let mapArray = array.map(function(element) { // element = 처리중인 배열 요소 // element에 대해 map 작업을 수행하고 결과값을 리턴 }); |
예시
let array = [1, 2, 3, 4]; let mapArray = array.map(function(element) { return element * 2; }); console.log(mapArray); // [2, 4 ,6, 8] |
filter
- filter는 배열의 모든 요소에 대해 주어진 조건을 만족하는지 검사하고 그 결과가 참인 요소들만 새로운 배열로 반환합니다.
문법
let filterArray = array.filter(function(element) { // element = 처리중인 배열 요소 // element가 조건을 만족하는지 판단하고 그 결과값을 리턴 }); |
예시
let array = [1, 2, 3, 4] let filterArray = array.filter(function(element) { return element % 2 === 0; }); console.log(filterArray); //[2, 4]; |
reduce
- reduce는 배열의 모든 요소에 대해 주어진 함수를 순차적으로 적용하고 하나의 최종 값을 반환합니다.
문법
let reduceArray = array.reduce(function(accmulator, currentValue) { //accumulator는 이전 단계에서 리턴된 값. 초기값이 있다면 초기값부터 시작 // currentValue는 현재 처리중인 배열요소 입니다. // accumulator와 currentValue 사이에서 원하는 작업을 수행하고 그 결과값 리턴 }, initialValue); |
예시
let array = [1, 2, 3, 4] let reduceArray = array.reduce(function(accmulator, currentValue) { return accmulator + currentValue; }, 0); console.log(reduceArray); //10 |
#출처 엘리스 AI 트랙 JavaScript 101 - (6) 순수함수와 배열 메소드(map, filter, reduce)
'Javascript' 카테고리의 다른 글
JavaScript - 이벤트 버블링과 캡쳐링, 이벤트 위임 (0) | 2023.03.28 |
---|---|
JavaScript - DOM (0) | 2023.03.22 |
JavaScript - 배열과 문자열 (0) | 2023.03.20 |
JavaScript - 함수와 객체 (0) | 2023.03.17 |
JavaScript - 조건문과 반복문 (0) | 2023.03.13 |
Comments