📗함수

자바스크립트에서 함수는 여러 개의 명령어를 묶음 단위로 실행할 수 있는 기능입니다.

예를 들어, 여러분이 드론을 조종한다고 생각해보세요.

같은 패턴의 명령어들의 루틴을 매일 아침마다 실행해야 합니다.

오른쪽 👉🏻 왼쪽 👉🏻 왼쪽 👉🏻 윗쪽.

매일 루틴처럼 해야 하는 명령어다보니, 조금 더 편리하게 처리할 수 있는 방법이 있다면 좋을것 같습니다.

그래서 우리는 드론에게 "오전 루틴"은 "오른쪽 👉🏻 왼쪽 👉🏻 왼쪽 👉🏻 윗쪽"이라고 기억하도록 합니다.

그리고 이후부터는 각 명령어를 매번 명시하기 보다는, "오전 루틴을 실행해줘"라고만 명령합니다.

자바스크립트의 함수도 이와 같이 1개 이상의 명령어들을 집합으로 묶어 실행할 수 있도록 하는 기능을 제공합니다.

코드로 한번 살펴볼까요?

함수 만들기

함수는 아래와 같이 만들 수 있습니다.

코드로 작성해보자면,

위의 예시 코드는 아래와 같은 내용입니다.

greet 이라는 이름의 새로운 변수를 만들어지며, 자바스크립트는 greet 이라는 이름을 이해할 수 있게 됩니다.
greet 이라는 변수는 위에 만들어진 함수를 가리키게 됩니다. 함수를 만들긴 했지만, 아직 함수 내용에 작성한 코드가 실행되지는 않습니다. 함수 내용에 담긴 코드를 실행시키려면, 아래의 절차를 진행해야 합니다.

다음과 같은 코드를 한번 실행시켜보세요.

console.log(1);

function greet () {
  const myName = "ken";
  console.log(`Hello ${myName}`); // 이 부분이 출력되었나요?
}

console.log(2);

출력 결과가 어떻게 되었나요?

함수 내부코드가 실행되지 않았다는 것을 확인하셨나요?

그렇다면 함수 내용에 작성한 코드를 실행하려면 어떻게 해야 하는지 알아볼까요? 🧐

함수 호출하기

함수 내용에 작성한 코드를 실행시키려면 함수를 호출해야 합니다. 함수는 "호출한다", "실행한다" 등의 용어를 사용합니다. 함수를 호출하려면 다음과 같이 함수 이름 뒤에 소괄호를 붙여 호출할 수 있습니다.

코드로 작성해본다면 아래와 같습니다.

function greet () {
  const myName = "ken";
  console.log(`Hello ${myName}`);
}

greet(); // greet 함수 호출

위와 같이 greet 함수를 호출하는 코드를 추가하면 greet 함수 내용에 작성된 코드가 실행되며 아래와 같은 출력 결과를 확인할 수 있습니다.

다시 정리해보자면,

함수 내부에는 우리가 원하는 만큼의 코드를 마음껏 작성할 수 있습니다. 또 다른 함수를 작성할 수도 있고, 반복문, 조건문 등 모든 문법을 제한없이 사용할 수 있습니다.

함수의 반환값

모든 함수는 실행되었을때 반드시 실행에 대한 결과를 갖습니다. 함수 실행에 대한 결과를 우리는 반환값 혹은 결과값이라고 합니다.

아래와 같이 return 키워드를 사용하여 함수의 반환값을 지정할 수 있습니다.

function getGreeting () {
  const myName = "ken";
  return `Hello ${myName}`;
}

함수의 반환값을 지정하기 위해서는 return 이라는 문법 키워드를 이용해야만 합니다. 💁🏻‍♂️ 다르게 말하자면, 반환값을 판단하기 위해서는 return 키워드만 찾아보면 됩니다.

위처럼 설정된 반환값은 어떤 경우에 활용될 수 있을까요?

우선 간단하게, 아래 예시처럼 우리는 함수 실행문의 결과를 다른 변수에 전달할 수 있습니다.

function getGreeting () {
  const myName = "ken";
  return `Hello ${myName}`;
}

const result = getGreeting();
console.log(result); // ?

위와 같이 코드를 작성한 경우,

6번째 줄에서 getGreeting 함수 실행문이 실행됩니다.
getGreeting 함수 내용에 작성된 코드(2, 3번째 줄)가 실행됩니다.
getGreeting 함수의 실행 결과로 "Hello ken" 이라는 문자열이 반환(return)됩니다.
위에서 반환된 값이 6번째 줄에서 result 변수에 대입됩니다.
7번째 줄에서 result 변수의 값을 콘솔에 출력합니다.

함수의 반환값은 함수 실행문이 위치한 자리에 함수 실행문을 대체하여 들어가게 되는 효과가 발생합니다.

실제로 우리가 작성한 getGreeting 함수 실행 전의 코드는 아래와 같지만,

getGreeting 함수가 실행된 시점 이후의 우리 코드는 함수의 반환값이 함수 실행문이 작성된 위치를 대체하기 때문에 아래와 같은 상황인 것입니다.

함수 반환값이 함수 실행문이 작성된 위치를 대체한다는 것은 우리의 코드가 실행되는 과정에서 자바스크립트의 동작 흐름을 설명하는 것이고, 실제 파일이 수정되는 것은 아닙니다.

출력 결과를 확인해보면 다음과 같이 나타납니다.

암묵적 반환값, undefined

함수에서 명시적으로 return 을 사용하지 않아도 함수의 반환값은 반드시 존재합니다.

function logGreeting () {
  const myName = "ken";
  console.log(`Hello ${myName}`);
}

const result = logGreeting();
console.log(result);

[매우 중요 🎯] 함수의 반환값은 return 문이 결정합니다. 위의 예시 코드는 return 이 사용되지 않았습니다. 위의 예시 코드처럼 return 이 명시적으로 되지 않은 경우, 함수의 반환값은 기본적으로 undefined 입니다.

함수의 매개변수

함수는 외부에서 데이터를 전달받아 함수 내부 연산에 사용할 수 있는데, 이를 매개변수라고 합니다.

함수를 만들때 아래와 같이 매개변수에 대한 가정을 하고 함수 내용을 작성합니다.

function getGreeting (name) {
  return `Hello ${name}`;
}

함수 내용은 함수가 호출되어야 실행됩니다. 매개변수 또한, 함수를 만들 당시에는 이 자리에 어떤 값이 들어올 예정이라는 표식만 해두는 것이며, 실제로 어떤 값이 들어오는지는 함수가 호출되는 시점에 결정됩니다.

function getGreeting (name) {
  return `Hello ${name}`;
}

const result = getGreeting("ken");
console.log(result);

위와 같이 5번째 줄에서 getGreeting 함수를 호출할 경우, 호출 시점에 name 이라는 매개변수에 "ken" 이라는 문자열이 대입되어 getGreeting 함수가 실행됩니다.

매개변수를 사용하면, 하나의 함수를 활용하여 상황에 맞춰 동적으로 대응할 수 있습니다.

function getGreeting (name) {
  return `Hello ${name}`;
}

const greetingToKen = getGreeting("ken");
const greetingToWan = getGreeting("wan");

console.log(greetingToKen);
console.log(greetingToWan);

매개변수는 우리가 원하는 만큼 많이 선언하고 사용할 수 있지만, 같은 함수 내에서는 각 매개변수의 이름은 고유해야 합니다. 💁🏻‍♂️

function add (a, b) {
  return a + b;
}

const sum = add(3, 5);
console.log(sum);

function multiply (a, b, c) {
  return a * b * c;
}

const result = multiply(2, 4, 3);
console.log(result);

함수의 종료

return 이라는 문법 키워드는 그 특성상 함수 내부에서만 사용할 수 있는데 또 한가지 중요한 기능이 있습니다. 함수 내부 코드는 return 이 실행되는 순간 함수의 실행이 종료됩니다.

코드로 보는게 조금 더 이해가 쉬울것 같으니, 예시를 볼까요? 🥸

function eatDinner (menu) {
  if (menu === "burger") {
    console.log("조건문 내부");
    return "good";
  }
  
  console.log("조건문 아랫 부분");
  return "no good";
}

const feeling = eatDinner("burger");
console.log(feeling);

위와 같이 코드를 실행하는 경우, 출력문은 1개만 실행됩니다. return 문은 함수의 실행을 즉시 종료시키기 때문이죠. 💁🏻‍♂️

예시를 하나만 더 볼까요?

function countDown (year, target) {
  for (let i = year; i > 0; i -= 100) {
    if (i === target) {
      return "yahoo";
    }
    
    console.log(i);
  }
  
  return "done";
}

const result = countDown(2024, 1024);

위와 같이 반복문 내부에서 return 문이 실행되더라도 함수의 실행을 종료시킵니다.

함수는 우리가 코드를 작성할때 매우 기본적인 단위로 자주 사용하는 묶음이기에 기본적인 기능에 대해 정확히 이해하고 사용해야만 합니다.

함수를 만들고 호출되는 것
함수의 반환값
함수의 매개변수

우선 위 개념들에 대해 반드시 정확히 이해할 수 있도록 하세요. 🤓

PreviousJavaScript Part 2 Next배열

Last updated 1 month ago