Section 4. 자바스크립트 함수의 의미와 사용법

함수의 기본 문법이다.

function 함수명 (입력값) {
  // 수행할 일
  return 반환값 // 있을 시
}

함수명(입력값);

함수를 사용하는 이유는 무엇일까?

이유야 많겠지만 우선 함수를 사용하면 반복될 수 있는 작업을 매우 간단하게 처리할 수 있다는 사실만 알고 넘어가자.

 

함수의 또 다른 예시를 들어보자.

function add(parameterX, parameterY) {
  return parameterX + parameterY; // ⭐️ 값을 반환
}

let functionExampleZ = add(2, 3);

console.log(functionExampleZ);

이런식으로 인자 X와 Y를 받아 더하는 함수를 만들었다. 이것을 Z라는 변수에 함수 add의 결과를 담았다. 

여기서 중요한 점이 또 있는데 함수는 꼭 인자를 받거나 값을 반환하는 것은 아니다. 그리고 함수에 return 값이 없으면 undefined를 반환한다. 예시를 보면서 살펴보자.

let currentTemp = 24.5;

function logCurrentTemp () {
  console.log(`현재 온도는 섭씨 ${currentTemp}도입니다.`);
}

console.log('반환값:', logCurrentTemp()); //반환값: undefined

이처럼 logCurrentTemp()의 반환값은 이 함수에 return이 정의되어 있지 않음으로 undefined가 반환되는 것을 볼 수 있다.

 

호이스팅이란?

실행문보다 함수를 나중에 정의해도 실행이 되는 것을 호이스팅이라 한다. 

// 함수는 실행문보다 나중에 정의하는 것이 가능
// 변수나 상수는 불가능! (var 제외. var는 좀 이상하게 된다)
console.log(add(2, 7));

function add (parameterX, parameterY) {
  return parameterX + parameterX;
}

아무것도 선언하지 않고 실행문이 처음에 왔는데 막상 실행을 해보면 잘 실행이 된다. 이유는 호이스팅이 됐기 때문이다. 

원리는 자바스크립트가 문서를 실행할 때 먼저 코드를 돌면서 function을 가져다가 변수들로 등록을 하기 때문이다. 

*주의해야 할 점은 변수 = function() 또는 변수 () => 반환값 형태로 선언을 했을때는 호이스팅이 되지 않는다는 점을 외우고 넘어가자. 

이유는 이렇게 선언을 하면 자바스크립트가 미리 함수를 읽고 저장하지 않기 때문이다. 즉, 함수 생성 시점이 다르기 때문에 호이스팅이 되지 않는다고 할 수 있다. 

 

함수를 정의하는 방법들 (위에서 나온 방법을 제외하고)

1.

const subt = function (parameterX, parameterY) {
  return parameterX - parameterY;
}

console.log(subt(7, 2));

함수도 값이기 때문에 이렇게 변수에 직접 할당할 수 있다. function에 이름을 따로 써주지 않는 것이 포인트이다. 

 

2.

function add (parameterX, parameterY) {
  return parameterX + parameterY;
}

console.log(add(2, 7));

// 💡 기존의 함수를 재정의하는것도 가능
add = function (parameterX, parameterY) {
  console.log(`${parameterX}와 ${parameterY}를 더합니다.`);
  console.log(`결과는 ${parameterX + parameterY}입니다.`);
  return parameterX +parameterY;
}

console.log(add(2, 7));

add라는 함수를 정의하고 함수 add를 위처럼 재정의 하는 것이 가능하다. 

 

3. 화살표 함수

// 한 줄 안에 값만 반환시
const mult = (parameterX, parameterY) => parameterX * parameterY; //블록이 없어서 return문 생략

console.log(mult(2, 7));

// 두 줄 이상의 작업이 있을 시
const mult = (parameterX, parameterY) => {
  console.log(`${parameterX}와 ${parameterY}를 곱합니다.`);
  console.log(`결과는 ${parameterX * parameterY}입니다.`);
  return parameterX * parameterY;
};

console.log(mult(2, 7));

// 인자가 하나일 때는 괄호 없이 선언 가능
const pow = parameterX => parameterX ** 2;
console.log(pow(3));

화살표 함수는 인자를 받고 값을 반환하는 용도로 많이 사용된다. 

첫번째 예시를 보면 (parameterX, parameterY)라고 되어 있는데 이건 받는 인자를 말한다. function을 써주지 않는 것을 볼 수 있다. 그리고 => 뒤에는 반환하는 값을 적어준다. 즉 x*y는 반환값(return)이 된다. 블록이 없는 화살표 함수에는 return 문이 필요가 없다.