Javascript

    [javascript] ES6 문법 활용 정리

    최근 프로젝트를 수행하며, ES6 문법을 한번 정리하면 좋겠다는 생각이 들었습니다. 간단히 ES6 리마인드겸 실무에서 사용할 수 있을만한 내용들을 정리해보고자 합니다. 프로퍼티 추출 object에서 value를 가져오는 것은 어플리케이션에서 매우 일반적입니다. AS-IS const obj = { a: 1, b: 2, c: 3, d: 4, e: 5, }; const a = obj.a; const b = obj.b; const c = obj.c; const d = obj.d; const e = obj.e; const f = obj.a + obj.d; const g = obj.c + obj.e; TO-BE ES6의 구조분해를 사용하면 코드의 양이 줄게됩니다. const { a, b, c, d, e } = o..

    [javascript] ES6 순회와 이터러블/이터레이터 프로토콜

    1. 이터러블과 함수형 프로그래밍 최근 javascript 함수형 프로그래밍 을 공부하면서 알게 된 ES6 순회와 이터러블/이터레이터 프로토콜의 관계에 대해 공부하게 되었습니다. 제 생각으로는 함수형 프로그래밍에서 이터러블/이터레이터 프로토콜은 핵심적인 개념이라고 생각합니다. 생각보다 간단한 원리에서 시작한 개념이 함수형 프로그래밍에서 아주 요긴하게 쓰입니다. 본 게시글은 타 블로그 및 MDN에서 참조한 내용으로 작성되었습니다. Iteration protocols - JavaScript | MDN ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, protocols(표현법들)도 추가되었습니다. 이 protocol 은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구..

    [javascript] ES6 구조분해 할당 총 정리

    구조분해 (Destructuring assignment) 최근 자바스크립트 함수형 프로그래밍을 공부를 하다 구조분해 및 iterator 개념이 조금 부족하여 따로 정리하여 작성합니다. 이번 게시글에서는 구조분해 만 다루고 다음 게시글에서 iterator 를 다뤄보도록 하겠습니다. 1. 문법 구조분해의 기본 문법은 아래와 같습니다. const [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 const [c, d, ...rest] = [1, 2, 3, 4, 5, 6, 7]; console.log(c); // 1 console.log(d); // 2 console.log(rest); // [3, 4, 5, 6, 7] const { e, f } = { e..

    [javascript] 일반 함수와 화살표 함수의 차이 (feat. ES6)

    항상 일반 함수와 화살표 함수의 정확한 차이점을 지나쳐 왔습니다. 단순하게 화살표 함수(Arrow function)는 ES6에 새로 나온 문법인 것으로만 인식한 상태로 개발했지만 정확히 알고 적절하게 활용한다면 더욱 깔끔하고 디버깅이 편한 코드를 작성할 수 있을 것 같아서 따로 정리하게 되었습니다. Q . function 과 () => {} (화살표 함수)의 차이점이 무엇일까요? A : "바인딩되는 this가 다릅니다." 틀린 답변은 아니지만, 정확히 어떻게 this가 다를까요? 말 뜻대로 생각했을 때, 아래 코드처럼 생각할지도 모르겠습니다. // 서로 다른 값이 출력될 것? function normalFunc() { console.log(this); } const arrowFunc = () => { c..

    [javascript] Primitive Type(원시 타입) vs Reference Type(참조 타입)

    자바스크립트의 자료형은 크게 원시 타입과 참조 타입으로 나뉩니다. 원시 타입 (Primitive Type) 원시 타입은 모두 하나의 값을 담고 있습니다. - 문자(string) - 숫자(number) - bigint - 불리언(boolean) - null - undefined - 심볼(symbol) => ES6부터 추가된 타입 총 일곱 가지 입니다. 원시 자료형은 값 자체에 대한 변경이 불가능(immutable) 하지만, 변수에 데이터를 재할당할 수 있습니다. 하나의 메모리에 하나의 데이터를 보관합니다. 변수를 재할당 해도 변수의 항당 값에 영향을 주지 않습니다. let myString = 'goodNews'; myString = 'badNews'; // 재할당 가능 myString[0] = 'B'; /..

    [javascript] 콜스택/메모리힙 구조, 데이터 저장/참조 원리

    콜 스택, 메모리 힙이란? 자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있습니다. 가장 유명한 것이 구글의 V8 Engine입니다. 자바스크립트는 단일 스레드 (sigle thread) 프로그래밍 언어인데, 이 의미는 Call Stack이 하나 라는 이야기입니다. 즉 멀티가 되지 않고, 하나씩 하나씩 처리한다는 의미입니다. 콜 스택(Call Stack) 원시 타입(숫자 등) 데이터가 저장된다. 실행 콘텍스트(Execution Context)를 통해 1) 변수 식별자(이름) 저장, 2) 스코프 체인 및 this 관리, 3) 코드 실행 순서 관리 등을 수행. *실행 컨텍스트의 상세 구조 및 원리는 이 글의 범위를 넘어가므로 다루지 않습니다. 메모리 힙(Memory Heap)..