[Javascript] Function 사용법과 Function Hoisting (feat. arrow function과 기본적인 함수선언)

Javascript의 Function에 대해서 알아보려고 한다. Javascript 함수는 일급 시민이기 때문에 변수에 함수를 대입 해줄 수 있다.

 

2021.09.12 - [IOS] - [Swift] 1급시민, 1급객체, 1급함수와 Closure란?

[Swift] 1급시민, 1급객체, 1급함수와 Closure란?

함수 선언하기

우리가 알고 있는 기본적인 C 함수의 함수 선언과 비슷하다. 하지만 차이점이라면 함수 header 부분에 return 값을 정의해 주지 않는다는 것이다. 

방법 1

function 함수이름( 매개변수1, 매개변수2, ... ) 
{
	//구현
}

위의 방법을 통해 함수 예시를 작성해보도록 하겠다. 

function multiple(a, b) 
{
  return a * b;
}

consol.log( multiple(10,10) );

출력 : 100

 

이 방식으로 함수를 만들게 되면 hoisting이 가능하게 된다.  아래의 예시를 보도록 하자.

consol.log( multiple(20,10) );

function multiple(a, b) 
{
  return a * b;
}

consol.log( multiple(10,10) );


출력 : 200
출력 : 100

함수를 정의 하기전에 함수를 호출해도 200이라는 값이 출력된다. 방법 1을 통해 함수를 선언하면 선언 전에도 사용할 수 있게 되는데 이를 함수 호이스팅(Function Hoisting)이라고 한다. 이때의 유효범위는 코드의 맨 처음부터이다. 

방법 2

var 함수이름 = function( 매개변수1, 매개변수2, ... ) 
{
	//구현
}

 

위의 방법을 통해 함수 예시를 작성해보도록 하겠다. 

var mul = function(a, b) 
{
  return a * b;
}

consol.log( mul(10,10) );

출력 : 100

이 방식으로 함수를 만들게 되면 함수 호이스팅이 불가능하다. 

consol.log( mul(20,10) ); //error

var mul = function(a, b) 
{
  return a * b;
}

consol.log( mul(10,10) );

---

 

Arrow Function

기본적인 함수 선언과 달리 화살표(=>)를 이용하여 함수를 선언하고 사용할 수 있다. 다음은 Arrow Function의 기본 형태이며 익명함수로만 사용 가능하다.

var 변수 = (매개변수1, 매개변수2 ...) => { 
 //구현 
}

위의 방법을 통해 함수 예시를 작성해보도록 하겠다. 

var mul = (x, y) => {x * y};

console.log(mul(3,4)); 

출력 : 12

기본적인 Arrow Function의 형태는 위와 같고 다음은 Arrow Function을 사용하는데에 있어서 응용이다. 

 

매개변수 지정 방법

• 매개변수가 한 개인 경우(소괄호를 생략 가능) 

parameter => { ... }

• 매개변수가 여러 개인 경우(소괄호를 생략 불가)

(parameter1, parameter2) => { ... }

함수 구현 부분

• 구현부분이 한줄인 경우 (중괄호를 생략 가능하며 암묵적으로 return이 생략되었다는 의미)

x => x * y

• 함수구현부가 여러줄 구문인 경우

(params) => { 
  var copy = params;
  return params * copy;
};