목차
- 함수 선언문과 함수 표현식
- 매개변수와 인수
- 호이스팅
- 화살표 함수
- IIFE (즉시실행함수)
- 콜백 함수
함수 선언문과 함수 표현식
함수를 만들 때 방법은 크게 두 가지로써 함수 선언문과 함수 표현식이 있다.
둘의 형식은 아래와 같다.
function 함수명() {} // 함수 선언문
const func = function () {} // 함수 표현식강의나 책을 보면 함수를 만드는 법을 이렇게 구분하는 데에 이유가 있을 것 같았다.
둘의 차이는 함수 호이스팅에서 찾아볼 수 있다.
바로 함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. 즉, 함수 선언식은 어디서든 호출이 가능하다는 말이다.
JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.
매개변수와 인수
매개변수(parameter)와 인수(argument)에 대해 알아보자.
(둘의 차이를 모른 체 계속 남발했던 나는...매번 혼동이 왔지만 정정해야겠다 매번 생각만 했었다.)
인수는 함수에 제공된 실제 값이고 매개변수는 함수 정의 내부의 변수이다. 매개변수는 함수 정의에 나타나는 유형이고 인수는 함수 호출에 나타나는 인스턴스라고 말할 수 있다.
다시 말해 매개변수는 함수를 정의할 때 쓰고, 인수는 함수를 호출할 때 쓴다.
기억할 때는 인자가 매개변수에 들어가는 실제 값이라고 생각한다.
화살표 함수
ES6에 나온 화살표 함수는 개발자의 편의를 위해 만들어졌다.
형식은 아래와 같다.
const func = () => {}화살표 함수를 정의할 때는 함수 선언문이 아닌 함수 표현식의 형식으로 써야 한다.
그치만 뒤에 나오는 콜백 함수 형식으로 쓸 때는 변수에 넣고 사용하지 않아도 된다.
function totalSum(a, b, ()=>{})화살표 함수에는 경우에 따라 생략할 수 있는 기호가 생긴다.
- 매개변수나 인수가 하나일 경우 앞의 소괄호를 생략할 수 있다.
- 중괄호에 나오는 코드가 return 키워드 하나로만 되어 있으면 중괄호를 생략할 수 있다.
const pow = a => a**a;
const sum = (a,b) => a+b;그리고 화살표 함수를 설명할 때 항상 기존에 있던 함수를 정의하는 방식의 차이를 언급한다. 바로 this에 대한 바인딩의 차이가 있다.
(아직 이 점은 공부가 제대로 되어 있지 않아서 아래 내용을 참조해서 재수정하겠습니다.)
MDN_화살표 함수
화살표 함수 표현(arrow function expression)은 전통적인 함수표현(function)의 간편한 대안입니다. 하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에 사용할 수는 없습니다.
- this나 super에 대한 바인딩이 없고, methods 로 사용될 수 없습니다.
- new.target키워드가 없습니다.
- 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind methods를 이용할 수 없습니다.
- 생성자(Constructor)로 사용할 수 없습니다.
- yield를 화살표 함수 내부에서 사용할 수 없습니다.
IIFE (즉시 실행 함수)
함수를 사용할 때는 기본적으로 호출이라는 과정이 따로 필요하다. 그래서 함수 선언과 함수 호출 두 가지 과정이 있어야 호출이 가능하다. 이를 한꺼번에 하기 위해서 즉시 실행 함수(immediately invoked function expression)이 나왔다.
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의되자마자 즉시 실행되는 Javascript Function 를 말한다. (MDN 출처)
이 형식은 여러 가지가 있지만 머릿속에 너무 많이 들어가면 안 좋기 때문에 한 두 가지 정도만 알고 나중에 더 추가하자.
- (Func( ))( )
선언하자마자 실행 (한 번만 실행하고 싶을 때 사용)(function () { var aName = "Barry"; })();
- const a = (Func ( ))( )
함수 결과값만 변수에 저장var result = (function () { var name = "Barry"; return name; })();
콜백 함수
콜백 함수란 함수의 매개변수로 들어가는 함수를 의미한다. 주로 비동기에서 많이 나오는 주제다. 아니면 함수를 넣을 변수를 생성하지 않고 바로 매개변수에 넣기 위해 가독성 향상 측면에서 사용한다.
let count = 0;
const timer = setInterval(()=> {
console.log(count);
}, 1000);