[Javascript] 함수의 선언과 호출의 차이점

1. 자바스크립트에서 함수란?

보통 함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. … 함수에 값을 '전달'하면, 함수는 값을 '반환'할 것입니다.
출처: MDN 함수

MDN사이트에서 가져온 함수의 정의다.
함수가 왜 필요할까? 함수는 재사용이 가능한 기능을 수행하기 위해서 작성한다!

계산기를 예로 들면 + 버튼으로 앞에 오는 숫자와 뒤에 오는 숫자를 더해준다. 이런 기능을 수행하기 위해 add()라는 함수를 정의해두면 필요할 때마다 add()함수로 더하기 기능을 편하게 수행할 수 있다.

자바스크립트뿐만 아니라 다른 프로그래밍 언어에서도 어떤 값을 전달 받고, 함수 내부에서 계산해서 계산된 값을 반환하는 함수는 엄청나게.. 유용하다.

2. 함수의 선언

function sayHello() {
  console.log("안녕하세요!)
}

(def로 함수를 선언하는 파이썬과는 다르게)
자바스크립트에서는 함수를 선언할 때 function으로 시작한다.
왜냐하면 자바스크립트에서 모든 함수는 function 객체이기 때문이다!

자바스크립트에서 함수는 항상 중괄호로 함수 본문을 감싸줘야 한다.
중괄호 안에 오는 코드는 함수가 호출되었을 때 순서대로 실행되는 부분이다.

function sayHello(input) {
  let output = input + 1
  return output
}

함수를 시작할때 함수이름 뒤에 소괄호를 적어서 함수임을 표시하기도 하지만 이 자리에 입력을 받기도 한다.
소괄호 안의 변수 이름으로 함수 내부에서 사용하면 된다.

위 함수의 결과는 return문으로 반환했다. == 함수가 호출되면 output이 결과물로 전달된다는 뜻!
함수가 다 실행되고 나서 결과물을 반환할 필요가 없다면 return문을 생략해도 된다.

---

let sayHello = (input) => {
  let output = input + 1
  return output
}

"화살표 함수"라는 방식으로 간단하게 함수를 선언할 수도 있다.
찾아보니 function으로 선언하는 일반함수와는 다른 점이 있는데, 아직 이해하기 어려워서.. 제대로 이해했을 때 내용을 더 추가해야 겠다.

3. 함수의 호출

sayHello()   //"안녕하세요!" <- 제일 위의 함수 결과

console.log(sayHello(1))  //2 <- 바로 위의 함수 결과

함수의 호출은 굉장히 간단하다!
함수명()만으로 만들어둔 함수가 호출되서 함수의 본문이 순서대로 실행된다.
함수는 선언만으로는 실행되지 않고 호출이 있을 때 비로소 실행된다.
그런데 여기서 함수의 반환값과 *화면에 출력되는 것의 차이를 알아야 한다.

4. 함수의 호출과 *화면에 출력하는 것의 차이점

sayHello(1)  // 화면에 아무 것도 출력되지 않음

console.log(sayHello(1)) // 화면에 2가 출력됨

sayHello(1)만 실행된 경우 함수가 호출되어 본문대로 output이 2로 생성되어 반환된다. 하지만 함수의 반환값을 *화면에 출력하라는 코드가 없기때문에 프로그램에 돌려주기만 할뿐이다.

반대로 아래의 코드는 sayHello함수의 반환값 2를 *화면에 출력하는 코드 console.log 안에서 받고 있기 때문에 *화면에 출력하게 된다.

---

* 정확히 말하면 화면에 출력하는 것이 아니라 콘솔에 로그를 남긴다.