JavaScript Return

반환문(Return)의 활용

반환문이란, return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능이다. document.write(), alert()와 같이 구체적인 행동 명령이 있는 함수의 경우, 종료되면 호출 위치로 자동 복귀하기 때문에 return 제어문이 필요하지 않다. 하지만 단순 연산을 한 상태로 아무런 행동 명령어가 없는 함수의 경우 어떤 값을 호출 위치로 이동시켜야 하는지 지정되있지 않기 때문에 반드시 return 제어문이 필요하다.

 

 

 

(1) 값을 반환시킬 때#1

JavaScript

function multiply(a, b = 1) {

  a * b;

}

console.log(multiply(5, 2));    // undefined

console.log(multiply(5));       // undefined

JavaScript에서 함수의 매개변수는 undefined가 기본이다. 따라서 값이 명시되지 않으면 기본값인 undefined를 반환한다.

 

JavaScript

function multiply(a, b = 1) {

  return a * b;

}

console.log(multiply(5, 2));    // 10

console.log(multiply(5));       // 5

함수에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단되고, 값을 제공한 경우는 함수를 호출한 곳에 그 값을 반환한다.

 

 

 

(2) 값을 반환시킬 때#2

JavaScript

function addNumber(num1, num2) {

  let num3 = num1 + num2;

}

let num3 = 0;

addNumber(3, 5);

console.log(num3);

// 출력: 0

함수의 매개변수는 함수 내부에서만 작동하고 함수 외부로 나가면 사라지는 지역변수이기 때문에, 위 코드의 함수 내부에서 선언된 num3과 외부에서의 num3은 실질적으로 아무 상관이 없는 사이에 해당한다. 

 

JavaScript

function addNumber(num1, num2) {

  return (num3 = num1 + num2);

}

let num3 = 0;

addNumber(3, 5);

console.log(num3);

// 출력: 8

그러나 return을 활용해 addNumber 함수의 값을 반환시키면, 실질적으로 let num3=0 이후 num3 = 8로 재할당된 형태를 취하게 되므로 8이 출력되게 된다.

 

 

 

(3) 데이터를 반환하고 함수를 강제종료

JavaScript

function code() {

  let js_code = 1;

  return js_code;

  js_code_2 = 2;  // return이 이미 실행되어 이 코드는 실행되지 않는다.

}

 

 

 

(4) 재귀함수 호출(함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것)

JavaScript

let num = 0;

function fun() {

  num++;

  console.log(num, "<br>");

  if (num == 10) return;

  fun();

}

fun();

 

 

 

 

 

 

 

Return과 Break의 차이

return은 함수 자체를 중단시키는데 비해 break 명령문이 실행되면 블록 문장에서 빠져나와 다음 작업을 시작한다.

return	함수 탈출. 해당 함수(메서드) 자체에서 빠져나간다.
break	루프 탈출. for, switch, while문 등 함수 내의 반복문에서 빠져나간다.

function testBreak(num) {

  let i = 0;

  while (i < 6) {

    if (i === 3) {

      break;  //break 사용

    }

    i++;

  }

  return i * num;

}

function testReturn(num) {

  let i = 0;

  while (i < 6) {

    if (i === 3) {

      return;  //return 사용

    }

    i++;

  }

  return i * num;

}

testBreak(2);  //6

testReturn(2);  //undefined