함수(Function)

함수란

함수란 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 말한다.
선언된 함수는 필요할 때 호출하여 사용 할 수 있다.

반환문(return)

반환문은 함수의 실행을 바로 종료하고 호출자에게 값을 반환해준다.
이때 반환값은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.
또한 함수에서의 반환문은 있어도 되고 없어도 된다. 즉, 필수는 아니다.

함수의 선언(정의)

함수의 선언(정의)은 다음과 같은 함수 키워드로 구성되어 있다.

function example(variable1, variable2, ...){
  content;
  return result;
}

위 예시를 보면 example이라는 함수의 이름을 설정하고 괄호(()) 안에 쉼표(,)로 분리된 variable1, variable2와 같은 매개변수가 있다.
중괄호({})안에 함수를 정의하는 자바스크립트 표현을 쓰게 되는데 위 예시에서는 content 부분이 되겠다.
마지막으로 return으로 반환문을 선언하고 그옆에 결과값을 적어주면 된다.(여기에서는 result가 되겠다)

함수의 이름 : example
함수의 매개변수 목록 : variable1, variable2, ...
함수를 정의하는 자바스크립트 표현 : content
반환문 : return
결과값 : result

함수의 호출

위에서 함수를 정의 하였다면 함수를 호출하여 사용할 수도 있다.

example(variable1, variable2, ...)
// expected output : result

example이라는 함수명을 불러와 매개변수(variable1, variable2, ...)를 가지고 정의된 함수의 내용(content)을 실행하여 결과값(result)을 반환한다.

함수의 범위(함수의 유효 범위)

함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에 함수 외부에서는 접근할 수 없다. 하지만 함수 내부에서는 접근할 수 있다.(추가적으로 전역함수는 모든 전역 변수에 접근 가능하다)

let num1=20, num2=3, name="Chamahk";

function multiply() {
  return num1 * num2;
}

multiply(); // expected output : 60

function getScore () {
  var num1 = 2,
      num2 = 3;

  function add() {
    return name + " scored " + (num1 + num2);
  }

  return add();
}

getScore(); // expected output : "Chamahk scored 5"

출처 : mdn 공식문서

2. 호이스팅

자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 작동된다. 이것을 호이스팅이라고 한다. 여기서 주의점은 선언만 호이스팅 된다.

function testHoisting(){
  console.log(num); // expected output : undefined
  var num=10;
  console.log(num); // expected output : 10
}

testHoisting()

다음과 같은 결과가 나온다.

호이스팅이 적용되면 다음과 같이 num변수 선언 과정만 함수의 최상단으로 끌어올려진다.

function testHoisting(){
  var num;
  console.log(num);
  num=10;
  console.log(num);
}

testHoisting()

3. 함수 선언 방법

함수 선언에는 여러가지 방식이 있다.(표현식을 명명, 익명으로 쪼개기도 한다)
대표적으로는 선언식, 표현식, 화살표 함수가 있다.

함수 선언식

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

함수 표현식

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

화살표 함수

let 함수명 = () => {
  구현 로직
}