모던 자바스크립트 튜토리얼 part1 - 2.15 ~ 17

2.15 Function

함수를 정의할 때, 아래와 같이 text 파라미터의 기본값을 넣어 줄 수 있다.

javascript에서는 함수를 호출할 때 일부 파라미터가 빠져도 정상적으로 호출되는데, 이때 빠진 파라미터의 기본값을 설정하는 것이다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

showMessage("Ann"); // Ann: no text given

Java의 경우 메서드 이름이 같더라도 파라미터가 다르면 사실상 다른 메서드로 취급하기 때문에, 이 부분은 기억해 두고 잘 활용할 수 있는 방법을 고민해 볼 필요가 있겠다.

Returning Value

함수에서 값을 반환할 때, 값이 없는 것과 undefined로 반환하는 것은 같다.

function doNothing() { /* empty */ }
alert( doNothing() === undefined ); // true


function doNothing() {
  return;
}
alert( doNothing() === undefined ); // true

2.16 Function Expressions

아래 코드에서 sayHi 뒤에 괄호가 없기 때문에, 함수를 호출한 것이 아니라 함수의 내용을 alert 창에 출력하게 된다.

function sayHi() {
  alert( "Hello" );
}

alert( sayHi ); // shows the function code

하지만, 변수에 함수를 전달한 후 호출하면 해당 함수를 호출하는 것과 같은 동작을 한다.

함수 그 자체가 전달되는 것이 아니고, 결과 값이 변수에 저장되기 때문이다.

function sayHi() {   // (1) create
  alert( "Hello" );
}

let func = sayHi;    // (2) copy

func(); // Hello     // (3) run the copy (it works)!
sayHi(); // Hello    //     this still works too (why wouldn't it)

함수를 변수에 할당하는 것을 함수 표현식이라 한다. 함수 표현식을 선언할 때는 세미콜론에 주의하자.

function sayHi() {
  // ...
}

let sayHi = function() {
  // ...
};

Callback functions

콜백 함수의 경우 파라미터에는 괄호가 없지만, 내부에서 함수처럼 사용할 수 있다. Java에서는 안되는데....

만약 파라미터로 함수가 아니라 값이 전달되면 어떻게 될지 궁금하다.

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

function showOk() {
  alert( "You agreed." );
}

function showCancel() {
  alert( "You canceled the execution." );
}

// usage: functions showOk, showCancel are passed as arguments to ask
ask("Do you agree?", showOk, showCancel);

TypeError가 뜬다. 

이러한 경우를 대비해 typeof 키워드 등을 사용해서 항상 타입체크를 해줘야 할 수도 있겠다. (꽤 번거로울 것 같은데 다른 방법은 없는지 궁금하다. chat gpt는 다른 방법은 없다고 얘기한다...)

 

함수 선언과 함수 표현식 간에 굉장히 중요해 보이는 차이가 있는데, 바로 호이스팅 여부다.

sayHi("John"); // Hello, John

function sayHi(name) {
  alert( `Hello, ${name}` );
}

sayHi("John"); // error!

let sayHi = function(name) {  // (*) no magic any more
  alert( `Hello, ${name}` );
};

또한, 함수 선언식이더라도 코드 블럭 안에 존재한다면 해당 영역에 한해서 호이스팅이 된다.

let age = prompt("What is your age?", 18);

// conditionally declare a function
if (age < 18) {

  function welcome() {
    alert("Hello!");
  }

} else {

  function welcome() {
    alert("Greetings!");
  }

}

// ...use it later
welcome(); // Error: welcome is not defined

만약 이러한 현상을 피하고 싶다면, 아래와 같이 전역 변수에 담아서 사용할 수도 있겠다.

let age = prompt("What is your age?", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("Hello!");
  };

} else {

  welcome = function() {
    alert("Greetings!");
  };

}

welcome(); // ok now

튜토리얼 문서에서는 가독성을 이유로 특별한 이유가 없다면 함수 선언식을 권장한다.

2.17 Arrow functions, the basics

Java의 람다와 매우 유사한 기능이다.

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3