함수_2020.10.26

Achievement Goals 1

• 함수의 필요성에 대해서 이해하고, 반복 작업을 편리하게 수행할 수 있다.
• 함수 선언을 위해 필요한 keyword, name, parameter, body 에 대해 이해할 수 있다.
• 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다.
• 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있어야 한다.
• 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있어야 한다.

함수란?

  - javascript에서 코드의 집합을 나타내는 자료형이다.

  - 함수를 변수에 할당하거나 , 함수를 리턴 할 수 있다.

 

함수 선언

function name([param[, param[, ... param]]]) {
   statements
}

name: 함수 이름.

param: 함수에 전달되는 인수의 이름. 함수는 255개까지 인수를 가질 수 있다.

statements: 함수의 몸통을 구성하는 문.

 

선언의 두가지 방식

1. 함수 선언식

function 함수명() {
  구현 로직
}

// 예시
function funcDeclarations() {
  return 'A function declaration';
}
funcDeclarations(); // 'A function declaration'

2. 함수 표현식

var 함수명 = function () {
  구현 로직
};

// 예시
var funcExpression = function () {
    return 'A function expression';
}
funcExpression(); // 'A function expression'

함수 선언식과 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다.

호이스팅이란? 코드에 선언된 변수 및 함수를 코드 상단으로 끌어올리는 것을 말한다.

최상단으로 끌어 올려지는 건 변수의 선언과 할당 내용모두를 끌어 올리는 것이 아닌 선언만 끌어 올려지게 된다.

예를 들어,

1. 변수 호이스팅

console.log(hoisting); //undefined
var hoisting = "success";
console.log(hoisting); // 'success'

첫 번째 console.log는 실행 결과로 undefined 가 나오고,

두 번째 console.log 는 실행 결과로 'success'가 나오게 된다.

var hoisting;
console.log(hoisting); // undefined
hoisting = "success";
console.log(hoisting); // 'success'

위의 코드는 hoisting으로 인해 변수 선언이 최상단으로 끌어올려졌으므로 console.log의 결과가 다른 것이다.

 

2. 함수 호이스팅

함수 선언식은 호이스팅에 영향을 받지만(호이스팅이 가능하지만),

함수 표현식은 호이스팅에 영향을 받지 않는다.

// 실행 전
logMessage();
sumNumbers();

function logMessage() { //함수 선언식 
  return 'worked';
}

var sumNumbers = function () { //함수 표현식  
  return 10 + 20;
};

호이스팅에 의해 자바스크립트 해석기는 코드를 아래와 같이 인식한다.

// 실행 시
function logMessage() {
  return 'worked';
}

var sumNumbers; //함수 표현식 sumNumbers 에서 var 도 호이스팅이 적용되어 위치가 상단으로 끌어올려졌다.

logMessage(); // 'worked'
sumNumbers(); // Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {
  return 10 + 20;
};

 

하지만 실제 sumNumbers 에 할당될 function 로직은 호출된 이후에 선언되므로,

sumNumbers 는 함수로 인식하지 않고 변수로 인식한다.

또 변수 범위가 전역 범위인지 함수 범위인지에 따라 다르게 수행되는데,

1_함수 내에서 선언한 함수 범위(function scope)의 변수는 해당 함수의 최상위로,

2_함수 밖에서 선언한 전역 범위(global scope)의 변수는 스크립트 단취 최상위로 끌어올려진다.

기억해야 할 것은 선언 부분만 최상위로 끌어올려진다는 점이다.

 

함수 표현식의 장점

‘함수 표현식이 호이스팅에 영향을 받지 않는다’ 는 특징 이외에도 함수 선언식보다 유용하게 쓰이는 경우는 다음과 같다.

• 클로져로 사용
• 콜백으로 사용 (다른 함수의 인자로 넘길 수 있음)

클로져란? nomadkim880901.tistory.com/266

클로져 예시 문제

  function increaseBy(increaseByAmount) {
      return function (numberToIncrease) {
        return numberToIncrease + increaseByAmount;
      };
    }

    const increaseBy3 = increaseBy(3);
    const increaseBy5 = increaseBy(5);

    expect(increaseBy3(10)).toBe(13);
    expect(increaseBy5(10)).toBe(15);
    expect(increaseBy(8)(6) + increaseBy(5)(9)).toBe(28);

클로져 & 콜백 joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/#%ED%95%A8%EC%88%98-%EC%84%A0%EC%96%B8%EC%8B%9D%EA%B3%BC-%ED%91%9C%ED%98%84%EC%8B%9D%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

함수 표현식 vs 함수 선언식