0%

Javascript 함수

Posted on Edited on In ,

ES6 함수 주요기능정리

매개변수 해체

객체 해제가 가능하듯, 매개변수도 해체가능합니다.
해체 할당과 마찬가지로 프로퍼티는 유효한 식별자여야 하고, 들어오는 객체에 해당 프로퍼티가 없는 변수는 undefined를 할당받습니다.

1
2
3
4
5
6
7
8
9
10
11
function print({subject, verb, object}) {
  return `${subject} ${verb} ${object}`
}

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

print(o)  // I love JavaScript

배열도 해체 가능합니다.

1
2
3
4
5
6
7
function print([subject, verb, object]) {
  console.log(`${subject} ${verb} ${object}`);
}

const arr = ["I", "love", "JavaScript"];

print(o)  // I love JavaScript

매개변수 기본값

매개변수에 기본값을 지정할 수 있습니다.

1
2
3
4
5
6
7
8
function print(a, b="default", c=1) {
  console.log(`${a} ${b} ${c}`);
}

print(1,2,3); // 1 2 3
print(1,2);   // 1 2 1
print(1);     // 1 default 1
print();      // undefined default 1

메서드

객체의 프로퍼티인 함수를 메서드라고 불러 일반함수와 구별합니다.
ES6에서는 간편하게 메서드를 추가할 수 있는 문법이 생겼습니다.

1
2
3
4
5
6
7
8
9
10
11
// Before..
const o = {
  name: "BSD",
  play: function() { return 'yay!'; },
}

// ES6
const o = {
  name: "BSD",
  play() { return 'yay!'; },
}

화살표 표기법

화살표 표기법은 간단히 말해 function이라는 단어와 중괄호 숫자를 줄이려고 고안된 단축 문법 입니다.
아래 세가지 단축문법이 있습니다.

  • function을 생략해도 됩니다.
  • 함수에 매개변수가 단 하나 뿐이라면 괄호(())도 생략할 수 있습니다.
  • 함수 바디가 표현식 하나라면 중괄호와 return문도 생략할 수 있습니다.
    화살표 함수는 항상 익명이며, 변수에 할당할 수 있습니다.
1
2
3
4
5
6
7
8
const f1 = function() { return "hello!"; }
const f1 = () => "hello!";

const f2 = function(name) { return `Hello, ${name}!`; }
const f2 = name => `Hello, ${name}!`;

const f3 = function(a,b) { return a + b; }
const f3 = (a,b) => a + b;

화살표 함수는 익명함수를 만들어 다른 곳에 전달하려 할 때 가장 유용합니다.
화살표 함수는 객체 생성자로 사용할 수 없고, arguments 변수도 사용할 수 없습니다. ES6에서 확산 연산자가 생겼으니 arguments 변수는 필요가 없긴 합니다.