Chapter6. 함수

함수

자바스크립트 함수

• 자바스크립에서는 함수도 하나의 타입이다.

• 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능함

• 또한 함수는 다른 함수 내에 중첩되어 정의될 수도 있음

함수의 정의

• 함수는 function 키워드로 시작하고 아래의 3 요소를 가짐

  1. 함수 이름

  2. 괄호 안에 쉼표로 구분되는 함수의 매개변수

  3. 중괄호로 둘러싸인 실행문

• function 함수이름(매개변수1, 매개변수2,...) {
      함수가 호출되었을 때 실행하고자 하는 실행문;
  }

반환문

• 반환하기 위해서는 return 키워드를 사용해야함

변수의 유효 범위(variable scope)

• 자바스크립트에서는 객체나 함수는 모두 변수다

• 유효 범위란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다.

• 변수는 요효 범위에 따라 아래 두가지로 구분된다.

  1. 지역 변수

  2. 전역 변수

지역변수

• 지역변수란 함수 내에서 선언된 변수를 가리킨다.

• 지역 변수는 선언된 함수 내에서만 유효하며 함수가 종료되면 메모리에서 사라진다.

• 함수의 매개변수 또한 지역변수 처럼 동작한다.

전역 변수

• 함수의 외부에서 선언된 변수

• 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

함수의 유효 범위

함수의 유효범위

• 대부분의 프로그래밍 언어에서는 블록 내에서 정의된 변수를 블록 외부에서는 접근할 수 없다.

• 블록 이란 코드 내에서 중괄호로 둘러쌓인 부분을 가리킨다.

• 이러한 블록을 기준으로 하는 유효 범위를 블록 단위의 유효범위 라고 한다.

• 하지만 자바스크립트는 함수를 블록 대신 사용한다

• 자바스크립트에서 함수는 자신이 정의된 범위 안에서 정의된 모든 변수 및 함수에 접근할 수 있다.

• function parentFunc(){
    var x = 1;
    var y = 2;
    function add() {
      return x + y;
    }
    return add();
  }

  • add 함수는 자신의 스코프에서 정의 되지 않은 x, y 변수를 사용할 수 있다.

  • 이게 가능한 이유는 블록 단위의 범위가 아닌 함수 단위의 범위 이기 때문.

함수 호이스팅(hoisting)

• 자바스크립트에서 함수의 유효범위 라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 것

  • 함수 전체에 유효하기 때문에 위와 같이 함수 내의 함수에서도 사용할 수 있었다.

• 그런데 이 이휴 범위의 적용이 변수가 선언되기 전에도 똑같이 적용이 된다.

  • 무슨 말인지 이해하기가 힘들다. 예시를 보면 이해할 수 있다.

• var globalVar = 10;
  function test() {
    console.log(globalVar);// ..1
    globalVar = 20;
    console.log(glovalVar);// ..2
  
  }

  • 위의 예에서 1 의 출력 값은 10이 아니다.

    • undefined 다.

  • 왜냐? 아래처럼 자바스크립트가 호이스팅 해버리기 때문

• var globalVar = 10;
  function test() {
    var globalVar;
    console.log(globalVar);// ..1
    globalVar = 20;
    console.log(glovalVar);// ..2 
  }

호이스팅의 개념

• 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.

• var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.

  • Var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어올려지지 않는다.

  • let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

• 여기를 보고 제대로 학습하자