/ JAVASCRIPT

가장 중요할수도있는 Function(1)

Function

함수 선언식과 함수표현식


자바스크립트를 공부하다보면 자연스레 함수와 접하게 된다. 우리가 가장 먼저 마주하는 함수는 아래와 같은데

function 함수이름(파라미터){
  동작
  return ~
}

이것을 함수 선언(Function Declaration) 방식이라고 한다.
하지만 이런 방식 외에도 다른 방식이 존재한다. 저런 함수선언식을 변수에 할당 하는 방식인데 다음과 같다.

const fun = function (파라미터){
              동작
              return 반환(리턴값)
            }

fun();      // -> 함수 실행

이런 방식을 함수 표현식(Function Expression) 이라고 한다. 하지만 변수에 함수를 할당하는 것만이 함수 표현식이 아닌데 예를 들어

//btn이 html버튼을 선택했다고 가정
btn.addEventListener('click', function(){
  동작
  return ~
});

나중에 더 자세히 공부해볼 addEventListener의 두번째 파라미터로 함수를 선언하여 전달하는 모습과 같은 경우도 함수 선언을 값처럼 활용한다는 점에서 함수 표현식이라고 부를 수 있다.

그럼 함수 선언과 함수 표현식의 다른점이 무엇일까?
먼저 함수 선언은 아래와같이 함수를 선언하기전에 함수를 호출해도 실행이된다. 이 현상을 (Hoisting 호이스팅)이라고 한다.

fun();                    // -> '실행됩니다'

function fun(){
  console.log('실행됩니다')
}

하지만 함수 표현식은 그렇지 않다. 변수의 특성상 선언 전에 그 변수에 할당 할 함수를 불러오는 것은 불가능하다.

또한 함수 표현식에는 선언하는 함수에 이름을 붙여줄수있는데 이것을
기명함수표현식(Named Function Expression) 이라고 부른다. 함수 표현식으로 함수가 할당된 변수는 자동으로 name 프로퍼티를 갖게된다.

const jong = function study(){
  console.log('hi');
} 
// 여기서 study가 변수 jong의 name프로퍼티가 된다.
console.log(jong.name);               // - > study

하지만 이 name은 함수 내부에서 함수를 가리킬때만 사용할수 있고 외부에서 함수를 호출할때 사용할수는 없다. 그렇기에 이 표현법은 재귀함수 를 사용할때 용이하다.

즉시 실행 함수 (IIFE)

보통 우리가 함수를 사용할때는 다음과 같은 순서로 함수를 사용하게된다.

  1. 함수를 선언한다
  2. 선언한 함수를 호출한다.

하지만 선언과 동시에 실행시킬 수 있는 함수가 있는데 그게 IIFE 이다. 함수 선언부분을 소괄호로 묶어주기만 한다면 선언과 동시에 실행이된다.

(function() {
  console.log('HI');
})                   // -> 'HI'

(function(x, y){
  console.log(x + y);
})(2, 5)             // -> 7

위와같이 파라미터와 아규먼트를 전달할 수 있다. 하지만 이 즉시 실행 함수는 이름을 지어주더라도 외부에서 재사용 할 수 없다.
이 함수는 보통 프로그램 초기화 기능에 많이 사용되며 또 재사용이 필요없는 함수나 함수의 리턴값을 변수에 바로 할당하고 싶을 때 주로 사용된다.

Parameter 와 Argument

위에서 부터 계속 자연스럽게 나온 파라미터는 함수가 동작할때 변수처럼 활용할수있다.

function sayHi (name){
  console.log(`Hi my name is ${name}!`)
}

sayHi('kim');           // -> 'Hi my name is kim!'
sayHi('park');          // -> 'Hi my name is park!'

위의 예시에서 봤을때 ‘name’이 sayHi라는 함수의 파라미터가 된다. 하지만 주의해야할 점은 함수 호출부분의 ‘kim’, ‘park’은 파라미터가 아닌 Argument(아규먼트) 라고 한다. 만약 위의 함수에 아규먼트를 전달하지 않으면 어떻게 될까?

function sayHi (name){
  console.log(`Hi my name is ${name}!`)
}

sayHi();                // -> 'Hi my name is undefined'

위처럼 undefined 값을 출력하게 된다. 그럴때는 다음과 같이 파라미터의 기본값을 설정해 줄 수 있다.

function sayHi (name = 'yu'){
  console.log(`Hi my name is ${name}!`)
}

sayHi();                // -> 'Hi my name is yu'

또한 아규먼트는 파라미터에 순서대로 넘어가게 되는데 예를 들어 2개의 파라미터가 존재하지만 첫번째 파라미터에는 값을 자신이 설정해놓은 기본값으로 출력하고 2번째 파라미터에만 아규먼트를 넘기고 싶다면

function sayHi (name = 'yu', age){
  console.log(`Hi my name is ${name} and im ${age}years old`)
}

sayHi(undefined, 5);                // -> 'Hi my name is yu and im 5years old'

다음과 같이 작성할 수 있는데 여기서 이런 식으로 아규먼트에는 undefined값을 넘길 수 있다는 것도 알 수 있다.