취업 준비중에 아직 제대로 이해하고 넘어가지도 못한 부분이 많다고 생각되어 예전에 써놨던 정보와 합쳐 정리해보게 되었다.
forEach, map, filter, reduce
const a = [1, 2, 3, 4, 5];
console.log(a.forEach((e) => e * 2)); //undefined
console.log(a.map((e) => e * 2)); //[2, 4, 6, 8, 10]
console.log(a.filter((n) => n % 2)); //[1, 3, 5]
console.log(a.reduce((prev, curr) => prev + curr)); //15forEach = 원래 요소를 순회하며 작업할때. 리턴값은 없으나 제일 빠름
map = 원래 요소는 냅두고 새로운 배열로 만들때
filter = 조건에 맞는 요소로 새로 배열을 만듬 (ex 짝수만 뽑기)
reduce = 조건에 맞게 계산된 값 리턴 (ex 모든 값 더하기)
원래 기존 값을 건들지 않는 map을 기본적으로 사용했었는데 forEach도 자주 사용해봐야겠다.
every, some
배열.every(e => e % 2) 같은 방식으로 사용
some은 or처럼 하나라도 만족하면 true
every는 and처럼 모든 조건을 만족해야 true
find, findIndex, includes
const numbers = [1, 2, 3, 4];
const 조건 = (n) => n % 2 === 0;
console.log(numbers.find(조건)); //2
console.log(numbers.findIndex(조건)); //1
console.log(numbers.includes(3)); //true순차적으로 조건에 해당하는 요소가 나오면 반환 후 종료함.
includes는 ES7에서 나온 문법이며 indexOf보다 성능이 좋음. 인덱스를 반환받을때도 보통은 findIndex가 indexOf보다 빠름
spread 연산자
const a = (b, ...rest) => console.log(rest)
a(1, 2, 3) //[2, 3]
const b = [1, 2, 3]
const b2 = (a, b, c) => console.log(a, b, c)
b2(...b) //1 2 3
const [c, ...rest] = b
console.log(c, rest) //1, [2, 3]Promise, async/await
비동기 방식에서 순차적으로 진행시키기 위해 사용
return new Promise((resolve, reject) => { resolve(리턴값) }
a().then(b).then(c)->
const main = async() => {
await a();
await b();
await c();
}async = Promise의 resolved 값을 반환
await = async필요. 해당 Promise를 반환받을 때 까지 기다림
이쪽이 await 변수명을 사용할 수도 있고 try catch를 사용할 수도 있으며 디버깅하기 용이해짐
이터러블, 이터레이터, 제너레이터
이터러블 : [Symbol.iterator]() 메서드를 가지고 있는 객체. Array, Map, Set, String
이 메서드는 next() 메서드를 가지고 있는 객체를 반환함
이터레이터 : 순회할 때 사용하는 포인터.
value, done 객체를 반환하는 next() 메서드를 가진 (참조) 값
done : 아직 요소가 남아있으면 false, 끝나면 true
const a = 배열\[Symbol.iterator]() //이터레이터 a. 이의 next() 메서드로 순회
a.next()
...제너레이터 : 커스텀 이터레이터를 쉽게 만들 수 있는 함수. 함수 자체로도 이터러블함
spread, for of, map 등을 통해 쉽게 객체의 value를 가져올 수 있음
function* gen() {
yield 10
if (false) yield 20
yield 30
return 90
yield30
}
let iter = gen()
console.log(iter)
console.log(iter)
console.log(iter)
console.log(iter)
console.log(iter)
ESM vs CJS
ESM : import a from 'a' , export default 사용
package.json에 "type": "module" 추가 필요
CJS : require, module.exports, exports 사용
본인은 ESM을 선호하고 있으며 그 이유는 CJS보다 안정적이라고 생각되기 때문. (정적인 선언. 비동기 임폴트가 불가능)
parseInt vs ~~(변수)
비트연산자 ~는 전체 비트를 반전시키는데 이를 두번 반복하면 비트 연산의 결과가 32비트 정수로 반환되는 ECMA 5 특성때문에 정수화 된다. 이때 변환 속도가 parseInt보다 훨씬 빠르다.
속도 테스트 : https://jsbench.me/
JSON.parse vs JSON.stringify
JSON 객체(object) : JSON.parse로 변환 가능 (JSON 역직렬화)
키와 값이 매칭되어있어 접근 가능 객체.키 or 객체[키(변수)] 로 접근 가능하며 변수에 문자열로 값에 접근할땐 []사용 권장
JSON 문자열(string) : JSON.stringify로 변환 가능 (JSON 직렬화)
키로 값을 찾을 수 없음
