[function] return 을 왜 사용하는 걸까?

직접 작성하며 차이를 알아보자. 👇🏻링크 클릭👇🏻
jsbin에서 javascript와 console만 선택하고 작성

시작!

function sayHello () {
  let friend = "Diana Kim";
  console.log('Hello! ' + friend);
}
// (nothing)

함수 선언만 하고 호출하지 않았기 때문에 어떤 동작도 하지 않고 내부의 콘솔도 진행되지 않음

function sayHello () {
  let friend = "Diana Kim";
  console.log('Hello! ' + friend);
}

sayHello(); // "Hello! Diana Kim"

👩🏻‍💻output 을 return 해줄 수 있는 함수 만들기

function sayHello2 () {
  let friend = "Diana Kim";
  
  return 'Return ' + friend;
}

sayHello2(); // (nothing)

console.log 를 찍지 않고 return 명령어를 사용해서 output 반환
즉, return 뒤는 내가 output 으로 나오게 하고 싶은 대상을 적는다.
Return Diana Kim이 output으로 도출되기는 했지만, 곧바로 콘솔로그에 찍혀서(run 실행 시) 사람이 확인할 수 있는 건 아니다. 왜냐?
console에 어떤 대상을 출력할 수 있는 명령어는 console.log() 뿐이다.
확인하고 싶다면 👇🏻

👩🏻‍💻return 한 값을 콘솔로그로 나타내기

return 한 대상은 그 자체로 특정한 데이터가 된다.

function sayHello2 () {
  let friend = "Diana Kim";
  
  return 'Return ' + friend;
}
console.log(sayHello2()); // "Return Diana Kim"

sayHello2 라는 함수를 실행해서 나온 ouput을 콘솔로그로 찍겠다는 뜻이다.
눈으로 보고 싶으면 console.log를 써야 한다!!

👩🏻‍💻그렇다면 왜 return 을 사용하는 걸까?

return 한 값을 변수에 할당할 수 있다.
Return Diana Kim 이라는 문자열을 다른 변수에 할당할 수 있다는 것!
해보자.

function sayHello2 () {
  let friend = "Diana Kim";
  
  return 'Return ' + friend;
}

let myFriend = sayHello2();
// (nothing)

sayHello2 라는 함수는 실행은 계속 되고 있지만, 마찬가지로 콘솔창에서는 뜨지 않음

function sayHello2 () {
  let friend = "Diana Kim";
  
  return 'Return ' + friend;
}

let myFriend = sayHello2();

console.log(myFriend); // "Return Diana Kim"

• ouput으로 return 하겠다고 한 'Return ' + friend 이라는 문자열이 함수를 실행시킴으로써 ouput으로 'Return Diana Kim' 이 반환됐다.
• 반환이 됨과 동시에 myFriend 라는 변수에 sayHello2의 결과물이 담겼다.

👩🏻‍💻응용

function sayHello3() {
  let sentence = "Hello! ";
  let name = 'Diana Kim';
  
  return sentence + name;
}
  console.log(sayHello3()); // Hello! Diana Kim

👩🏻‍💻정리

//예제 1
let number = console.log(1000); // 1000

console.log(number); // undefined

console.log는 ouput을 만들어내는 기능이 아니기 때문에 변수에 할당할 수 없다.

//예제 2
function Thousand() {
  return 1000;
}
let number2 = Thousand();
console.log(number2) // 1000

예제 1에서와 달리, 예제 2에서는 숫자 1000을 return 해줬기 때문에 number2에 할당이 되는 것!!

---

더 자세한 설명은 👇🏻
https://velog.io/@zunyange/05.-Function함수-데이터-반환하기1