-
Notifications
You must be signed in to change notification settings - Fork 13
Javascript data structure with map, reduce, filter and ES6
자바스크립트는 명령형 프로그래밍부터 선언적 스타일까지 어떠한 스타일의 작성도 가능하도록 해준 언어입니다. 대부분의 프로그래머는 명령형을 사용합니다. 왜냐하면 그들은 객체지향언어를 배경으로 시작했거나, 그들은 그것을 사랑하거나 다른 스타일에 익숙하지 않기 때문입니다. 우리가 FP인 선언적 스타일을 두 개로 나누기 전에, 예시를 통해서 두 개의 다른 점을 이해합시다. (만약에 당신이 이미 알고 있다면 몇 문단은 패스해도됩니다.)
// to calculate the sum of array elements
const sum = (arr) => {
let result = 0;
for (let i = 0; i < arr.length; i++) {
result += arr[i];
}
return result;
};
명령형 스타일은 멋지지만 만약 복잡한 수학 논리가 있다고 상상했을때 코드 크기와 가독성은 형편없을 것입니다. 그것은 읽을 때 인지부하를 증가시키고, 시간이 지남에 따라 추론과 논리에 있어서 더 쉽게 헤매도록 해줍니다.
또한, 이 코드 스니펫의 주요 복잡성은 우리가 원하는 것을 컴퓨터에 말하는 대신, 우리가 그것을 어떻게 하는지 지시하고 있다는 사실에서 비롯됩니다.
// calculate the sum of array elements
const sum = (arr) => arr.reduce((total, item) => total += item, 0);
이제,이 코드는 꽤 깔끔하고 짧아보이고 전달력있고 간결한 코드처럼 보입니다. 에러를 송출할거 같지 않고, 유지보수하기 쉽고 디버깅 하기도 쉬워보입니다. 우리는 컴퓨터에게 어떻게 하는 것 대신에 우리가 원하는 것을 전달합니다.
선언문은 컴파일러 종료시에 쉽게 최적화할 수 있도록 접근하고 적은 부작용을 가지고 있습니다.
Note: 만약에 위 두 개의 성능과 다른 자바스크립트 함수(map, reduce, filter, find)에 대해 걱정하고 있다면, 반드시 작은 data set을 위해 이걸 읽고 large data set(100–1000000)을 위해 여기를 확인하세요.
더이상 지체하지말고, FP를 위해 제일 많이 사용되는 자바스크립트 함수와 함께 시작해봅시다.
// definition
collection.map((currentValue, index) => {
// Return element for newArray
});
// example
const arr = [1,2,3,4,5];
const newArray = arr.map(i => i*10);
// return a new array with all value as multiple of 10;
Map 배열에서 작동하고 배열을 반환합니다. 위 코드 스니펫은 집합(예: 배열)에서 작동하며, 현재 반복 값을 가진 콜백을 인수로서 인덱스하고 새 배열을 반환합니다.
Note: Map은 일부 조건에서는 흐름을 끊는 대신 전체 배열을 변경/변환하는 데 적합하며, map의 성능을 현명하게 파악할려면 여기에서 확인하십시오. 그러나 작은 data sets에 사용하기 쉽습니다.
// definition
collection.reduce((accumulator, item, index) => {
// logic to perform to get accumulator as a return value
}, initialValue for accumulator);
// example
const arr = [1,2,3,4,5];
const total = arr.reduce((acc, item) => acc+= item, 0);
// return a total as 15
Reduce는 배열에서 작동하지만 반환 할 수있는 모든 것을 반환 할 수 있습니다. 이름 자체가 말하듯이 무엇이든 줄일 수 있으며 map
, find
, filter
또는 다른 자바스크립트 함수처럼 행동 할 수 있습니다. 위의 코드 스니펫은 배열에서 작동하고 배열 항목의 총 값을 계산하기 위해 줄입니다.
위 예제의 설명 : 첫 번째 줄을 줄이면 acc에 0 값이 할당되고 acc += item
즉 acc + acc + item
이 0 + 1
1로 계산됩니다. 이 1은 다음 반복 및 모든 배열 항목을 다 끝낼 때까지 계속됩니다.
// definition
collection.find((item) => {
// return first element that satisfy the condition
});
// example
const arr = [1,2,8,4,5];
const value = arr.find(i => i%4 == 0);
// return the first value i.e 8
Find는 배열에서 작동하고 함수에서 조건을 만족하는 첫 번째 요소를 반환합니다.
Note: 쉽고 단순하지만 대용량 data set에서는 효율적이지 않은 이유는 무엇입니까? 여길 보세요
const users = [
{
id: 1,
name: "Jonathon Haley",
username: "Monte.Weber2",
email: "Daphne43@yahoo.com",
phone: "1-563-675-1857 x11708",
website: "carmela.net",
password: "hashed_password"
},
{
id: 2,
name: "Dean John",
username: "dd.1",
email: "deno@google.com",
phone: "1-123-543-1857 123212",
website: "dd.net",
password: "Dean_hashed_password"
}
];
추가 예제를 위해 배열로 users를 사용합니다.
const newUser = {
id: 4,
name: "Denomer Crazy",
username: "crazy.1",
email: "deno@crazy.com",
phone: "",
website: "crazy.app",
password: "crazed_checker"
};
const newData = [...users, newUser]; // add element at last
or
const newData = [newUser, ...users]; // add element at first
or
const newData = users.concat(newUser) // the old way
ES6 스프레드 연산자의 사용은 배열에 요소를 추가하기가 매우 쉽습니다. 스프레드 연산자를 사용하여 두 개의 다른 배열을 압축하거나 객체의 모양을 수정하거나 동적 키 값 쌍 등을 추가할 수 있습니다.
const hobbies = ['chess', 'pool'];
const newUsers = users.map(u => ({...u, hobbies}))
// this will add hobbies to users array and return newUsers array
const contactInfo = users.map(({email, website, phone}) => ({email, website, phone}));
객체 키와 map의 구조를 해제하는 es6을 사용하여 users의 연락처 정보 배열을 가져옵니다.
const newUsers = users.map(u => u.id == 2? ({...u, name: 'te'}): u);
// this will return newUsers with all user having name 'te'
Note : 실제로 키를 삭제하지 않고 새 객체를 반환합니다. 키 삭제 연산자를 삭제하려면 여기에서 객체 불변성을 고려해야합니다.
키를 삭제하려면 여러 가지 방법이 있지만 가장 쉽고 단일 라인으로 볼 수 있습니다. users로부터 website를 삭제해봅시다.
const newUsers = users.map({id, email, name, username, phone, password} => ({id, email, username, email, phone, password}));
// will return an array with all keys other than website
위의 코드는 큰 객체를 위해 코드화 하기가 사실상 어려운 것 같습니다.
const newUsers = users.map(u => Object.keys(u).reduce((newObj, key) => key != 'website' ? { ...newObj, [key]: u[key]} : newObj, {}));
우리는users
를 통해 map
을하고, 각각의user
에reduce
를하고 new object
(newObj)를 만든 다음 website 키를 확인합니다.
만약 website가 이전에 형성된 것은 newObj를 반환하고 그렇지 않다면 스프레드 연산자를 수행하고 obj에 require 키를 추가하고 마침내 newObj를 반환합니다.
이전에 형성된 newObj를 반환한다면, 스프레드 연산자를 수행하고 obj에 require 키를 추가하고 마침내 newObj를 반환합니다.
팁 감사드립니다! 💰
내 Bitcoin 주소 : 132Ndcy1ZHs6DU4pV3q2X1GzSCdBEXX6pz
My Ethereum 주소 : 0xc46204dfc8449Ffb0f02a9e1aD81F30D3f027010
내 이메일 목록에 추가하고 자바스크립트 및 github에서 더 많은 기사를 읽으려면 너의 이메일을 여기 에 입력하십시오. 내 미친 코드를 볼 수 있습니다
나의 다른 기사를 좋아할 수도 있습니다.
- Nodejs app structure
- Javascript ES6- Iterables and Iterators
- Javascript generator-yield/next & async-await
이 게시물이 도움이 되었다면 아래의 👏 박수 치기 버튼을 클릭하여 지원을 표시하십시오! 또한 다른 사람들이 쉽게 찾을 수 있도록 추천하고 공유하십시오!
감사합니다!
일부 의역이 들어간 경우도 있으므로 해당 원문의 내용과 조금 다를 수 있습니다.
문제가 될 소지가 있다거나 혹은 수정이 필요한 사항이 있다면 있다면 issues 보내주세요.
기술문서
- 호출스택
- 원시자료형
- 값타입과 참조타입
- 명시적 변환, 암시적 변환, Nominal, 구조화, 덕 타이핑
- == vs === vs typeof
- 함수 범위, 블록 범위, 렉시컬(lexical) 범위
- 식(expression) vs 문(statement)
- IIFF, Modules, Namespaces
- 메세지큐와 이벤트루프
- setTimeout, setInterval, requestAnimationFrame
- 자바스크립트 엔진
- 비트 연산자, 형식화 배열, 버퍼(배열)
- DOM과 Layout Trees
- 팩토리와 클래스
- this, call, apply, bind
- new, 생성자, instanceof, 인스턴스
- 프로토타입의 상속과 체인
- Object.create와 Object.assign
- map, reduce, filter
- 순수함수, 부수효과, 상태변이
- Closure
- 고차함수
- 재귀
- 컬렉션과 생성기
- Promise
- async, await
- 자료구조
- 함수 성능과 빅 오 표기법
- 알고리즘
- 상속, 다형성, 코드의 재사용성
- 설계패턴
- 부분 어플리케이션, 커링, Compose, Pipe
- 클린코드