💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련하여 더 탐구한 내용은 기술서적과 ECMAScript Specification을 참고하여 검증, 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요.감사합니다.📚 코드를 값으로 다루어 표현력 높이기console.log( reduce( add, map( (p) => p.price, filter((p) => p.price 이전 글의 마지막 섹션에서, 만들어둔 고차함수들을 연속적으로 활용하여 원하는 값(Products 객체 중 20000원이 넘는 제품의 가격 총합)을 평가해보았다. 이처럼 연속적인 함수들을 통해 값이 평가되는 과정을 조금 더 우아하..
💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련하여 더 탐구한 내용이나, 지엽적인 부분은 모던 자바스크립트 딥다이브와 You Don't Know JS Yet, ECMAScript Specification을 참고하여 검증, 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요. 감사합니다.📚 제너레이터와 고차함수1️⃣ 제너레이터제너레이터란 이터레이터이자 이터러블을 생성하는 함수를 말한다. 일반 함수명 앞에 *를 붙혀 선언할 수 있다.function* gen() { yield 1; yield 2; yield 3;}let iter = gen();console.log(iter.next());console.log(iter.n..
💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련해 더 탐구한 내용이나, 지엽적인 부분은 모던 자바스크립트 딥다이브와 You Don't Know JS Yet, ECMAScript Specification을 참고하여 검증, 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요. 감사합니다.📚 이터레이터 프로토콜1️⃣ 기존(ES6 이전)의 리스트 순회const list = [1, 2, 3];for (var i = 0; i 길이(length)라는 프로퍼티에 의존해서, 숫자라는 키로 내부의 값을 순회한다. 친근한 방식이다. 유사배열 역시 동일한 매커니즘으로 처리된다.const str = 'abc';for (var i = 0; i ..
💬 들어가기 앞서유인동 님의 함수형 자바스크립트 강의를 기반으로 학습한 내용을 정리합니다. 관련해 더 탐구한 내용이나, 지엽적인 부분은 모던 자바스크립트 딥다이브와 You Don't Know JS Yet 서적을 참고하여 정리하고 있습니다. 본문 내 잘못된 부분이나 궁금하신 부분은 언제든 코멘트 남겨주세요. 감사합니다.📚 일급함수와 고차함수평가- 코드가 계산되어 값을 만드는 것- 연산자 우선순위에 의해 순서를 갖고 평가가 이루어진다.- 사칙연산 뿐만 아니라 배열, 객체 등 다양한 형태와 복합적으로 평가될 수도 있다. 일급- 값으로 다룰 수 있다.- 변수에 할당할 수 있다.- 함수의 인자 혹은 결과 (Return 값)으로 사용될 수 있다.const a = 10;const add10 = a => a + 1..
이전 글에서 ES6의 변수선언 방법, 화살표 함수, Rest 파라미터, Spread / Destructuring에 대해 정리했었다. 이외에도 템플릿/강화객체 리터럴, 클래스, 모듈, 고차함수 등의 변경점이 있었지만 이 글에서는 Promise에 대해 정리해보려 한다. Promise Promise는 자바스크립트에서 비동기 작업을 처리하기 위해 성공 혹은 실패 상태를 나타내는 객체이다. 이전부터 라이브러리를 통해 구현되었지만, ES6에서 기본 문법으로 지원하게 되었다. new Promise()를 통해 생성하거나, Async/Await를 통해 암시적으로 Promise를 반환핟을 수 있다. 선언 const myFirstPromise = new Promise((resolve, reject) => { // 비동기 코..
에러와 예외 프로그래밍 간 우리는 항상 에러(Error)와 마주한다. 잘못된 문법을 사용했거나, 사전에 정의되지 않은 메서드를 사용하는 등의 경우에 발생한다. 예외(Exception)는 그 상황 자체를 가리키는 조금 다른 개념이지만, 일반적으로 혼용하여 사용하는 경우가 많다. 이들은 프로그램의 작동을 멈추게 하고, 다음 코드로 넘어갈 수 없게 된다. 따라서 이러한 에러나 예외가 발생하지 않도록 미리 방지할 필요가 있고, 발생했음에도 이상 없이 원래의 코드가 작동될 수 있는 예외처리가 필요하다. 예외처리 try / catch 자바스크립트를 포함한 많은 언어에서 제공하는 일반적인 예외처리 구문이다. try{}를 통해 실행시킬 코드를 작성하고, 실행 중 에러가 발생하면 catch{}를 통해 로그를 확인, 처리..
객체나 배열을 순회하는 메서드를 적용하고자 할 때, TypeError : X is not iterable과 같은 오류를 마주한 적이 있을 것이다. 정확히 무엇을 의미하는지, 어느 객체 유형에 알맞은 메서드인지 정리하려 한다. Iteration 프로그래밍에서 Iteration이란 특정 작업을 반복적으로 수행하는 '행위'를 말한다. 데이터 구조의 각 요소를 순회하거나, 특정 작업을 반복 실행시킨다. 또한 Iteration이 가능한 객체 구조들을 Iterable(반복가능)하다고 말한다. 잠재적으로 반복이 가능함을 형용사로 부여하는 것이다. 자바스크립트의 배열(Array), 문자열(String), 집합(Set), 맵(Map)이 이에 해당한다. 객체(Object)는 반복이 불가능하고, 프로퍼티를 열거(enumer..
채용 우대사항에 빠지지 않고 보이는 Webpack, Babel 사용이 능숙한 분. CRA를 사용해 프로젝트를 진행해 왔었기에, JS 신문법을 이전 버전의 문법으로 번역해준다거나 (Babel), 모듈로 이루어진 파일들을 압축해준다(Webpack) 정도로만 어렴풋이 알고있었다. 이들을 확실히 이해하고 스스로 활용할 수 있게 하기 위해 정리해 놓으려 한다. Webpack 웹팩이란 웹팩(Webpack)은 모던 자바스크립트 (ES6+) 애플리케이션을 위한 모듈 번들러이다. 모듈이란 특정 기능을 갖는 작은 코드 단위를 의미한다. 함수나 컴포넌트가 담겨 있는 js파일부터, 이미지, 동영상 등을 모두 포괄하는 개념이다. 이 자원들을 하나의 파일로 병합, 압축하는 과정을 번들링이라고 한다. 기존 모듈의 문제점과 표준화 ..
동기 처리 자바스크립트는 기본적으로 싱글 스레드 기반의 언어이다. 따라서 하나의 호출 스택만을 이용해 한 번에 한 가지의 일만 처리할 수 있다. 코드들은 순차적으로 실행되며, 이전 작업이 완료되어야 다음 작업으로 넘어간다. 이를 동기(Synchronomous)처리라 한다. 비동기 처리 반대로 비동기(Asynchromonous) 처리란, 특정 코드의 연산이 끝나지 않아도 다음 코드를 처리할 수 있는 방식을 말한다. 자바스크립트에는 fetch()를 통한 HTTP 요청이나, setTimeout을 통한 타이머 구현같은 다양한 비동기 함수가 존재한다. 이러한 처리들이 동기적으로 처리된다면 이용자 입장에서는 마우스를 집어던질지도 모른다. 따라서 비동기적인 호출이 있을 때 작업을 시작하긴 하지만, 즉시 복귀하여 다른..
