JavaScript - Functions

Function Declarations

Javascript의 함수는 다음과 같이 선언해주면 된다. 이와 같은 형태를 함수 선언식(Function Declarations)라고 한다.

function sayHi() {

	console.log('Hi, there!');
}

function 키워드 옆에 함수명을 정의해준다.

Default Parameters

ES6부터 default한 매개변수를 지정해줄 수 있다. 만일 호출하는 함수에 별다른 매개변수가 들어가지 않을 때, 미리 정의해둔 name=’Stranger’로 인해 default한 매개변수 (Stranger)가 name에 들어가게 된다.

let name='';

function sayHi(name='Stranger') {

    console.log('Hi there ' + name);

}

sayHi('JinsungJun'); //Output : Hi, there! JinSungJun

sayHi(); //Output : Hi, there! Stranger

Helper Functions

어떤 함수가 리턴하는 값을 또 다른 함수 내에서 활용할 수 있다. 이렇게 함수 내에 호출되는 또 다른 함수를 Helper Function이라고 한다.

function multiplyByNineFifths(number) {

    // 9/5를 곱해주는 함수

    return number * (9/5);
}

function getFahrenheit(celsius) {

    //farenheit = celsius * (9/5) + 32

    return multiplyByNineFifths(celsius) + 32;
}

getFahrenheit(15);

console.log(getFahrenheit(15));

화씨를 구하는 공식은 다음과 같다.

Fahrenheit = Celsius * (9/5) + 32

섭씨를 매개변수로 받아 화씨온도를 구해주는 함수 getFahrenheit(celsius) 내에서 숫자를 매개변수로 받아 5분의 9를 곱해주는 함수가 호출되어 사용되고 있다. 여기서 multiplyByNineFifths(number)를 helper function이라고 할 수 있다.

Function Expressions

Javascript에는 함수 선언식, 함수 표현식이라는 개념이 존재한다. 함수 선언식은 앞서 정리했던 방식으로 활용해주면 된다. 다른 방법으로 함수를 정의하는 방법은 함수 표현식(Functional Expression)이다.

const calculateArea = function(width,height) {
	
    const area = width * height;
    return area;
}

함수 선언식과 비교해서 구성이 살짝 다르다. 하지만 호출은 함수 선언식과 같게 해주면 된다.

ex) calculateArea(5,4);

함수 표현식이 함수 선언식과 다른 점은 호이스팅이 되지 않는다는 것이다. 호이스팅이란 함수를 호출부보다 뒤에 정의해도 컴파일러가 알아서 해당 함수를 맨 위로 끌어올려 실행시키는 작업이다. 이런 함수 표현식의 유연성을 바탕으로 클로져, 콜백으로 사용 될 수 있는 장점이 있다.

Arrow Functions

함수를 정의할 수 있는 또 다른 방법으로는 Arrow Function이 있다. 화살표 함수라고도 한다.

const calculateArea = (width,height) => {

	let area = width * height;
    return area;

}

function 키워드를 제외하고 ( ) 사이에 매개변수를 정의한 뒤 ‘=>’를 사용한다. 함수 선언식, 표현식, 화살표 함수 모두 알아놓을 필요가 있다.

매개변수의 개수에 따라 화살표 함수는 좀 더 간결하게 선언될 수 있다.

//매개변수 0
const functionName = () => {

}

//매개변수 1
const functionName = paramOne => {

}

//매개변수 2개
const functionName = (paramOne,paramTwo) => {

}

//Single Line Arrow Function

const singleLineArrowFunction = (paramOne,paramTwo) => paramOne * paramTwo;

정의된 매개변수가 1개면 = 뒤에 괄호를 생략 할 수 있다.

함수의 body가 1줄 즉 single line function이면 화살표 바로 뒤에 return문을 생략하고 함수의 body를 정의해줄 수 있다.