자바스크립트 함수에서 return 이해하기!

 

안녕하세요 찐망고 입니다.

오늘은 함수에서 중요한 return을 이해해보도록 포스팅 할건데요

 

return이란?

return은 함수의 결과를 함수 밖으로 돌려주는 역할을 하는데,

함수 내부에서 어떤 값을 계산하거나 처리한 후, 그 결과를 다른 곳에서 사용할 수 있게 해주는 것을 뜻합니다.

 

쉽게 말하면:

함수를 하나의 기계라고 볼 때, 기계에 무언가를 넣어서 (입력값, 인자) 작업을 하고 나면, 

기계는 그 작업의 결과(출력값)를 내놓는데, 그 결과를 밖으로 내보내는 게 바로 return입니다~~~~

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

const result = addNumbers(5, 3); // 함수의 결과가 result에 저장됨
console.log(result); // 출력: 8

 

return의 역할:

1. 값을 돌려주기 

    ruturn a + b; 는 함수가 두 숫자를 더한 결과를 함수 호출한 곳으로 돌려줍니다. 여기선 8이 돌려지겠죠?

2. 함수의 종료

    return을 만나면 함수는 즉시 실행을 멈추고, 그 값을 돌려줍니다.

    만약 return뒤에 다른 코드가 있다면, 그 코드는 실행되지 않습니다.

function sayHello() {
  return "Hello!";
  console.log("This won't run"); // 여기는 실행되지 않음
}

console.log(sayHello()); // 출력: "Hello!"

 

반환값이 없는 함수:

return을 쓰지 않으면, 함수는 아무런 값을 돌려주지 않고 자동으로 undefined를 반환합니다.

function showMessage() {
  console.log("이것은 단순한 메시지입니다.");
}

const result = showMessage(); // 실행은 되지만 반환값은 없음
console.log(result); // 출력: undefined

 

반환값이 있는 함수:

반면에, 함수가 명시적으로 값을 반환하면 그 값을 다른 곳에서 사용할 수 있습니다.

function getMessage() {
  return "이것은 반환된 메시지입니다.";
}

const result = getMessage(); // 함수가 "이것은 반환된 메시지입니다."를 반환함
console.log(result); // 출력: "이것은 반환된 메시지입니다."

 

return undefined와 return 없는 함수:

return을 아무 값 없이 사용하면 **undefined**를 명시적으로 반환하게 됩니다.

또한, 아무것도 반환하지 않은 함수도 자동으로 undefined를 반환합니다.

function noReturnValue() {
  return; // return 뒤에 아무 값도 없으면 undefined 반환
}

console.log(noReturnValue()); // 출력: undefined

 

여러 개의 return을 가진 함수:

하나의 함수에서 여러 조건에 따라 다른 값을 반환할 수 있는데요.

if-else 구문을 사용하면 상황에 맞게 다른 return을 사용하면 상황에 맞게 다른 return을 사용할 수 있습니다.

function checkNumber(num) {
  if (num > 0) {
    return "양수입니다.";
  } else if (num < 0) {
    return "음수입니다.";
  } else {
    return "0입니다.";
  }
}

console.log(checkNumber(5));  // 출력: 양수입니다.
console.log(checkNumber(-2)); // 출력: 음수입니다.
console.log(checkNumber(0));  // 출력: 0입니다.

 

화살표 함수에서의 return:

ES6에서 도입된 화살표 함수는 한 줄짜리 함수의 경우, return을 생략할 수 있습니다. 

이 경우 자동으로 계산된 값을 반환합니다.

const add = (a, b) => a + b; // 한 줄일 때는 return 생략 가능
console.log(add(5, 3)); // 출력: 8

const addVerbose = (a, b) => {
  return a + b; // 여러 줄일 때는 return 필요
}
console.log(addVerbose(5, 3)); // 출력: 8

 

함수의 반환값을 이용한 체이닝:

여러 함수를 체이닝 해서 사용할 때, 반환된 값을 다른 함수의 인자로 사용할 수 있습니다.

function multiplyByTwo(num) {
  return num * 2;
}

function addThree(num) {
  return num + 3;
}

const result = addThree(multiplyByTwo(5)); // 5 * 2 + 3
console.log(result); // 출력: 13

 

 

정리

• return은 함수가 계산한 결과를 돌려주는 역할을 함
• return을 만나면 함수는 바로 종료되고, 그 뒤의 코드는 실행되지 않음
• 함수에 return이 없으면 undefined를 반환함
• console.log()는 단순히 화면에 출력을 하는 거라 반환값과는 관련이 없음
• 화살표 함수에서는 한 줄일 때 return을 생략할 수 있음