D3.js 를 사용하여 데이터 시각화하기 #1 Line Charts
2018-10-29
ECMAScript 2015(ES6) #1 추가된 기본 문법
2018-02-07
Explanation
ECMAScript 2015(ES6)에 추가된 기본 문법들을 간단한 코드를 통해 알아보려 합니다. (설명이 아닌 그냥 가볍게 훑어 볼 수 있는 코드입니다.)
|
1 2 3 4 5 6 7 8 |
var a = 'a'; var a = 'b'; console.log(a); // 'b' let a = 'a'; let a = 'b'; // SyntaxError |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var a = 'a'; if(true) { var a = 'b'; console.log(a); // 'b' } console.log(a); // 'b' let a = 'a'; if(true) { let a = 'b'; console.log(a); // 'b' } console.log(a); // 'a' |
|
1 2 3 4 5 6 7 8 |
let a = 'a'; a = 'b'; console.log(a); // 'b' const a = 'a'; a = 'b'; // TypeError |
|
1 2 3 4 5 6 7 |
const a = { a: 'a' } a.a = 'b'; console.log(a); // {a: 'b'} a = { b: 'b' }; // TypeError |
|
1 2 3 4 5 6 7 |
const a = (a = false) => { console.log(a); }; a(true); // true; a(); // false; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 펼침 연산자 let arr = [1, 2]; arr = [...arr, 3, 4, ...[5, 6]]; console.log(arr); // [1, 2, 3, 4, 5, 6] const sum = (a, b, c, d) => { return a+b+c+d; }; sum(...arr); // 10 // 나머지 파라미터 const arg = (a, b, ...arg) => { console.log(arg); }; arg(...arr); // [3, 4, 5, 6] |
|
1 2 3 4 5 6 7 8 |
let arr = [1, 2, 3, 4]; [a, b, c, d] = arr; console.log(b); // 2 [, , , d] = arr; console.log(d); // 4 |
|
1 2 3 4 |
let obj = { a: 'a', b: 'b' }; let {a, b} = obj console.log(b); // 'b' |
|
1 2 3 4 5 6 7 |
let a = (a) => { console.log(a); } // 한줄구문의 경우 {} 를 생략할 수 있다. let a = (a) => console.log(a); // 아규먼트가 하나인 경우 ()를 생략할 수 있다. let a = a => console.log(a); |
화살표 함수는 구문이 짧아진 것 이외에도 일반 함수와 this가 가르키는 오브제의 규칙이 다르며, new 키워드를 사용하여 객체 생성자로 사용할 수 없습니다.
|
1 2 3 4 5 6 7 |
let b = 'bbb'; let obj = { a: 'aaa', b }; console.log(obj); // {a: "aaa", b: "bbb"} |
|
1 2 3 4 5 |
let obj = { ['aa' + 'bb'] : 'ccc' }; console.log(obj); // {aabb: "ccc"} |
|
1 2 3 4 5 6 7 |
let obj = { sum(a, b) { return a + b; } }; console.log(obj.sum(1, 2)); // 3 |
