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 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.

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

PreviousChapter5. 배열NextChapter7-1. 객체