Qvil Blog

Copycopy code to clipboard
1function varTest() {
2  var x = 31;
3  if (true) {
4    var x = 71; // same variable!
5    console.log(x); // 71
6  }
7  console.log(x); // 71
8}
9
10function letTest() {
11  let x = 31;
12  if (true) {
13    let x = 71; // different variable
14    console.log(x); // 71
15  }
16  console.log(x); // 31
17}

Copycopy code to clipboard
1const MY_NUMBER = 1;
2MY_NUMBER = 2; // Assignment Error
3const MY_NUMBER = 2; // Declare Error

Copycopy code to clipboard
1class MyClass {} // Class 선언
2let MyClass = class {}; // Class 표현식

Copycopy code to clipboard
1var p = new Polygon(); // ReferenceError
2
3class Polygon {}

Copycopy code to clipboard
1console.log('string text line 1
2string text line 2'); // Error
3console.log(`string text line 1
4string text line 2`); // OK

Copycopy code to clipboard
1let name = "Taesu Hyeon";
2console.log("My name is " + name); // My name is Taesu Hyeon

Copycopy code to clipboard
1let name = "Taesu Hyeon";
2console.log(`My name is ${name}`); // My name is Taesu Hyeon

Copycopy code to clipboard
1let callback;
2callback = callback || function() {}; // ok
3callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments
4callback = callback || (() => {});    // ok

Copycopy code to clipboard
1(param1, param2, …, paramN) => { statements }
2(param1, param2, …, paramN) => expression
3          // 다음과 동일함:  => { return expression; }
4
5// 매개변수가 하나뿐인 경우 괄호는 선택사항:
6(singleParam) => { statements }
7singleParam => { statements }
8
9// 매개변수가 없는 함수는 괄호가 필요:
10() => { statements }

Copycopy code to clipboard
1// 객체 리터럴 식을 반환하는 본문(body)을 괄호 속에 넣음:
2params => ({foo: bar})
3
4// 나머지 매개변수 및 기본 매개변수가 지원됨
5(param1, param2, ...rest) => { statements }
6(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
7
8// 매개변수 목록 내 비구조화도 지원됨
9var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
10f();  // 6

Copycopy code to clipboard
1// ES5
2var myFunction = {
3  funcLog: function (msg) {
4    return msg;
5  },
6};
7// ES6
8let myFunction = {
9  funcLog: (msg) => msg,
10};
11
12myFunction.funcLog("hi"); // hi

Copycopy code to clipboard
1import name from "module-name"; // export default로 export한 멤버를 name에 받음.
2import * as name from "module-name"; // export되는 모든 멤버를 name에 받음.
3import { member } from "module-name"; // export된 멤버 member를 member로 받음.
4import { member as alias } from "module-name"; // export된 멤버 member를 alias로 받음.
5import { member1 , member2 } from "module-name";
6import { member1 , member2 as alias2 , [...] } from "module-name";
7import defaultMember, { member [ , [...] ] } from "module-name";
8import defaultMember, * as alias from "module-name";
9import defaultMember from "module-name";
10import "module-name"; // import만 하면 되는 경우 ex) import "main.css";

Copycopy code to clipboard
1export { name1, name2, …, nameN };
2export { variable1 as name1, variable2 as name2, …, nameN };
3export let name1, name2, …, nameN; // 또는 var
4export let name1 = …, name2 = …, …, nameN; // 또는 var, const
5
6export default expression;
7export default function (…) { … } // 또는 class, function*
8export default function name1(…) { … } // 또는 class, function*
9export { name1 as default, … };
10
11export * from …;
12export { name1, name2, …, nameN } from …;
13export { import1 as name1, import2 as name2, …, nameN } from …;

Copycopy code to clipboard
1var arrayOne = [2];
2var arrayTwo = [1].concat(arrayOne, [3]); // ES5
3var arrayTwo = [1, ...arrayOne, 3]; // ES6
4console.log(arrayTwo); // [1, 2, 3]

Copycopy code to clipboard
1let objOne = { one: 1 };
2let objTwo = Object.assign({}, objOne); // ES5
3let objTwo = { ...objOne, two: 2 }; // ES6
4console.log(objTwo); // Object {one: 1, two: 2}