자바스크립트 반환(return)문 사용하기

👾 반환(ruturn)문이란?

 자바스크립트에서는 함수를 호출했을 때 함수를 호출한 곳에 특정 값을 반환하게 할 수 있는데, 이 특정 값을 반환 값(return value)이라고 한다. 반환값을 통해 함수에서 실행된 결과를 전달받을 수 있다.

 

function sum(x, y) {
  return x + y; // 반환문	
}

let result = sum(1, 2);
console.log(result) // 3

→ return문의 결과는 함수 외부로 반환되고, 함수 외부에서 함수의 실행결과를 확인할 수 있다.

 

👩🏻‍💻 example

function examPass(name, html, css, js){
  let comment = name + '학생은 ';
  if (html >= 60 && css >= 60 && js >= 60) {
      comment += '전과목 PASS';
  } else {
    if (html < 60) {
      comment += 'html 재시험 ';
    }
    if (css < 60) {
      comment += 'css 재시험 ';
    }
    if (js < 60) {
      comment += 'javascript 재시험';
    }
  }
  return comment;
}
console.log(examPass('A', 80,90,70)); // A학생은 전과목 PASS
console.log(examPass('B', 80,50,50)); // B학생은 css 재시험 javascript 재시험
console.log(examPass('C', 50,50,70)); // C학생은 html 재시험 css 재시험

 

👾 return문 사용하기

1. return은 함수 내 어디서든 사용할 수 있다.

 함수 내부의 코드가 차례대로 실행되다가 return을 만나면 함수 실행은 즉시 중단되고 함수를 호출한 곳에 값을 반환한 후 함수는 종료된다. (return문 뒤에 나오는 코드는 실행되지 않음)

function sum(x, y) {
  return x + y; // 반환문
  console.log('실행되지 않습니다');
}

let result = sum(1, 2);
console.log(result) // 3

let sumResult = sum(3, 2) + sum(5, 7);
console.log(sumResult) // 17

• 함수 호출 결과를 변수(result)에 할당할 수 있다.

• 함수의 호출 결과끼리의 연산도 가능하다.

 

2. return만 명시할 수 있고, return문이 없을 수도 있다.

 return만 명시된 함수는 return을 만나면 즉시 종료된다.

 return 지시자만 있거나 return문이 없는 함수는 undefined를 반환한다.

 

👩🏻‍💻 return만 명시한 경우

function showError(){
  console.log("에러가 발생했습니다.");
  return;

  console.log("이 코드는 절대로 실행되지 않습니다.");
}

const result = showError(); // 에러가 발생했습니다.
console.log(result); // undefined

 

👩🏻‍💻 return문이 없는 경우

function showError(){
  console.log("에러가 발생했습니다.");
}

const result = showError(); // 에러가 발생했습니다.
console.log(result); // undefined

 

3. 함수 하나에 여러 개의 return문이 올 수도 있다.

function checkAge(age) {
  if (age >= 18) {
      return true;
  } else {
      return false;
  }
}

console.log( checkAge(15) ) // false
console.log( checkAge(20) ) // true

 

 

4. return문은 배열이나 객체를 포함한 모든 타입의 값을 반환할 수 있다.

 

👩🏻‍💻 배열을 반환하는 예시

function getEvenNumbers(numbers) {
  let evenNumbers = [];

  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
      evenNumbers.push(numbers[i]);
    }
  }
  return evenNumbers;
}

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let evenNumbers = getEvenNumbers(numbers);

console.log(evenNumbers); // [2, 4, 6, 8, 10]

 

👩🏻‍💻 객체를 반환하는 예시

function createPerson(name, age) {
  return {
    name: name,
    age: age,
    greet: function() {
      console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
    }
  };
}

let person1 = createPerson("Hanna", 19);
let person2 = createPerson("Jane", 25);

person1.greet(); // "Hello, my name is Hanna and I'm 19 years old."
person2.greet(); // "Hello, my name is Jane and I'm 25 years old."

 

5. 반환하려는 값이 긴 표현식인 경우, 표현식이 return 지시자가 있는 줄에서 시작하도록 작성해야 한다.

 반환하려는 값이 긴 표현식인 경우, return과 반환하려는 값 사이에 새 줄을 넣어 코드를 작성하면 원하는 값을 얻지 못한다. 자바스크립트는 return문 끝에 세미콜론(;)을 자동으로 넣기 때문에 표현식을 여러 줄에 걸쳐 작성하고 싶다면 표현식이 return 지시자가 있는 줄에서 시작하도록 작성해야 한다.

return // return; 과 같은 의미
 (some + long + expression + or + whatever * f(a) + f(b))

⬇︎ // 아래와 같이 작성해야 원하는 값을 얻을 수 있다.

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
)

 

---

✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊