beomy

export 파일이나 모듈안의 함수나, 객체를 export 하는데 사용됩니다. ES6에서 정의된 API로, 브라우저에서 기본으로 제공되지 않기 때문에, Traceurur Complier, Babel, Rollup, Webpack과 같은 별로의 트랜스파일러와 함께 사용되어야 합니다. 1. 문법 export { name1, name2, ..., nameN }; export { variable1 as name1, variable2 as name2, ..., nameN }; export let name1, name2, ..., nameN; // 또는 var export let name1 = ..., name2 = ..., ..., nameN; // 또는 var, const export expression; ex..

for ... of 문 for ... of 문은 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체등)를 반복하는 문법입니다. 1. 문법 for (variable of iterable) { statement } variable각 반복에 서로 다른 속성값이 variable에 저장됩니다. iterable반복되는 열거가능(enumerable)한 속성이 있는 객체 2. 예시 Array 반복 let iterable = [10, 20, 30]; for (let value of iterable) { console.log(value); } 상수를 사용해야 할 경우 let 대신 const를 사용할 수 있습니다. let iterable = [10, 20, 30]; for..

화살표 함수(Arrow function) 화살표 함수 표현은 일반 함수 표현보다 간결하게 함수를 표현할 수 있습니다.또한, this, arguments, super, new.target을 바인딩하지 않습니다.화살표 함수는 익명 함수이기 때문에, 메소드가 아닌 함수에 사용하는 것이 적절합니다. 또한 익명 함수이기 때문에 생성자로 사용할 수 없습니다. 1. 문법기본 문법 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // 다음과 동일함: => { return expression; } // 매개변수가 하나뿐인 경우 괄호는 선택사항: (singleParam) => { statements } single..

구조분해 할당(Destructuring assignment) 1. 문법구조분해의 기본 문법은 아래의 코드와 같습니다. var a, b, rest; [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 [a, b, ...rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4, 5] ({a, b} = {a:1, b:2}); console.log(a); // 1 console.log(b); // 2 구조분해 할당의 좌변은 값을 넣을 변수, 우변에는 값이 되는 변수가 됩니다. var x = [1, 2, 3, 4, 5]; var [y, z] = x;..

기본 매개변수(Default parameter)default parameter은 함수에 전달된 파라미터의 값이 undefined이거나 전달된 값이 없을 때, 초기화 설정된 값을 말합니다.1. 문법기본 문법은 아래와 같습니다.function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { statements}default parameter를 사용하지 않는다면, 밑의 코드와 같이 코딩해야 합니다.function multiply(a, b) { b = (typeof b !== 'undefined') ? b : 1; return a * b;}console.log(multiply(5, 2)); // 10console..

나머지 매개변수(Rest parameter)rest parameter은 이름을 정주지 않은 파라미터의 배열을 말합니다.1. 문법var test = function(a, b, ...theArgs) { console.log(a); console.log(b); console.log(theArgs);}test(1, 2, 3, 4, 5);rest parameter은 ...으로 시작되는 마지막 매개변수를 말합니다. 함수에 실제로 전달되는 인수는 제외됩니다. (1과 2는 rest parameter에서 제외)2. arguments와 rest parameter의 차이rest parameter은 이름을 정해주지 않은 파라미터를 말합니다. 반면에 arguments는 함수로 전달되는 모든 파라미터를 말합니다...

ClassES6에서 class 라는 문법이 추가 되었고, 기존의 prototype 기반으로 클래스를 만드는 것보다 명료하게 클래스를 만들 수 있게 되었습니다. 1. 클래스 정의ES6에서 클래스는 특별한 함수입니다. 그렇기 때문에, 함수와 동일하게 클래스 선언(Class declarations)과 클래스 표현(Class expressions)으로 클래스를 만들 수 있습니다 ([자바스크립트] 함수(Function), 즉시실행함수(Immediately-invoked function expression) 참고) 클래스 선언(Class declarations) class Polygon { constructor(height, width) { this.height = height; this.width = width;..

let ES6(ECMA Script 6)에 새롭게 추가된 블록 레벨 스코프 변수 선언 방법입니다. 1. 문법 let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]]; var1, var2, ..., varN변수 이름 value1, value2, ..., valueN변수의 초기 값 2. var과 let의 스코프 비교var은 함수 레벨 스코프를, let은 블록 레벨 스코프를 가집니다. ([자바스크립트] 유효범위(Scope)와 호이스팅(Hoisting) 참고) var function varTest() { if (true) { var x = 2; console.log(x); //2 } console.log(x); //2 } varTest(); if문 안..

Promise Promise 패턴은 ES6(ECMA Script 6)에 정식으로 포함되었습니다.비동기프로래밍을 할 때, 콜백이 중첩되는 경우를 흔히 볼 수 있습니다. 중첩된 콜백은 화면 오른쪽을 뚫고 나갈 듯이 확장이 되고, callback1(1, function () { callback2(2, function () { callback3(3, function () { callback4(4, function () { callback5(5, function() { console.log("콜백지옥...!"); }); }); }); }); }); 이러한 형태의 콜백지옥이 탄생하게 됩니다. Promise를 사용하여 콜백 지옥을 해결할 수 있습니다. Promise를 console.dir로 찍어본 결과는 밑에 그림과..