es6에서 추가된 함수 기능

JS
es6, function, 매개변수

es6에서 추가된 함수의 기능을 살펴보기 전에 함수의 기본을 알고 가도록 하겠다!

함수는 기본적으로 이렇게 쓰인다. 

1
2
3
4
function hello(){
    return "Hello world!";
}
hello();   //"Hello world!"

자바스크립트는 함수를 호출하지 않고 다른 값과 마찬가지로 참조하기만 할 수 있다는 특징을 가지고 있는 유연한 언어. 그렇기 때문에 함수를 변수에 할당하여 다른 이름으로 함수를 호출할 수도 있다. 

1
2
const f = hello;
f();   //"Hello world!"

또한 함수를 객체 프로퍼티나 배열요소에도 할당 할 수 있다.

함수를 호출하면서 정보를 전달 할 떄, 즉 함수에 정보를 전달하려면 매개변수를 이용한다. 매개변수는 함수가 호출되기 전에는 존재하지 않는다는 점을 제외하면 일반적인 변수와 마찮가지.

1
2
3
4
function avg(a, b){
    return (a+b)/2;
}
avg(5, 10);   //7.5

자바스크립트에서는 다른 함수들 과는 다르게 매개변수 갯수와 상관없이 몇개의 매개변수를 전달해도 됨. 정해진 매개 변수에 값을 제공하지 않으면 암시적으로 undefined가 할당된다

1
2
3
4
function f(x){
    return `f: x=${x}`;
}
f();   //"f: x=undefined"

ES6에 추가된 매개변수 기본값 지정하기

일반적으로 매개변수 값을 지정하지 않으면 위에처럼 undefined가 값으로 할당된다. ES6에서는 기본값을 지정 할 수 있게 되었다. 

1
2
3
4
5
6
7
function f(a,b = "blabla",c=3){
    return `${a} - ${b} - ${c}`;
}
f(5, 6, 7);   //"5 - 6 - 7"
f(5, 6);   //"5 - 6 - 3"
f(5);   //"5 - blabla - 3"
f();   //"undefined - blabla - 3"

화살표 함수

ES6에서 새로만든 화살표 표기법은 function이라는 단어와 중괄호 숫자를 줄이려고 고안된 단축 문법입니다.

화살표 문법은 다음과 같은 특징을 가진다.

  1. function을 생략해도 됨
  2. 함수에 매개변수가 단 하나 뿐이라면 괄호(())도 생략할 수 있음
  3. 함수 바디가 표현식 하나라면 중괄호와 return문도 생략할 수 있다. 
1
2
3
4
5
6
7
8
9
10
11
const f1 = fuction() {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;

화살표 함수는 항상 익명함수이다. 만약 이름 붙인 함수가 필요하다면 평소에 하던 방식으로 함수를 만들면 된다.

화살표 함수는 위의 특징 말고도

  1. this가 다른 변수와 마찬가지로 정적으로 묶인다.
  2. 객체사용자로 사용할 수 없다.
  3. arguments변수도 사용할 수 없다. 확산 연산자가 ES6에서 생겼으니 필요없다고 하기도 한다.

처음에 만들었던 함수를 화살표 함수로 바꾸어 보장

1
2
3
4
5
6
7
8
9
function avg(a, b){
    return (a+b)/2;
}
avg(5, 10);   //7.5
const avg = (a, b) => {
    return (a+b)/2
    };
avg(5, 10);   //7.5

공유하기 댓글