ES6 - redutan/redutan.github.io GitHub Wiki

๋ฆฌํ„ฐ๋Ÿด, ๋ณ€์ˆ˜, ์ƒ์ˆ˜, ๋ฐ์ดํ„ฐ ํƒ€์ž…

๋ณ€์ˆ˜(es6)

let currentTempC = 22;
currentTempC = 23;

let targetTempC, root1 = "conrerence_room_a", room2 = "lobby";

์ƒ์ˆ˜(es6)

// ์ƒ์ˆ˜
const ZERO = 0;
const ROOM_TEMP_C = 21.5, MAX_TEMP_C = 30;

๋ฆฌํ„ฐ๋Ÿด

// ๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด
let room1 = "conference_room_a";
// ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด
let obj = {};
// ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด
let objs = []; 

์›์‹œํƒ€์ž…(primitive)๊ณผ ๊ฐ์ฒด(ojbect) ํƒ€์ž…

์›์‹œํƒ€์ž…

  • ๋ถˆ๋ณ€, call by value

  • number(Double)

  • string

  • boolean

  • null

  • undefined

  • Symbol

๊ฐ์ฒด(object)

  • Array
  • Date
  • RegExp
  • Map, WeakMap (since es6)
  • Set, WeakSet (since es6)

์ˆซ์ž

let count = 10;
const = blue = 0x0000ff;    // 16์ง„์ˆ˜
const = umask = 0o0022;     //  8์ง„์ˆ˜
const rommTemp = 21.5       // 10์ง„์ˆ˜
const c = 3.0e6;            // ์ง€์ˆ˜ (3.0 * 10^6 = 3,000,000)
const e = -1.6e-19          // ์ง€์ˆ˜ (-1.6 * 10^-19 = 0.00000000000000000016)
const inf = Infinity;
const ninf = -Infinity;
const nam = NaN;

Number

const small = Number.EPSILON;             // ๋ถ€๋™์†Œ์ˆ˜์  ์—ฐ์‚ฐ ๊ทผ์‚ฌ์น˜ ๋น„๊ต๋ฅผ ์œ„ํ•จ
const maxInt = Number.MAX_SAFE_INTEGER;
const max = Number.MAX_VALUE;
const minInt = Number.MIN_SAFE_INTEGER;
const min = Number.MIN_VALUE;
const nInf = Number.NEGATIVE_INFINITY;    // -Infinity
const nan = Number.NaN;                   // NaN
const inf = Number.POSITIVE_INFINITY;     / Infinity

String

escape

const dialog1 = "He looked up and said \"don't do that!\" to Max.";
const dialog2 = 'He looked up and said "don\'t do that!" to Max.';
const s = "In JavaScript, use \\ as an escape character in strings.";

template(es6)

let currentTemp = 19.5;
const message = `The current temperature is ${currentTemp}\u00b0C`;

multiline(es6)

const multiline = 
`
line1
line2
`

String, Number

const result1 = 3 + '30';    // '330'
const result2 = 3 * '30';    // 90

Symbol

const RED = Symbol('The color of a sunset!');
const ORANGE = Symbol('The color of a sunset!');
RED !== ORANGE  // true; ์‹ฌ๋ณผ์€ ์„œ๋กœ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

null, undefined

let currentTemp;           // undefined
const targetTemp = null;   // null
currentTemp = 19.5;        // 19.5
currentTemp = undefined;   // undefined. ํ• ๋‹น๋œ ๊ฐ’์— ๋‹ค์‹œ undefined๋ฅผ ์“ฐ๋Š” ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ. ์ด๋ จ ๊ฒฝ์šฐ๋ผ๋ฉด null์„ ์‚ฌ์šฉํ•˜๊ธธ ๊ถŒ์žฅ

Object

const sam3 = {
    name: 'Sam',
    classification: {
        kingdom: 'Anamalia',
        phylum: 'Chordata',
        class: 'Mamalia',
        family: 'Felidae',
    },
};

// ์ ‘๊ทผ
sam3.classification.family;
sam3["classification"].family;
sam3.classification["family"];
sam3["classification"]["family"];

// ์†์„ฑ ์ œ๊ฑฐ
delete sam3.classification

๋ฐ์ดํ„ฐ ํƒ€์ž… ๋ณ€ํ™˜

To number

const numStr = "33.3";
const num = Number(numStr);    // 33.3
const a = parseInt("16 volts", 10);   // 16
const b = parseInt("3a", 16);         // 58
const c = parseFloat("15.5 kph");     // 15.5
const d = new Date();
const ts = d.valueOf();         // timestamp milliseconds

To string

const n = 33.5             // 33.5
const s = n.toString();    // "33.5"
const arr = [1, true, "hello"];
arr.toString();            // "1,true,hello";

To boolean

const n = 0;             // false value
const b1 = !!n;          // false
const b2 = Boolean(n);   // false

์—ฐ์‚ฐ์ž

๋น„๊ต ์—ฐ์‚ฐ์ž

  • == : ๋™๋“ฑํ•จ(loose equality)
  • === : ์ผ์น˜ํ•จ(strict equality)
const n = 5;
const s = "5";                
n === s;            // false(ํƒ€์ž…์ด ๋‹ค๋ฆ„)
n !== s;            // true
n === Number(s);    // true
n !== Number(s);    // false
n == s              // true (๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ)
n != s              // false(๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ)

const a = { name: "an object" };
const b = { name: "an object" };
a === b;            // false(๊ฐ์ฒด๋Š” ํ•ญ์ƒ ๋‹ค๋ฆ„)
a !== b;            // true
a == b;             // false(๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ)
a != b;             // true (๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ)

์ˆซ์ž ๋น„๊ต

let n = 0;
while(true) {
    n += 0.1;
    console.log(n);
    if (n === 0.3) break;
}
console.log(`Stopped at ${n}`);

output : ๋ฌดํ•œ๋ฃจํ”„๊ฐ€ ๋ˆ๋‹ค.

let n = 0;
while(true) {
    n += 0.1;
    if (Math.abs(n - 0.3) < Number.EPSILON) break;
}
console.log(`Stopped at ${n}`);

ouput : Stopped at 0.30000000000000004

๋…ผ๋ฆฌ ์—ฐ์‚ฐ์ž

๊ฑฐ์ง“ ๊ฐ™์€ ๊ฐ’

  • undefined
  • null
  • false
  • 0
  • NaN
  • ""(๋นˆ ๋ฌธ์ž์—ด)

์ฐธ ๊ฐ™์€ ๊ฐ’

  • ๋ชจ๋“  ๊ฐ์ฒด, valueOf()๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ–ˆ์„ ๋•Œ false๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฐ์ฒด๋„ ์ฐธ ๊ฐ™์€ ๊ฐ’์— ์†ํ•ฉ๋‹ˆ๋‹ค.
  • ๋ฐฐ์—ด, ๋นˆ ๋ฐฐ์—ด๋„ ์ฐธ ๊ฐ™์€ ๊ฐ’์— ์†ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ [](๋นˆ ๋ฐฐ์—ด ๋ฆฌํ„ฐ๋Ÿด)๋Š” ๊ฑฐ์ง“ ๊ฐ™์€ ๊ฐ’
  • ๊ณต๋ฐฑ๋งŒ ์žˆ๋Š” ๋ฌธ์ž์—ด(" " ๋“ฑ)
  • ๋ฌธ์ž์—ด "false" !!!

boolean ์—ฐ์‚ฐ์ž

Default pattern

const options = suppliedOptions || { name: "Default" };

์‰ผํ‘œ ์—ฐ์‚ฐ์ž.

let x = 0, y = 10, z;
z = (x++, y++);                      // z = x, z = y
consol.log(`${x}, ${y}, ${z}`);      // 1, 11, 10

์—ฐ์‚ฐ์ž ๊ทธ๋ฃน

typeof

typeof undefined       // "undefined"
typeof null            // "object" !!!
typeof {}              // "object"
typeof []              // "object" !!!
typeof true            // "boolean"
typeof 1               // "number"
typeof ""              // "string"
typeof Symbol()        // "symbol"
typeof function() {}   // "function"

ํ•ด์ฒด ํ• ๋‹น(destructuring assignment)

const obj = { b: 2, c: 3, d: 4 };

// ํ•ด์ฒด ํ• ๋‹น
const {a, b, c} = obj;
console.log(a);    // undefined
console.log(b);    // 2
console.log(c);    // 3
console.log(d);    // ReferenceError: "d"๋Š” ์ •์˜๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค.
const arr = [1, 2, 3, 4, 5];

let [x, y, ...rest] = arr;
console.log(x);    // 1
console.log(y);    // 2
console.log(rest); // [3, 4, 5]
let a = 5, b = 10;
[a, b] = [b, a]
console.log(a);    // 10
console.log(b);    // 5

ํ•จ์ˆ˜

ํ•จ์ˆ˜์™€ ๋งค๊ฐœ๋ณ€์ˆ˜

call by value

function f(x) {
    console.log(`f ๋‚ด๋ถ€: x = ${x}`);
    x = 5;
    console.log(`f ๋‚ด๋ถ€: x = ${x} (ํ• ๋‹น ํ›„)`);
}

let x = 3;
console.log(`f๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ „: x = ${x}`);
f(x)
console.log(`f๋ฅผ ํ˜ธ์ถœํ•œ ๋‹ค์Œ: x = ${x}`);

๊ฒฐ๊ณผ

f๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ „: x = 3
f ๋‚ด๋ถ€: x = 3
f ๋‚ด๋ถ€: x = 5 (ํ• ๋‹น ํ›„)
f๋ฅผ ํ˜ธ์ถœํ•œ ๋‹ค์Œ: x = 3

call by reference

function f(o) {
    o.message = `f ์•ˆ์—์„œ ์ˆ˜์ •ํ•จ (์ด์ „ ๊ฐ’: '${o.messsage}')`;
}
let o = {
    message: "์ดˆ๊ธฐ ๊ฐ’"
};
console.log(`f๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ „: o.message = "${o.message}"`);
f(o);
console.log(`f๋ฅผ ํ˜ธ์ถœํ•œ ๋‹ค์Œ: o.message = "${o.message}"`);

๊ฒฐ๊ณผ

f๋ฅผ ํ˜ธ์ถœํ•˜๊ธฐ ์ „: o.message = "์ดˆ๊ธฐ๊ฐ’"
f๋ฅผ ํ˜ธ์ถœํ•œ ๋‹ค์Œ: o.message = "f ์•ˆ์—์„œ ์ˆ˜์ •ํ•จ (์ด์ „๊ฐ’: '์ดˆ๊ธฐ ๊ฐ’');

๋งค๊ฐœ๋ณ€์ˆ˜ ํ•ด์ œ

๊ฐ์ฒด

function getSentence({ subject, verb, object }) {
    return `${subject} ${verb} ${object}`;
}

const o = {
    subject: "I",
    verb: "love",
    object: "JavaScript",
}

getSentence(o);    // "I love JavaScript"

๋ฐฐ์—ด

function getSentence([ subject, verb, object ]) {
    return `${subject} ${verb} ${object}`;
}

const arr = ["I", "love", "JavaScript"];
getSentence(arr);    // "I love JavaScript"

ํ™•์‚ฐ์—ฐ์‚ฐ์ž

function addPrefix(prefix, ...words) {
    // ๋‚˜์ค‘์— ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.
    const prefixedWords = [];
    for(let i = 0; i < words.length; i++) {
        prefixedWords[i] = prefix + words[i];
    }
    return prefixedWords;
}

addPrefix("con", "vers", "vex");    // ["converse", "convex"]

๋งค๊ฐœ๋ณ€์ˆ˜ ๊ธฐ๋ณธ๊ฐ’

function f(a, b = "default", c = 3) {
    return `${a} - ${b} = ${c}`;
}

f(5, 6, 7);    // "5 - 6 - 7"
f(5, 6);       // "5 - 6 - 3"
f(5);          // "5 - default - 3"
f();           // "undefined - default - 3"

๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ์ธ ํ•จ์ˆ˜

const o = {
    name: "Wallace",
    es5Method: function() { return "Woof!"; },
    es6Method() { return "Woof!"; },
};