자바스크립트S11: Arrays

소바·2022년 10월 5일
0

자바스크립트

목록 보기
7/13

Array: 기본 메서드들

slice() 메서드

splice() 메서드

reverse() 메서드

concat() 메서드

join() 메서드

at() 메서드

at() 메서드: 활용예제

forEach() 메서드: loop over

for of loop 으로 구현과 비교하기(S9 참고)

for of loop & entries 메서드 부분 참고

for of loop: 파라미터 passing

entries() 메서드는 각각의 index와 element로 구성된 Array로 만들어준다. 그 Array를 destructuring 문법을 사용하여 [i,변동] 변수에 매 iteration마다 index와 현재 element로 각각을 나누어 담을 수 있다.

forEach 메서드로 동일 기능 구현(훨씬 쉽다)

forEach메서드는 고차함수이므로 어떤 기능을 하는지 how에 대한 detail을 명시하는 callback 함수가 필수이다.

그렇다면 forEah메서드가 callback 함수를 호출하는 정확한 시점이 언제일까?
forEach메서드는 Array를 loop over하는데 매 iteration 마다 한번씩 callback 함수를 호출한다.

그리고 이 callback함수는 매 iteration마다 loop over 되고 있는 현재 Array의 element를 argument로 passing 한다.

즉, Array의 index 0번을 loop over할 때는 current element인 20000이 argument값으로 passing된다.

forEach메서드: 파라미터 passing 하기(element의 current 상태, index, 전체Array)

forEach() 메서드: Maps & Sets

예제: "Bankist" 앱

DOM elements 생성하기


map, filter,reduce 메서드들 Overview

Overview

맛보기: map() 메서드

맛보기: filter() 메서드

맛보기: reduce() 메서드

Data Transformation 메서드들 자세히 보기

map() 메서드 예제: 환율적용하기

VS. for of loop와 비교

Arrow 함수로 callback 함수를 더 간결하게!

map 메서드: 파라미터 passing

map 메서드와 callback함수 & forEach 메서드와의 차이점(sideEffect)

응용: user name 산출하는 함수 만들기

함수응용: 외부 data를 modify 하기

상황예시: ForEach ? map?

외부데이터 argument passing하기

변경하고자하는 데이터 specify & modify 하기

filter() 메서드

reduce() 메서드

reduce메서드 활용 : 은행잔고 계산하기

reduce메서드 응용 : maximum value 찾기

메서드 Chaining: Pipeline

계좌요약 Logic짜기 & Logic이 추가될 때

메서드 Chaining의 Best practice

최적화하기

여러개의 메서드를 Chaining 하는 것은 퍼포먼스 이슈를 발생시킬 수 있다. 실제로 현업에서 받는 Array데이터의 규모 자체가 엄청 클 것이기 때문이다. 특히 map 메서드 같은 경우에 여러개를 chaining 하기가 쉬운데, 한 개로 다 처리 할 수 있는지 고려해봐야한다.

Original array를 mutate하는 메서를 chaining 하는 것을 지양하자

splice 혹은 reverse 같은 메서드를 chaing해서 사용하지 말자. App의 규모가 커질 수록 문제의 야기하기 쉽다.

find() 메서드

filter() VS. find() 비교

크게 두 가지의 차이점이 있다.

첫 번째로, Filter메서드는 condition을 만족하는 모든 elements를 return하지만 find메서드는 딱 하나만 return한다.

두 번째로, filter메서드는 new array를 return하지만 find메서드는 찾은 element 자기 자신을 return한다(Array가 아니다)

find메서드 활용: 예제로 보기

findIndex() 메서드

Arrays: Creating & filling

fill() 메서드

Array.from() 메서드

유사배열 자료구조들(Array like structures)

Array.from() 메서드의 활용예제: 유사배열 Converting

Array.from() 메서드의 활용예제: 두번째 parameter

profile
소바보이

0개의 댓글