[JS] 함수의 기본적인 사용 방법과 동작 방식

함수는 하나의 단위로 실행되는 블록으로 특별한 목적의 작업을 수행하도록 설계됩니다. 이번 포스팅에서는 함수의 기본적인 사용방법과 동작 방식을 알아봅니다.

function sayHi() {
  // 함수의 바디(body)는 여는 중괄호( {: curly bracket)로 시작합니다.

  // 함수 내부에 있는 코드라는 것을 알기 좋게 하려고 들여쓰기를 하였습니다.
  console.log("Hi");

  // 닫는 중괄호( }: curly bracket)로 끝납니다.
}

위의 코드는 함수 선언의 예입니다. 함수를 선언할 때는 다음과 같은 조건을 지켜야 합니다.

- function 키워드로 시작하여

- 함수 이름을 지어주고

- 함수를 알리는 괄호( (): parentheses)를 여닫고

- 중괄호 사이(바디)에 함수 호출 시 실행될 코드를 작성합니다.

- return(반환)할 것이 있다면 작성합니다.

함수를 선언한 것만으로는 함수를 실행시키지 않습니다. 함수가 호출되기 전까지 바디(body)는 실행되지 않습니다. 함수를 호출할 때는 함수 이름 다음에 괄호()를 여닫습니다.

함수의 호출

함수 호출하면 함수 바디를 실행합니다. 함수를 호출하기 위해서는 함수 이름 다음에 괄호를 쓰면 됩니다.

함수의 참조

함수 이름 다음에 괄호를 쓰지 않으면 함수를 참조하는 것으로 그 함수는 실행되지 않습니다.

이를 이용해서 함수를 다른 변수에 할당하여 다른 이름으로 함수를 호출할 수 있습니다. 또한 객체의 프로퍼티, 배열의 요소로도 할당할 수 있습니다.

함수 선언(function declaration) 대신 함수 표현(function expression)

Airbnb의 JavaScript 스타일 가이드에서는 다음과 같이 named function expression 사용을 권장하고 있습니다. 함수 선언의 경우 인터프리터가 자바스크립트 코드를 해석할 때, 호이스팅되어 가장 우선적으로 해석합니다. 때문에 함수 선언 이전에 함수를 호출하는 코드가 작성된 스크립트를 실행시켜도 에러가 나지 않습니다. 하지만 이렇게 되면 코드의 가독성과 유지보수성을 떨어트립니다.

Airbnb Style Guide (링크)

// bad
function foo() {
  // ...
}

// bad
const foo = function () {
  // ...
};

// good
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

name function expression의 특징

이 경우 해당 함수의 이름은 함수 밖에서 사용할 수 없다는 특징이 있습니다. 함수의 이름을 함수 밖에서 사용하면 에러가 발생합니다. 아래 예제를 보겠습니다.

함수의 반환

모든 함수는 반환을 합니다. 함수 바디 안에서 return 키워드를 사용하면 함수를 즉시 종료하고 값을 반환합니다. 만약 명시적으로 return 키워드를 사용하지 않으면 undefined라는 값을 반환합니다. 함수는 항상 데이터를 반환하기 때문에 변수에 저장하거나 다른 로직에 사용할 수도 있습니다.

매개변수(parameter)와 인자(argument)

함수에 데이터를 전달하기 위해서는 매개변수와 인자를 이용합니다.

매개변수란

함수를 선언할 때 괄호() 안에 어떤 변수명을 쓰면 그것을 매개변수라 합니다. 매개변수는 그 이름처럼 실제 함수 바디에서 변수와 같은 역할을 합니다. 매개변수는 함수 바디 안에서만 존재하기 때문에 같은 이름을 갖은 변수가 함수 바깥에 존재할 수도 있습니다. 매개변수는 함수가 호출되기 전에는 존재하지 않습니다. 함수가 호출되면 매개변수는 값을 받아 실제 하게 됩니다.

인자란

함수가 호출될 때 괄호() 안에 어떤 값 또는 값이 정의된 변수를 쓰면 그것을 인자라 합니다. 함수 선언 시 매개변수를 적어두었다면 호출할 때 인자로 전달한 값은 매개변수를 통해서 사용 가능합니다.

예제를 보면서 매개변수와 인자에 대해서 더 알아보겠습니다. 아래 코드를 실행해보겠습니다.

function func(value) {
  console.log(`함수 내부: value = ${value}`);
  value = "wecode";
  console.log(`함수 내부(할당 후): value = ${value}`);
}

// global variable
let value = "Rafael";
console.log(`함수를 호출하기 전: value = ${value}`);
func(value);
console.log(`함수를 호출 후: value = ${value}`);

함수 내부에서 변수 value에 값을 새로 할당했지만 함수 바깥의 변수 value의 값은 변하지 않았습니다. 이름은 같지만 둘은 서로 다른 변수입니다. 함수 밖의 변수 value는 스크립트 어디서나 접근 가능한 global scope를 갖습니다. 하지만 함수 내부의 변수 value는 함수 안에서 접근 가능한 function scope를 갖습니다.

function scope

function scope를 테스트해보겠습니다. 아래 코드를 실행시키고 나면 변수 isItOk의 값이 무엇이 되는지 보겠습니다.

function scopeTest() {
  let isItOk = true;
  if (isItOk) {
    isItOk = false;
  }
  console.log(isItOk);
}

scopeTest();

isItOk의 값이 false로 변경된 것을 확인할 수 있습니다. 변수 isItOk는 함수 안에서 선언되었기 때문에 함수 내부에서 참조할 수 있기 때문에 값이 변경된 것입니다.

이외에 한 가지 주의해야 할 것은 함수 바디에서 매개변수를 새로 선언하면 에러가 난다는 점입니다. 다만 재선언이 가능한 var 키워드를 이용한다면 가능은 하지만 바람직한 사용은 아닙니다. 매개변수에 실제로 어떤 데이터가 전달될지는 호출할 때 결정되어야 합니다.

저작자표시

빠른손김참치