beomy

비동기 프로그래밍으로 발생하는 콜백지옥을 해결하는 방법으로 ES6에서 추가된 Promise를 사용하는 방법이 있습니다. ([자바스크립트] 비동기프로그래밍 - 콜백함수(Callback function) 참고) 이번 포스트에서는 비동기 프로그래밍을 처리할 수 있는 방법으로 async와 await에 대해 이야기 하려 합니다. 1. 문법 async function name([param[, param[, ... param]]]) { statements } name: 함수 이름 param: 함수에 전달되는 인자들의 이름 statements: 함수 본문 리턴 값: async 함수의 return 값으로 resolve 된 Promise 객체 혹은 async 함수에서 예외가 발생하였다면 발생 된 예외로 reject 된 P..

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..

정규식(Regular Expressions) 정규식은 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴입니다. 코드를 간략하게 만들 수 있으나, 가독성이 떨어질 수 있습니다. RegExp의 exec, test 메소드와 String의 match, replace, search, split 메소드와 함께 사용됩니다. 1. 정규식 두가지 방법으로 정규식을 만들 수 있습니다. 정규식 패턴이 계속 지속될 경우 var re = /ab+c/; 정규식이 계속 지속 될 경우 위와 같은 리터럴 방법을 사용하는 것이 좋습니다. 정규식 패턴이 변경되는 경우 var re = new RegExp("ab+c"); 정규식 패턴이 바뀌는 경우, 생성자 함수를 사용하여 동적으로 정규식을 만들 수 있습니다. 2. 정규식 패턴 만들기 정..

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;..

getter getter는 객체의 프로퍼티를 가져오는 함수를 말합니다. 1. 문법 {get prop() { ... } } {get [expression]() { ... } } 파라미터prop프로퍼티를 가져올 함수 이름 expressionES6에서 추가되었습니다. 계산 되어지는 프로퍼티 이름을 위해 expression이 추가되었습니다. 밑에서 코드로 설명드리겠습니다. 2. 설명동적으로 계산이 필요한 프로퍼티 값을 가져와야 할 때, getter를 사용한다면 별도의 함수를 만들 필요가 없습니다. getter를 사용할 때 3가지에 유의해야 합니다.1. 식별자로 숫자와 문자를 모두 사용할 수 있습니다.2. 파라미터가 없어야 합니다.3. 리터럴 객체의 같은 이름의 get이나 동일한 이름의 프로퍼티를 가질 수 없습니..