상상을 현실로 상상을 현실로

JS에서 forEach와 async/await를 같이 사용을 하니까 리턴된 값이 빈 값으로 나오는 에러가 발생하였습니다. 이유 빈 배열이 나온 이유는 비동기적인 동작을 제대로 처리하기 못하였기 때문에 위와 같은 현상이 발생하였습니다. JS에서 forEach 메서드는 콜백 함수를 동기적으로 실행하고, 비동기 작업을 기다리지 않고 다음 요소로 넘어갑니다. 그리고 async/await는 비동기적인 처리를 위한 문법이기 때문에 문제가 발생 할 수 있습니다. forEach 메소드 내부에 async/await를 사용하더라도 비동기 작업이 순서대로 처리되지 않고 병렬적으로 실행될 가능성이 높습니다. 해결 방안 for ... of 루프 나 for 루프를 사용하여 요소를 순차적으로 처리하는 것이 좋습니다. 위의 두개의 ..

Babel이란? Babel은 자바스크립트의 최신 버전을 이전 버전과 호환되는 형태로 변환해 주는 도구입니다. 최신 자바스크립트 문법과 기능을 사용하여 코드를 작성할 수 있으며, Babel은 이를 이전 버전의 자바스크립트로 변환하여 구형 브라우저와의 호환이 되게 해주는 컴파일러 입니다. // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); Babel의 주요 기능 - 문법 변환 (Syntax Transformation) Babel은 최신 자바스크립트 문법을 지원하지 않는 환경에서도 코드를 실행할 수 있게 합니..

Equality (==) - 동등 연산자이다. - 느슨한 검사를 합니다. - 비교할 때 형 변환 (Type casting)이 발생하게 된다. (매우 위험한 이유) '1' == 1 // true 1 == true // true Stritct equality (===) - 엄격한 동등 연산자이다. - 비교할 때 형변환이 발생하지 않는다. '1' === 1 // false 1 === true // false 정리 더보기 JS에서 클린코드를 위해서 '==='를 적극 활용하는 것이 좋아 보입니다. 왜냐하면 팀원들과 협업하는 과정에서 명확한 의도를 전달할 수 있으며, '=='는 알수없는 오류가 발생할 수 있습니다. 안전하게 사용하는 방법으로는 먼저 형 변환을 하고, '==='를 통해 연산을 사용하는 것을 추천합니다..

Array.reduce() 배열의 요소를 하나씩 순회하여 callback함수의 실행 값을 누적하여 하나의 결과값을 반환함. arr.reduce(callback[, initialValue]) 파라미터 callback accumulator - accumulator는 callback함수의 반환 값을 누적시킴 currentValue - 배열의 현재 요소 currentIndex(Optional) - 배열의 현재 요소의 인덱스, initialValue를 제공한 경우 0, 아니면 1부터 시작함. array(Optional) - 호출한 배열 initiaValue (Optional) 최초 callback함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을 경우 배열의 첫 번째 요소를 사용하고,..

for(const v of ['a','b','c']) { console.log(v) // 출력 a b c } for of 문을 사용할 때 index 값이 필요를 할 때가 있는데 위의 루프에서는 제공 되지 않습니다. 하지만 ES6에 도입된 entries() 메서드를 사용하여 index를 사용할 수 있다. for(const [i,v] of ['a','b','c'].entries() ){ console.log(i,v) // 출력 0,a 1,b 2,c } 참고 https://flaviocopes.com/how-to-get-index-in-for-of-loop/ How to get the index of an iteration in a for-of loop in JavaScript A for-of loop, in..