리액트를 공부하다보니 바닐라 자바스크립트부터 확실히 공부하고 넘어가야겠다는 생각이 들었다. 기초 공사 없이 얼레벌레 집 짓는 기분.. 공부할 게 너무 많아 신난다 !! 하하 😭😭😭

~~1. 배열과 메서드, 맵과 셋 , 이터러블 객체 / 옵저버 패턴 -> 2. 프로토타입 -> 3. 클래스, super -> 4.비동기 -> fetch API, abortcontroller
~~

배열과 메서드

✔️ 요소 추가/제거 메서드

• arr.push(...items)
• arr.pop()
• arr.shift()
• arr.unshift(...items)

👉🏻 splice

배열 메서드계의 만능 맥가이버

arr.splice(index, deleteCount, [elem1, ..., elemN])

• 1st parameter(index) : 조작을 가할 첫 번째 요소
• 2nd parameter(deleteCount) : 제거하고자 하는 요소의 개수
• ohter parameters : 배열에 추가할 요소들

👉🏻 slice

서브 배열을 반환

arr.slice([start], [end])

👉🏻 concat

기존 배열의 요소를 사용해 새로운 배열 만들거나, 기존 배열에 요소 추가

arr.concat(arg1, arg2...)

✔️ 배열 탐색

👉🏻 indexOf ...

배열 내에서 무언가를 찾고 싶을 때.

arr.indexOf(item, from)
arr.lastIndexOf(item, from)
arr.includes(item, from)

👉🏻 find, findIndex

객체로 이루어진 배열에서, 특정 조건에 부합하는 객체 찾기

let result = arr.find(function(item, index, array) {
    //true가 반환되면 반복이 멈추고 해당 요소를 반환
    //조건에 해당하는 요소가 없으면 undefined를 반환
});

• item : 함수를 호출할 요소
• index : 요소의 인덱스
• array : 배열 자기 자신

✔️ (item => item.id == 1)과 같은 패턴이 가장 많이 사용되는 편이고, 다른 인자들(index, array)는 잘 사용되지 않는다.

✔️ arr.findIndex는 find와 동일한 작업을 수행하지만, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다.

👉🏻 filter

find 메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾는다. 조건을 충족하는 요소가 여러 개라면 arr.filter를 사용한다.

let results = arr.filter(function(item, index, array) {
  //조건을 충족하는 요소는 result에 순차적으로 저장
  // 조건 충족 요소 하나도 없으면 빈 배열 반환
});

✔️ 배열 변형

👉🏻 map

배열 요소 전체를 대상으로 함수를 호출하고, 함수 호출 결과를 배열로 반환.

let result = arr.map(function(item, index, array){
  //요소 대신 새로운 값을 반환
});

👉🏻 sort

배열의 요소를 정렬하여 배열 자체를 변경한다.

✔️ 기본 정렬 기준은 배열의 요소를 문자열로 취급하여 재정렬한다.
✔️ 기본 정렬 기준 대신 새로운 정렬 기준을 만드려면, 인자에 새로운 함수를 넘겨주어야 한다(이때 함수는 반드시 값 두개를 비교해야 하고 반환 값도 존재해야 함).
✔️ 문자열 비교엔 localeCompare를 사용할 것.

👉🏻 reverse

배열의 요소를 역순으로 정렬시켜주는 메서드

👉🏻 split과 join

• split : 구분자를 기준으로 문자열 분할
• join : 인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열 만듦

arr.split(delim)
arr.join(glue)

👉🏻 reduce와 reduceRight

배열 내 요소를 대상으로 반복 작업을 돕는 forEach, for, for...of와 유사하지만, 배열을 기반으로 값 하나를 도출할 때 사용된다.

let value = arr.reduce(function(accumulator, item, index, array) {
//...
}, [initial]);
//
//example
let arr = [1,2,3,4,5];
let result = arr.reduce((sum, current) => sum + current, 0)
alert(result); //15

• accumulator : 이전 함수 호출의 결과. 앞서 호출했던 함수들의 결과가 누적되어 저장되는 '누산기'
• initial은 함수 최초 호출시 사용되는 초깃값(옵션)
• item : 현재 배열 요소
• index : 요소의 위치
• array : 배열

✔️ reduceRight : reduce와 동일하지만 배열의 오른쪽부터 연산을 수행