티스토리 뷰
함수에서 return문은 어떤 값을 되돌려주는 아웃풋의 역할을 합니다.
function square(x){
return x * x;
}
console.log(square(3));
5번째 줄을 보면 square 함수를 호출하면서 숫자 값 3을 파라미터로 전달하고 있습니다.
그러면 여기 파라미터 x에 3이 전달되고 리턴 3 * 3이 돼서 이 함수 호출 부분은 9를 되돌려 받게 됩니다.
그래서이 코드는 결국 console.log(9)라는 코드가 돼서 저장하고 실행해보면 9가 잘 출력이 되는 것을 확인할 수 있습니다.
이렇게 보면 생각보다 간단한데 사실 리턴문에는 이렇게 결과값을 돌려주는 역할 말고도 하나의 역할이 더 있습니다.
바로 함수의 실행을 중단하는 건데요. 말 그대로 함수 내부에서 리턴 키워드가 나오면 함수의 실행은 그 지점에서 중단이 됩니다.
function square(x) {
console.log('return 전');
return x * x;
console.log('return 후');
}
console.log('함수 호출 전');
console.log(square(3));
console.log('함수 호출 후');
위에서는 함수 안에 단순히 리턴문 하나만 있었는데 위 아래로 다른 코드도 있습니다.
그런데 리턴문 아래에 있는 코드는 뭔가 색이 투명합니다.
저장하고 실행해보면 이 코드만 실행이 되지 않은 걸 확인할 수 있습니다.
'return 후'라는 문자열은 콘솔에 출력이 되지 않는데요.
이유는 일단 1번 줄부터 6번 줄까지는 특별한 동작이 없는 함수 선언과 줄바꿈입니다.
그리고 7번 줄부터 '함수 호출 전'이라는 문자열을 출력하게 되는데요.
그 다음 8번 줄에서는 square 함수를 호출하고 파라미터로 3을 전달해줍니다.
그럼 이제 함수 선언 부분에 코드가 실행이 되는데 함수 내부에서도 제일 윗줄부터 'return 전'이라는 문자열이 출력됩니다. 그 다음에는 리턴 x*x이니까 3*3의 결과인 9가 리턴이 되는데요.
이렇게 리턴문을 통해서 함수 호출 부분에 어떤 값을 되돌려주고 나면 그대로 함수의 실행이 중단이 됩니다.
그렇기 때문에 '함수 호출 후'라는 문자열을 9번 줄에서 출력을 하고 프로그램이 종료가 되는데요.
4번 줄은 square 함수를 어떤 식으로 호출을 해도 여기 리턴문으로 인해서 함수가 종료되기 때문에 리턴문 아래에 있는 코드들은 절대로 실행될 일이 없습니다. 이런 코드를 아무런 의미가 없다고 해서 죽은 것에 비유하는 'Dead Code'라고 부르는데요. 절대 실행될 수 없는 코드니까 당연히 작성하지 않는 것이 좋습니다.
리턴은 함수 호출 부분에 어떤 값을 되돌려주는 것 뿐만 아니라 함수 자체의 실행을 중단합니다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
[추상화] 09.옵셔널 파라미터 (1) | 2022.09.20 |
---|---|
[추상화] 07. return과 console.log의 차이 (0) | 2022.09.19 |
[추상화] 02. 복합 할당 연산자 (0) | 2022.07.04 |
[추상화] 01. 할당 연산자 (0) | 2022.07.04 |
[자료형] 21. null과 undefined (0) | 2022.07.04 |
- Total
- Today
- Yesterday
- filter
- redux-thunk
- some
- 비교 연산자
- findindex
- 불변 객체
- 기본형 데이터
- EVERY
- foreach
- map
- find
- 동적(dynamic) 언어
- redux middleware
- redux thunk
- 얕은복사
- null
- undefined
- redux
- 느슨한 타입(loosely typed)
- 타입변환
- redux-middleware
- 참조형 데이터
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |