개발 메모리

제너레이터란? ES6에서 도입된 제너레이터(Generator) 함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현할 수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용된다. 제너레이터 함수는 일반 함수와 같이 함수의 코드 블록을 한 번에 실행하지 않고 일반 함수와는 다른 독특한 동작을 한다. 제너레이터는 함수 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재시작할 수 있는 특수한 함수이다. function* counter() { console.log('첫번째 호출'); yield 1; // 첫번째 호출 시에 이 지점까지 실행된다. console.log('두번째 호출'); yield 2; // 두번..

Symbol이란? 심볼(symbol)은 ES6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. Symbol의 생성 Symbol은 Symbol() 함수로 생성한다. Symbol() 함수는 호출될 때마다 Symbol 값을 생성한다. 이때 생성된 Symbol은 객체가 아니라 변경 불가능한 원시 타입의 값이다. // 심볼 mySymbol은 이름의 충돌 위험이 없는 유일한 프로퍼티 키 let mySymbol = Symbol(); console.log(mySymbol); // Symbol() console.log(typeof mySymbol); // symbol Symbol() 함..

프로미스(Promise)란? 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 여러 개의 비동기 처리를 한번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise)를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 동기식과 비동기식 처리 동기식 처리 모델(Synchronous processing model)은 직렬적으로 태스크(task)를 순서대로 실행하는데, 어떤 작업이 수행 중이면 다음 작업은 블로킹(blocking, 작업 중단) 상태로 대기하게 ..

모듈(Module) 모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 일반적으로 모듈은 파일 단위로 분리되어 있으며 애플리케이션은 필요에 따라 명시적으로 모듈을 로드하여 재사용한다. 모듈은 기능별로 분리되어 작성되므로 코드의 단위를 명확히 분리하여 애플리케이션을 구성할 수 있으며 재사용성이 좋아서 개발 효율성과 유지보수성을 높일 수 있다. C 언어는 #include, Java는 import 등 대부분의 프로그래밍 언어는 모듈 기능을 가지고 있지만 클라이언트 사이드 자바스크립트는 모듈 기능이 없다. 자바스크립트의 경우 파일마다 독립적인 파일 스코프를 갖지 않고 하나의 전역 객체(Global Object)를 공유한다. 즉, 자바스크립트 파일을 여러 개의 파일로 분리하여 sc..

클래스(Class) 자바스크립트는 프로토타입 기반(prototype-based) 객체지향 언어다. 프로토타입 기반 프로그래밍은 클래스가 필요없는(class-free) 객체지향 프로그래밍 스타일로 프로토타입 체인과 클로저 등으로 객체 지향 언어의 상속, 캡슐화(정보 은닉) 등의 개념을 구현할 수 있다. 하지만 클래스 기반 언어에 익숙한 프로그래머들은 프로토타입 기반 프로그래밍 방식이 혼란스러울 수 있으며 자바스크립트를 어렵게 느끼게하는 하나의 장벽처럼 인식되었다. ES6의 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 클래스 기반 언어에 익숙한 프로그래머가 보다 빠르게 학습할 수 있는 단순명료한 새로운 문법을 제시하고 있다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 객체지향 모델을 폐지하고..

템플릿 리터럴(Template literal) ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다. 일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시(\)로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다. 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 ..

매개변수 기본값 (Default Parameter value) 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만 그렇지 않은 경우에도 에러가 발생하지는 않는다. 함수는 매개변수의 개수와 인수의 개수를 체크하지 않는다. 인수가 부족한 경우, 매개변수의 값은 undefined이다. 따라서 매개변수에 적절한 인수가 전달되었는지 함수 내부에서 확인할 필요가 있다. function sum(x, y) { return x + y; } console.log(sum(1)); // NaN function sum(x, y) { // 매개변수의 값이 falsy value인 경우, 기본값을 할당한다. x = x || 0; y = y || 0; return x + y; } console.log(sum(1))..

다양한 함수 형태 함수 선언(function declaration) 가장 일반적인 방법은 function 키워드를 통해 함수를 선언하는 방식 // 함수 선언 function sayHi() { console.log('Hi!'); } 함수 표현식 (function expression) 자바스크립트에서 함수는 값으로 취급될 수도 있기 때문에 변수에 할당해서 함수를 선언할 수도 있다. // 함수 표현식 const sayHi = function () { console.log('Hi!'); }; 콜백(callback) 함수란 당장 실행되는 것이 아니라 추후에 특정 조건이 만족되었을 때 실행되는 함수를 말한다. // 변수에 할당해서 활용 const printJS = function () { console.log('J..

var ES5까지 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이었다. 하지만 아래와 같은 var 키워드의 특징 때문에 문제가 발생했고 ES6는 이러한 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였다. var 키워드 생략 허용 암묵적 전역 변수를 양산할 가능성이 크다. 함수 레벨 스코프(Function-level scope) 함수의 코드 블록만을 스코프로 인정한다. 함수 범위란 말 그대로 함수를 기준으로 범위를 구분한다는 뜻으로 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. 이는 전역 변수를 남발할 가능성을 높인다. 하지만..

이벤트(event)란? 이벤트란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미한다. 웹 페이지에 사용된 자바스크립트는 이렇게 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있으므로, 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 한다. 이벤트 타입(event type) 이벤트 타입은 발생한 이벤트의 종류를 나타내는 문자열로 이벤트 명이라고도 하며, 가장 많이 사용하는 키보드, 마우스, HTML DOM, Window 객체 등을 처리하는 이벤트가 폭넓게 제공되고 있다. /* HTML 문서의 특정 단락을 클릭하면 발생하는 이벤트를 처리 */ 이 문자열을 클릭해 보세요! 이벤트 명세(event specification) 예전에는 onload..