📌 들어가기 전에..
✍️ JavaScript의 함수파트를 공부하면서, 브라우저에 있는 콘솔 창으로 그때그때 공부한 간단한 코드들을 실행시켜 보곤 하는데 어느순간 console.log와 return을 구분없이 사용하고 있는 자신을 발견하게 되었다.😓
내 코드가 undefined 를 띄우는 이유 중 하나가 여기 있다고 생각되어서, 이 두가지의 개념을 확실히 알기 위해 정리했다.
예제 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의 함수 종료
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()
라는 표현의 값은 무엇일까?
getA()
라는 함수 실행문을 설명하자면, getA
가 함수여야 한다. 실제로 우리 예제 코드에서는 getA
라는 함수가 존재한다.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
안녕하세요 글 잘봤습니다 return의 함수 종료 파트에서 console.log('a is bigger than b')를 출력하고 리턴을 하셨는데 그냥 return 'a is bigger than b'; 하는 것과 어떤 차이가 있나요?