JS) 함수(Function) 이해하기 3

내용 및 코드 참고
<초보자를 위한 JavaScript 200제>,
https://ko.javascript.info/rest-parameters-spread

1. 함수 기본 매개변수

매개변수를 정의할 때 기본으로 할당될 인자값과 함께 작성하는 매개변수를 말한다.
아래의 코드를 참고하면 이해 가능하다!

function drawChart(width = 200, height = 400) {
	console.log(`${width} X ${height} 차트를 그립니다.`);
}
drawChart(100); //100 X 400 차트를 그립니다.
drawChart(); //200 X 400 차트를 그립니다.

function drawChart2(width = 200, height = width / 2) {
	console.log(`${width} X ${height} 차트를 그립니다.`);
}
drawChart2(300); //300 X 150 차트를 그립니다.
drawChart2(); //200 X 100 차트를 그립니다.

2. 함수 나머지 매개변수

나머지 매개변수는 이전에 구조 분해 할당 정리할때도 다뤘었다.

함수를 정의할 때 인수를 두 개만 받도록 하고, 함수를 호출할 땐 5개의 인수를 전달했지만,
에러가 발생하지 않고 첫 번째와 두 번째 인수를 계산하여 보여준다.

function sum(a, b) {
  return a + b;
}

alert( sum(1, 2, 3, 4, 5) ); //3

1과 2를 제외한 여분의 매개변수는 그 값을 담을 배열 이름을 마침표 3개 '...' 뒤에 붙여주면 함수 선언부에 포함시킬 수 있다.

//나머지 매개변수의 이름을 title로 지은것! 원하는대로 변경 가능함
function showName(firstName, lastName, ...titles) {

  alert( firstName + ' ' + lastName ); // Bora Lee

  // 나머지 인수들은 배열 titles의 요소가 됩니다.
  // titles = ["Software Engineer", "Researcher"]
  alert( titles[0] ); // Software Engineer
  alert( titles[1] ); // Researcher
  alert( titles.length ); // 2
}

showName("Bora", "Lee", "Software Engineer", "Researcher");

3. 스코프

스코프는 유효 범위로써 변수와 매개변수가 어디까지 유효한지를 나타낸다.
또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

function exampleFunction() {
    var x = "declared inside function";
    // x는 오직 exampleFunction 내부에서만 사용 가능.
    console.log("Inside function");
    console.log(x);
}

console.log(x);  // 에러 발생

var x = "declared outside function";

exampleFunction();

function exampleFunction() {
    console.log("Inside function");
    console.log(x);
}

console.log("Outside function");
console.log(x);

4. 함수 호이스팅(hoisting)

자바스크립트에서는 함수를 선언하기 전에 호출이 가능하다.

hello();
function hello() {
  console.log("안녕하세요");
}
//안녕하세요

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/