JavaScript 기초 : 추상화 3. return문 이해하기

3. return문 이해하기

 

return문의 역할 2가지

1. return문은 어떤 값을 되돌려주는 output의 역할을 한다. 

(함수 호출 부분을 return문 뒤에 오는 값으로 대체한다.)

 

2. return문은 함수의 실행을 중단한다. 

(현재 함수 실행을 멈추고 함수가 호출된 지점으로 돌아가서 진행한다.)

 

 

???? 세상에 무슨 말이지?

 

내가 이해한 바로 풀어써보자.

return은 함수를 실행해서 얻은 어떤 값을 당장 콘솔에 출력하는 것이 아니다.

보통 console.log()와 헷갈리는데 

return은 단순히 return 다음 값으로 대체! 하는 것이다.

그래서 return 뒤의 값은 다른 연산이나 함수 실행을 위해 사용하고 싶을 때 사용할 수 있다. 

 

 

 

???

 

그래도 어렵고 헷갈리니

예시를 살펴보자. 

function square(x){
	console.log('return 전');
    return x * x;
    console.log('return 후');
}

console.log('함수 호출 전');
console.log(square(5));
console.log('함수 호출 후');

square라는 함수를 살펴보자.

x를 파라미터로 받고 있고

return 전 이라는 문자를 출력하고

x * x 값을 리턴한다.

그리고 return 후 라는 문자를 출력한다.

 

이제 콘솔에 출력되는 부분을 보자

일단

함수 호출 전 이라는 문자가 출력된다. 

그리고 함수 square(5) 가 호출되었으므로 

return 전이라는 글자가 출력된다.

그리고 3 * 3 = 9 가 출력된다.

그 다음은 함수의 실행이 종료된다.

즉 return 후 라는 글자는 절대 호출이 되지 않는다.

그 다음은 함수 호출 후 라는 글이 출력된다. 

 

정리해보면

 

함수 호출 전

return 전

9

함수 호출 후

 

이렇게 콘솔에 출력된다.

 

return 후 라는 글자처럼 출력이 되지 않는 것을 dead code라고 한다.

그래서 return 문이 나오고 나면 dead code는 안써주는 것이 좋다. 

 

 

 

3-2. return문과 console.log 차이 구분하기

 

예시를 보면서 차이를 구분해보자!

function printSquare(x) {
	 console.log(x * x);
}

function getSquare(x) {
	return x * x;
}

printSquare(5);
getSquare(5);
console.log(getSquare(5));
console.log(printSquare(5));

 

우선 printSquare(x) 함수의 내용은  console.log( x * x ) 이다. 

즉, x * x값을 콘솔에 출력하라는 것이다. 

그렇다면 getSaure(x) 함수의 내용은 어떨까? return x * x이다.

즉, x * x값을 불러온다.(실행하고 돌려준다 라는 의미이다.)

 

그럼 함수 호출 부분을 보자!

printSquare(5)를 했으니 25가 출력된다.

getSquare(5)를 했으니 아무것도 출력이 안된다.

console.log(getSquare(5)를 했으니 이제 25가 출력된다.

console.log(printSquare(5))를 했을때는? printSquare(5)을 실행하고 console.log함수도 실행해야 한다.

printSquare(5)함수에는 return문이 없다. return 문이 없는 함수를 실행하면 함수 호출 부분은 undefiend 값을 return받게 된다. 

그래서 undefined값이 출력된다. 

 

정리해보면

 

25

25

undefined 

 

이렇게 출력된다. 

 

다른 예시도 살펴보자!

// calculateRectangleArea라는 이름의 직사각형 넓이 구하는 함수
function calculateRectangleArea(width, height){
  return width * height;
}

// area1,2,3 변수 선언하기
let area1 = calculateRectangleArea(4, 5); // 가로 4, 세로 5인 직사각형의 넓이 계산
let area2 = calculateRectangleArea(5, 6); // 가로 5, 세로 6인 직사각형의 넓이 계산
let area3 = calculateRectangleArea(6, 7); // 가로 6, 세로 7인 직사각형의 넓이 계산

//직사각형 넓이를 출력하기
console.log(`직사각형1: ${area1}, 직사각형2: ${area2}, 직사각형3: ${area3}`);

이 예시 또한 함수에 return 문만 들어있다. 

즉 함수 자체에 console.log 가 없다. 

 

그래서 함수의 결과를 출력해주고 싶을 때에는

console.log(calculateRectangleArea(4,5))처럼 콘솔.로그를 써줘야한다. 

 

이 함수 출력 결과는 무엇이 나올까?

 

결과는

 

직사각형1: 20, 직사각형2: 30, 직사각형3: 42

 

이렇게 출력된다.