JavaScript 함수 리턴 명령문

📌 들어가기 전에..

✍️ JavaScript의 함수파트를 공부하면서, 브라우저에 있는 콘솔 창으로 그때그때 공부한 간단한 코드들을 실행시켜 보곤 하는데 어느순간 console.log와 return을 구분없이 사용하고 있는 자신을 발견하게 되었다.😓
내 코드가 undefined 를 띄우는 이유 중 하나가 여기 있다고 생각되어서, 이 두가지의 개념을 확실히 알기 위해 정리했다.

📍 console.log와 return의 차이

예제 1.

▼ (1-1) 함수 내부에 console.log 를 사용해서 정의하여 작성

//ex.1-1)
function calculate(x,y){
    console.log((x*y));
}
let area1 = calculate(3,4); // 12
console.log('Area1:' + area1); // Area1:undefined

▼ (1-2) 함수 내부에 return 을 사용해서 정의하여 작성

//ex.1-2)
function calculate(x,y){
    return x*y;
}
let area2 = calculate(3,4);
console.log('Area2:' + area2); // Area2:12

📌 check!

• console.log 는 콘솔에 정보를 인쇄하는 데 사용되는 기능이다.

• return 은 함수의 결과를 돌려준다.

• ex.1-1) 마지막 행에 undefined 가 출력 되는 이유는 calculate 에서 아무런 값도 돌려주지 않기 때문! 즉, console.log 는 show라는 개념이라서, 변수에 대입해도 아무 값도 들어가지 않으며 그저 보여주기만 하는 것이라고 이해했다.

예제 2.

▼ 함수 표현식 방식으로 정의한 함수

//ex2-1.)
let square = function square(x) {
  return x*x;
};

▼ 예제의 함수를 호출해보자.

//ex2-2.)
let square = function square(x) {
  return x*x;
};
let ans = square(5); // ans라는 변수는 25라는 값을 갖게됨.

▼ 위 ex2-2. 와 같이 호출을 하더라도, 이것은 콘솔에 나타나지 않으며, 값을 보기위해서 다음과 같이 작성해보자.

 let square = function square(x) {
  return x*x;
};
let ans = square(5);
console.log(ans);

▼ 혹은 이렇게 조금 더 심플하게 작성 할 수 있다.

let square = function square(x) {
  return x*x;
};
console.log(square(5)); // 이부분의 행 때문에 혼동 될 수 있을 것 같다.

예제 1. 의 경우에서도 console.log(calculate(3,4)); 와 같이 쓰는 습관 때문에 혼동되었던 것 같다.🤧

예제 3.

function add(a,b){
    const sum = a + b;
    return sum;
}
const fun = add(1, 2);
console.log(fun);

▼
✍️
1) 1행의 add 라는 함수는 a와 b를 받아오니까, 5행 add 를 호출하면서 1과 2를 전달하게 되면, 함수 add 의 a와 b에는 1과 2라는 값이 들어오게된다.

2) 변수 sum 의 a와 b는 파라미터 a와 b에 접근하여 값을 받아올 수 있게 되어 sum 이라는 변수에는 3이라는 값이 할당되어진다.

+) 지금 시점에서, add 라는 함수는 이 코드블럭을 수행한 다음 아무것도 return 해주지 않았다. (아무런 값도 전달되지 않음.)

3) 그래서 우리가 이 a와 b를 더한 값3 을 전달하고 싶다면, 3행에 return 이라는 키워드를 이용해서 우리가 계산한 값을 전달하면 된다.

4) 함수가 전달한 값은 곧바로 fun 이라는 변수에 할당되어지고, 6행에서 값을 console.log 로 출력하게 되면, 3이라는 결과가 나오게 된다!

---

📍 Return 명령문

• return 명령문은 함수 실행을 종료하고, 주어진 값을 호출 지점으로 반환한다.

• 함수 내부에서 return 명령문이 실행될 경우, 해당 함수가 종료된다.

• 즉, return 은 함수를 종료하는 기능과 더불어 어떠한 값을 반환할 수 있게 해준다.

return의 함수 종료

let re = function(){
    console.log('start');
    let a = 3;
    let b = 1;

    if (a > b) {
        console.log('a is bigger than b');
        return;
    }
    console.log('last console'); // 실행되지 않는다.
} 

re();

// start, a is bigger than b

▼
✍️ if 구문 내부가 실행되면서 return 명령문이 실행되었기 때문에 함수를 종료하고 이후의 실행은 하지 않는다. 현재 return 의 위치는 re 라는 함수안에 속해있으므로, re 함수의 코드 실행이 종료되어 세번째 콘솔 메세지는 나타나지 않았다.

return의 함수 반환

//ex1.)
function getA(){
   return 1;
}

let a = getA();
console.log(a);  

▼
✍️ getA 라는 함수를 정의한 다음, 변수 a 에 할당했다. 그렇다면 getA() 라는 표현의 값은 무엇일까?

• 아래의 5행의 getA() 라는 함수 실행문을 설명하자면, getA 가 함수여야 한다. 실제로 우리 예제 코드에서는 getA 라는 함수가 존재한다.
• 함수 실행문이 있는 자리는 해당 함수의 return값으로 대체된다.
• 따라서 return 이라는 단어 뒤에 오는 해당 값이 함수에서 반환되어 getA 라는 함수의 return 값은 1이다.

//ex2.)
let re = function(){
    let a = 3;
    let b = 1;

    if (a > b) {
        return;
    }
    return "bye";
}

let ret = re();
console.log(ret); // undefined

▼
✍️ return 뒤에 어떤 값도 지정해주지 않은 경우에는 기본적으로 undefined 가 반환된다.

reference
codecademy velogFunction MDN-console.log() MDN-return