[Javascript] 함수(3) - 함수 호이스팅, 매개변수

◽️ 함수 생성 시점과 함수 호이스팅

console.log(add(2,5)); //7
console.log(sub(2,5)); //TypeError

//함수 선언문
funcion add (x, y) {
  return x + y;
}

//함수 표현식
var sub = functiom sub (x, y) {
  return x - y ;
};

함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르다.

함수 선언문은 런타임 (코드가 한줄씩 순차적으로 실행되는 시점) 이전에 실행된다. 그래서 런타임 이전에 함수 객체가 생성되기 때문에 런타임에 함수를 호출할 수 있는 것이다. 이런 특징을 함수 호이스팅 이라고 한다.

함수 호이스팅
함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징

함수 표현식은 변수에 할당되는 값이 함수 리터럴인 문이다.
변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만, 변수 할당문의 값은 할당문이 실행되는 시점인 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
따라서 함수 표현식으로 함수를 정의하면 함수 호이스팅이 아닌 변수 호이스팅이 발생한다.

변수 호이스팅
런타임 이전에 자바스크립트 엔진에 의해 먼저 실행되어 식별자를 생성한다는 점에서 함수 호이스팅과 동일하지만, var 키워드로 선언된 변수는 undefined로 초기화 된다.

◽️ 매개변수와 인수

함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달한다.

function add(x, y) { //x, y는 매개변수
  return x + y;
}

add(2, 5); //2, 5는 인수

• 매개변수의 스코프는 함수 내부이다.
• 인수가 부족할 경우 부족한 인수는 undefined로 초기화 되어 실행된다.
• 인수가 초과할 경우 무시된다.

따라서 인수가 전달되지 않은 경우 단축평가를 사용해 매개변수에 기본값을 할당할 수도 있다.

// 방법 1
function add(a, b, c) {
  a = a || 0;
  b = b || 0;
  c = c || 0;
  return a + b + c;
}

// 방법 2
function add(a=0, b=0, c=0) {
  return a + b + c;
}

// 결과값
console.log(add(1, 2, 3)); //6
console.log(add(1, 2)); //3
console.log(add(1)); //1
console.log(add()); //0

위와 같은 매개변수 기본값은 매개변수에 인수를 전달하지 않았을 경우와 undefined를 전달한 경우에만 유효하다.

이상적인 함수는 한가지 일만 해야하며 매개변수의 개수가 적을수록 좋다.

매개변수는 최대 3개 이상을 넘지 않는 것을 권장하며, 만약 그 이상의 매개변수가 필요하다면 하나의 매개변수로 선언하고 객체를 인수로 전달하는 것이 유리하다.