Javascript12 ECMAScript 2016(ES7) ~ ECMAScript 2020(ES11) ECMAScript 2015, ES6는 이미 많은 곳에서 사용되고 있는 만큼, 그 이후 버전인 ES7부터 올해 발표될 버전인 ES11까지 어떤 기능이 추가되었고, 변화해 왔는지 살펴보도록 하겠습니다. tc39/proposals/finished-proposals에 따른 Proposals와 출시 연도를 살펴보면 아래와 같습니다. Proposals TC39 meeting notes Expected Publication Year Array.prototype.includes November 2015 2016 Exponentiation operator January 2016 2016 Object.values/Object.entries March 2016 2017 String padding May 2016 2017 .. 2020. 11. 15. ECMAScript 2020 aka ES11 2015년 6월 처음 ES6가 등장한 이후, 매년 6월 새로운 버전의 ECMAScript 명세가 발표되고 있습니다. 올해에는 ECMAScript 2020, ES11가 발표 예정입니다. TC39의 Stage 4(Finished Proposals)를 기반으로 어떤 기능들이 새롭게 추가되는지 알아보도록 하겠습니다. TC39? TC39는 Technical Committee 39의 약자로, ECMA-262(ECMAScript 표준 기술 규격) 명세를 관리하는 위원회입니다. Mozilla, Google, Apple, Microsoft 등의 메이저 브라우저 벤더사와 Facebook, Twitter 등 표준을 올바르게 구현해야 할 책임을 갖고 있으며, 언어 표준의 변화에 직접적으로 영향을 받는 단체들이 여기에 속해 있.. 2020. 11. 15. Prototype Chain 자바스크립트에는 객체를 상속하기 위해서 프로토타입 체인을 이용합니다. 프로토타입 체인이란 객체의 생성 과정에서 모태가 되는 프로토타입과의 연결고리가 이어져서, 상위 프로토타입으로 연속해서 이어지는 관계를 의미합니다. 그리고 이 연결고리 역할을 하는 것이 이전 글에서 설명했던 Prototype Link입니다. 모든 객체가 가지고 있는 속성인 _proto_가 상위 Prototype Object를 가리키고 있는 것입니다. 개념 자체는 어렵지 않습니다. var Foo = function() {}; Foo.prototype.hello = function() { console.log("hello") }; var foo1 = new Foo(); var foo2 = new Foo(); foo1.hello(); foo2.. 2020. 11. 15. Prototype ※이 글을 이해하기 위해 자바스크립트와 객체지향, 그리고 자바스크립트 객체 생성 방법에 대한 지식이 필요합니다. 자바스크립트는 프로토타입 기반 객체지향 언어입니다. 프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 종류로, 클래스 기반 언어에서 상속을 사용하는 것과 달리 객체의 원형(프로토타입)을 복제(Cloning)하여 객체를 확장합니다. 클래스리스(Class-less), 프로토타입 지향 혹은 인스턴스 기반 프로그래밍이라고도 부릅니다. 자바스크립트 외에도 Perl이나 R 등이 프로토타입 기반 언어에 속합니다. 자바스크립트의 새로운 버전인 ECMA2015에서 드디어 class 키워드를 도입하였습니다. 하지만 내부적으로는 여전히 프로토타입 기반으로 동작합니다. 프로토타입 프로토타입(prototype)이.. 2020. 11. 15. [Javascript] Debounce & Throttle 자바스크립트 개발에 있어서 이벤트는 빠질 수 없는 요소입니다. 과장을 보태 자바스크립트 개발을 해 본 개발자 중에 이벤트 처리를 해 보지 않은 개발자는 없다고 말해도 과언이 아닐 것입니다. 디바운스(Debounce)와 스로틀(Throttle)은 이러한 이벤트를 제어하는 방법으로, 과도한 이벤트의 발생이 성능 저하를 초래하지 않도록 하기 위해 사용합니다. 대표적으로 디바운스와 스로틀을 이용하여 이벤트 발생을 제어하는 기능은 아래와 같습니다. 스크롤 휠을 이용한 지도 확대/축소 검색어 입력시 자동완성 혹은 연관검색어 노출 피드 방식의 데이터 노출 (스크롤링을 통한 데이터 노출) 이벤트 오버클럭(Overclock - 과도한 이벤트 발생)은 리소스 사용량을 과도하게 증가시키기 때문에 성능 문제를 야기하고 사용자.. 2020. 10. 21. [Javascript] 자바스크립트에서 메모리 누수의 4가지 형태 이전 글에서 Closure를 다루면서 메모리 누수에 대해 언급한 바가 있습니다. 이 글에서는 자바스크립트에서 발생하는 4가지 형태의 메모리 누수를 살펴보고, 이러한 코드를 어떻게 제거할 수 있는지 알아보도록 하겠습니다. 자바스크립트에서 메모리 누수가 발생하는 경우는 크게 4가지로 아래와 같습니다. 우발적으로 생성된 전역 변수 잊혀진 타이머 또는 콜백 함수 DOM 외부에서 참조 특정한 경우의 Closure 각각 경우에 대해 살펴보기에 앞서, 자바스크립트에서 메모리를 어떻게 관리하는지 알아두는 것이 좋습니다. 자바스크립트는 자바와 마찬가지로 Garbage Collected 언어입니다. 즉, 개발자가 메모리 관리에 있어 신경을 덜 쓰더라도, GC(Garbage Collector)가 주기적으로 할당된 메모리를 .. 2020. 10. 21. [Javascript] Closure 1) 클로저란? 함수가 선언된 렉시컬 스코프를 기억해서, 함수가 스코프 밖에서 실행되어도 해당 스코프에 접근할 수 있도록 해주는 것을 클로저라고 말합니다. 함수 안에 함수가 있는 형태로 외부(outer) 함수가 실행 후 종료되어도 내부(inner) 함수에서 outer 함수의 지역변수를 참조할 수 있는 것이 특징입니다. 더 정확히 말하자면 outer 함수는 종료된다고 할 지라도 inner 함수가 실행되는 상태이면 outer 함수는 닫히지 못합니다. 클로저는 일반적으로 아래와 같은 조건을 충족합니다. 내부 함수는 익명 함수로, 외부 함수의 return 값으로 사용 반환된 내부 함수는 외부 함수의 실행컨텍스트에서 실행됨 내부 함수에서 사용되는 변수는 외부 함수의 변수 스코프에 있어야 함 코드를 예로 들어 자세.. 2020. 10. 21. [Javascript] 실행 컨텍스트 1) 실행 컨텍스트(Execution Context)란? ECMAScript 스펙은 실행 컨텍스트를 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의합니다. 즉, 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 할 수 있는데, 추상적인 개념이다 보니 확 와 닿지는 않습니다. 좀 더 단순하게 말하자면, 자바스크립트는 내부적으로 하나의 콜 스택을 가지는데, 이 콜 스택 내에 쌓이는 함수에 대한 정보를 실행 컨텍스트라고 합니다. 여기서 쌓이는 함수, 즉 실행 가능한 코드는 전역 코드 : 전역 영역에 존재하는 코드 => 전역 실행 컨텍스트 Eval 코드 : eval함수로 실행되는 코드 함수 코드 : 함수 내에 존재하는 코드 => 함수 실행 컨텍스트 를 말합니다. 그러나 eval 코드는 사용을 .. 2020. 10. 21. [Javascript] Scope 앞선 글에서 함수 레벨 스코프, 블록 레벨 스코프라는 단어가 사용되었는데, 이 글에서는 여기서 말하는 스코프란 무엇인지에 대해 다루어보도록 하겠습니다. (1) 스코프란? 스코프란 유효 범위를 의미하는 단어로, 변수 및 매개변수의 접근성과 생존기간을 말합니다. 스코프는 자바스크립트뿐만 아니라 대부분의 프로그래밍 언어의 주요 개념이므로, 개념을 잘 이해하고 있어야 합니다. (2) 전역 스코프 전역 스코프는 자바스크립트에서 가장 바깥 범위(함수 내부에 포함되지 않은), 즉 window 객체(Node.js에서는 global 객체)에 포함된 객체가 가지는 스코프를 의미합니다. 스크립트 내 어느 곳에서든 참조됩니다. 지난 글에서 다루었듯 전역 스코프를 만드는 일은 최대한 지양해야 합니다. ([requireJS] 전.. 2020. 10. 21. [ES6+] var vs let vs const prerequisite javascript scope javascript closure javascript hoisting Javascript에서 변수를 선언할 때 var를 사용하는 것은 익숙한 일이지만, let이나 const는 조금 낯설게 느껴집니다. 두 키워드가 ES6에서 새롭게 추가되었기 때문이라고 생각되는데, 이 글에서는 세 가지 키워드가 어떻게 다른지, 언제 어떤 키워드를 사용해야 하는지 알아보도록 하겠습니다. (1) var var는 아래와 같은 특징을 가지고 있습니다. 함수 레벨 스코프 변수의 유효 범위가 블록({}) 단위가 아닌 함수 단위입니다. 전역 함수 외부에서 변수를 생성하게 되면 이는 전부 전역 변수로 관리됩니다. [함수 레벨 스코프] var i, x, y; for (i = 0; i .. 2020. 10. 21. 이전 1 2 다음
