🌟 Sudal's gram

Syntax

ECMA μ‚°ν•˜ Task Group 쀑에 ν•˜λ‚˜μ˜ ECMA-262 (TC39) μ—μ„œ μœ μ§€ 및 κ°œμ„ κ΄€λ¦¬ λ˜λŠ” 뢀뢄이닀.
ECMA Script 와 ν˜Έν™˜ 및 ν™•μž₯λ˜λŠ” 라이브러리 ν‘œμ€€μ˜ κ°œλ°œμ΄λ‹€.
ISO 및 IEC JTC λ“±μ˜ ν‘œμ€€μ„ κ²Œμ‹œν•œλ‹€.

ECMAScript 6번째 ν‘œμ€€ μ—λ””μ…˜ 으둜 λ§Žμ€ 뢀뢄이 κ°œμ„  및 μΆ”κ°€ λ˜μ—ˆλ‹€.

Function

κΈ°μ‘΄ ν•¨μˆ˜ 선언식 (ES5) μ—μ„œ λ³€κ²½λœ 점

Example #1 : ES5

function foo() {
  /* statement */
}

Example #2 : ES6

var obj = {
  foo() {
    /* statement */
  },
  poo: () => {
    /* statement */
  }
}

obj.foo κ³Ό obj.poo λŠ” λ™μΌν•œ κΈ°λŠ₯을 ν•œλ‹€.

Arrows

ν™”μ‚΄ν‘œ ν•¨μˆ˜ ν‘œν˜„μ‹μ€ μΆ•μ•½ν˜• ν•¨μˆ˜ μž…λ‹ˆλ‹€.

Syntax

(param1, param2, ... , paramN) => { statements }

Parameters

  • statements
    • ν•¨μˆ˜μ˜ λ‚΄μš©

Example #1 : ES6

// λ§€κ°œλ³€μˆ˜κ°€ ν•˜λ‚˜ μ΄μƒμžˆλŠ” κ²½μš°λŠ” κ΄„ν˜Έκ°€ ν•„μš”
(param1, param2) => {
    return param1 + param2
};

// λ§€κ°œλ³€μˆ˜κ°€ ν•˜λ‚˜μΈ κ²½μš°μ—λŠ” κ΄„ν˜Έκ°€ ν•„μš” μ—†μŒ
param1 => {
    return param1 + 1
}

// λ§€κ°œλ³€μˆ˜κ°€ μ—†μ„κ²½μš°
() => {
    console.log('Hello World');
}

Example #2 : ES6

var list = [2, 4, 6, 8];

// Expression Block μ‚¬μš© μ•ˆν•¨ (ν‘œν˜„μ‹μ˜ κ²°κ³Όκ°€ λ°˜ν™˜λ¨)
var odd = list.map(value => value + 1); // [3, 5, 7, 9]

// Expression Block μ‚¬μš© (λΈ”λŸ­ λ‚΄λΆ€λ§Œ μ‹€ν–‰, λ°˜ν™˜κ°’μ„ μœ„ν•΄μ„œλŠ” return ν‘œν˜„μ‹μ„ λͺ…μ‹œν•΄μ•Ό 함)
list.forEach(v => {
    console.log(v);
});

Example #3 : ES6

// 객체 λ¦¬ν„°λŸ΄ λ°˜ν™˜
var func = () => ({ foo: 1 });
console.log(func());    // {foo: 1}

Expression

  • μ„ μ–Έ μ»¨ν…μŠ€νŠΈμ˜ λ°–μ˜ this 값을 가진닀.
    • this κ°€ 바인딩 λ˜μ§€ μ•ŠλŠ”λ‹€.
function foo() {
    this.value = 0;

    setInterval(() => {
        console.log(this.value);    // 0
    }, 1000);
}
  • μƒμ„±μž (constructor) 둜 μ‚¬μš©λ μˆ˜ μ—†λ‹€. (new μ—°μ‚°μž μ‚¬μš© λΆˆκ°€)
var Foo = () => {};
var foo = new Foo();    // TypeError : Foo is not a constructor

Default Parameter

Description

ν•¨μˆ˜μ˜ λ§€κ°œλ³€μˆ˜μ˜ 기본값이 μ„€μ • κ°€λŠ₯ν•©λ‹ˆλ‹€.

Syntax

function func_name([param1[= defaultValue1][, ... , paramN[= defaultValueN]]]) {
    statements
}

Parameters

  • func_name
    • ν•¨μˆ˜λͺ…
  • param1, param2
    • νŒŒλΌλ©”ν„° λͺ…
  • defaultValue1, defaultValue2
    • νŒŒλΌλ©”ν„° κΈ°λ³Έκ°’
  • statements
    • ν•¨μˆ˜μ˜ λ‚΄μš©

Example #1 : ES6

function add(a, b = 1) {
    return a * b;
}

console.log(add(5)) // 5

Expression

  • ν•¨μˆ˜μ—λ„ 적용 κ°€λŠ₯ν•˜λ‹€.
function callLog(msg = defaultMsg()) {
    return console.log(mes);
}

function defaultMsg() {
    return 'TEST_LOG';
}

callLog()     // TEST_LOG
  • undefined 전달 μ‹œ
function callLog(msg = 'TEST_LOG') {
    return console.log(mes);
}

callLog(undefined)     // TEST_LOG

Spread Operator

2개 μ΄μƒμ˜ 인수λ₯Ό λ‚˜μ—΄ν•˜λŠ” 방식

Syntax

// ν•¨μˆ˜ 호좜용
myFunction(...args);

// λ°°μ—΄ λ¦¬ν„°λŸ΄μš©
[...args, 5, 6, 7];

// λΉ„ κ΅¬μ‘°ν™”μš©
[a, b, ...args] = [1, 2, 3, 4, 5];

Example

var org = [3, 4];
var custom = [1, 2, ...org, 5];    // [1, 2, 3, 4, 5]

Expression

  • μŠ€ν”„λ ˆλ“œ μ—°μ‚°μžλ‘œ λ°°μ—΄ & 객체 볡제.
var array = [1, 2, 3];

var cloneArray = [...array];
console.log(cloneArray);    // [1, 2, 3]

var obj = {a: 10, b: 20};

var cloneObj = {...obj};
console.log(cloneObj);    // {a: 10, b: 20}

Rest Parameter

λ‚˜λ¨Έμ§€ λ§€κ°œλ³€μˆ˜ (rest parameter) ꡬ문에 λ‚˜λ¨Έμ§€ μΈμˆ˜λ“€λ„ μ •μ˜ν•΄ λ‚˜νƒ€λƒ…λ‹ˆλ‹€.

Syntax

function (a, b, ...theArgs) {
    // statements
}

Example

function foo(...Args) {
    console.log(Args.length);
}

foo();           // 0
foo(5);          // 2
foo(5, 7, 9);    // 3

function foo(arg1, ...Args) {
    return Args.map(function (elem) {
        return arg1 * elem
    });
}

console.log(foo(2, 1, 2, 3));    // [2, 4, 6]

Expression

  • arguments 객체가 μ•„λ‹Œ Array 객체의 method μ‚¬μš©μ΄ κ°€λŠ₯ν•˜λ‹€.
function sortRestArgs(...Args) {
    return Args.sort();
}

function sortArguments() {
    return arguments.sort();
}

console.log(sortRestArgs(5, 3, 7, 1));        // [1, 3, 5, 7]

console.log(sortArguments(5, 3, 7, 1));        // TypeError

Destructuring Syntax

ꡬ쑰뢄해 문법은 ES6 μ—μ„œ μ‚¬μš©λ˜λŠ” λ³€μˆ˜μ˜ μ„ μ–Έ λ°©μ‹μž…λ‹ˆλ‹€.

Expression

  • νŠΉμ • 객체의 값을 κΊΌλ‚΄μ˜€λŠ” 방법
var josh = {
  language: 'javascript',
  position: 'front-end',
  area: 'pangyo',
  hobby: 'singing',
  age: '102'
};

var language = josh.language;
var position = josh.position;
var area = josh.area;
var hobby = josh.hobby;
var age = josh.age;

var josh = {
  language: 'javascript',
  position: 'front-end',
  area: 'pangyo',
  hobby: 'singing',
  age: '102'
};

var { language, position, area, hobby, age } = josh;

console.log(language); // javascript
console.log(position); // front-end
console.log(area); // pangyo
console.log(hobby); // singing
console.log(age); // 102
  • ν•¨μˆ˜μ˜ 적용
var context = {
    commit: actionName => console.log(actionName + ' has been committed!!')
};

var {commit} = context;
commit('addProducts');     // addProducts has been committed !!

Export Syntax

μ§€μ •λœ νŒŒμΌμ—μ„œ 객체 (ν•¨μˆ˜, 였브젝트, μ›μ‹œνƒ€μž…) 을 export ν•˜λŠ”λ° μ‚¬μš©λœλ‹€.

Syntax

// Named Exports
export { myFunction };              // ν•¨μˆ˜ exports
export const foo = Math.sqrt(2);    // μƒμˆ˜ exports

// Default Exports (μŠ€ν¬λ¦½νŠΈμ—μ„œ μœ μΌν•˜κ²Œ ν•œλ²ˆ μ‚¬μš©)
export default myFunctionOrClass;

참고자료

http://sanghaklee.tistory.com/54

← Iterable & Iterator β†’