비동기 프로그래밍으로 발생하는 콜백지옥을 해결하는 방법으로 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..
구조분해 할당(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;..
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이나 동일한 이름의 프로퍼티를 가질 수 없습니..
strict mode strict 모드는 ES5(ECMA Script 5)에 추가된 키워드입니다.strict 모드는 자바스크립트가 묵인했던 에러들의 에러 메시지를 발생시킵니다. 엄격하게 문법 검사를 하겠다.. 로 이해하면 될 것 같습니다. 1. strict 모드 선언스크립트의 시작 혹은 함수의 시작 부분에 "use strict"(또는 'use strict')를 선언하면 strict 모드로 코드를 작성 할 수 있습니다. 스크립트에서 strict 선언 "use strict"; var v = "Hi! I'm a strict mode script!"; 함수에서 strict 선언function strict(){ // Function-level strict mode syntax 'use strict'; functi..