참고 모던 자바스크립트 Deep Dive

함수

• 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
• 값의 성질을 갖는 객체를 일급 객체라고 하며, 함수는 일급객체이다.
• 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자다.
• 함수 표현식은 표현식인 문이며, 함수 선언문은 표현식이 아닌 문이다!

💡 함수형 프로그래밍 : 순수 함수와 보조 함수의 조합을 통해 외부 상태를 변경하는 부수 효과를 최소화해서 불변성을 지향하는 프로그래밍 패러다임이다.

함수 선언문

• 함수 선언문은 함수 이름을 생략할 수 없다.
• 함수 선언문은 표현식이 아닌 문이다!!!

👾#01

function bar() {
  console.log("hello");
}

bar(); // hello

👾#02

var bar = function bar() {
  console.log("hello");
};

bar(); // hello

👉🏻 자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성한다. 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

함수 호이스팅

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

foo(); // TypeError: sub is not a function
bar(); // hello

var foo = function foo() {
  console.log("foo");
};
function bar() {
  console.log("bar");
}

📎 TypeError를 발생시키는 이유

👉🏻 함수 표현식인 foo는 변수 선언이 런타임 이전에 실행되어 undefined로 초기화 되며, 런타임 시점에 할당문이 실행되어 함수객체가 된다. 따라서 위 예제에서는 변수 호이스팅이 실행된다.
👉🏻 함수 표현식 이전에 함수를 참조하면 undefined로 평가되고 따라서 이때 함수를 호출하면 타입에러를 발생시킨다.

💡 따라서 함수 선언문 대신 함수 표현식 사용을 권장한다.

매개변수와 인수

• 함수는 매개변수의 개수와 인수의 개수가 일치하지 않는지 체크하지 않아 에러를 발생하지 않는다
• 인수가 할당되지 않은 매개변수의 값은 undefined다.
• 매개변수보다 인수가 많은 경우 초과된 인수는 무시된다.
• 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보내진다

반환문

return + 표현식으로 이뤄짐.

• 표현식을 명시적으로 지정하지 않으면 'undefined'를 반환.
• 반환문은 생략이 가능하며 이때 암묵적으로 'undefined'를 반환한다.
• 전역에서 반환문을 사용하면 문법에러를 발생한다.

즉시 실행 함수(IIFE, Immediately-Invoked Function Expression)

• 단 한번만 호출되며 다시 호출할 수 없다.
• 익명함수를 사용하는 것이 일반적이다.
• 반드시 그룹 연산자(..)로 감싸야 한다.

/* 01 */
(function () {
  //..
})();
/* 02 */
(function () {
  //..
})();

타이머 함수

1. setTimeout(함수, 시간): 일정 시간 후 함수 실행
2. setInterval(함수, 시간): 시간 간격마다 함수 실행
3. clearTimeout(): 설정된 Timeout 함수를 종료
4. clearInterval(): 설정된 Interval 함수를 종료

• 첫번째 인수: 익명함수, 화살표함수 사용
• 두번째 인수: ms

🔵 setTimeout(함수, 시간)

// 3초 뒤 실행
setTimeout(function () {
  console.log('zooyaho!')
},3000)

setTimeout(() => {
  console.log('zooyaho!')
},3000)

🔵 clearTimeout()

// 3초 전 h1요소 클릭 시 timer함수 종료되어 console이 찍히지 않음
const timer = setTimeout(function () {
  console.log('zooyaho!')
},3000)

const h1El = document.querySelector('h1')
h1El.addEventListener('click', ()=> {
	clearTimeout(timer)
})

🔵 setInterval(함수, 시간)

// 3초 마다 실행
setInterval(() => {
  console.log('zooyaho!')
},3000)

🔵 clearInteval()

// h1요소 클릭 시 timer함수 종료
const timer = setTimeout(function () {
  console.log('zooyaho!')
},3000)

const h1El = document.querySelector('h1')
h1El.addEventListener('click', ()=> {
	clearInteval(timer)
})

콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수

📎 고차 함수 : 매개변수를 통해 함수의 외부에서 콜백함수를 전달받은 함수

👾#01

function repeat(n, f) {
  for (let i = 0; i < n; i++) {
    f(i);
  }
}
/* 01 */
repeat(5, function (i) {
  if (i % 2) console.log(i);
}); // 1 3

👉🏻 익명 함수 리터럴을 콜백 함수로 고차 함수에 전달
👉🏻 익명 함수 리터럴은 repeat 함수를 호출할 때마다 평가되어 함수 객체를 생성

👾#02

/* 02 */
var logOdd = function (i) {
  if (i % 2) console.log(i);
};
repeat(5, logOdd); // 1, 3

👉🏻 logOdd 함수는 단 한 번만 생성
👉🏻 고차 함수에 함수 참조를 전달!!
👉🏻 콜백 함수를 익명 함수 리터럴로 정의하면서 곧바로 고차 함수에 전달하면 고차 함수가 호출될 때마다 콜백 함수가 생성된다.

👾#03

// 3초 후 zooyaho Done! 출력
function timeout(cb) {
  setTimeout(()=> {
    console.log("zooyaho");
    cb();
  },3000)
}

timeout(()=> {
  console.log("Done!");
});

👉🏻 함수의 모든 처리 이후 내가 원하는 내용을 추가적으로 실행할 수 있음.
👉🏻 콜백은 실행 위치를 보장하는 용도로 사용함.

순수함수와 비순수함수

순수 함수

• 어떤 외부 상태에 의존하지 않고 변경하지도 않는, 즉 부수 효과가 없는 함수
• 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수다.
• 일반적으로 최소 하나 이상의 인수를 전달 받는다.

👾#01

let count = 0;
function increase(n) {
  return ++n;
}
increase(count);
console.log(count); // 0

increase(count);
console.log(count); // 0

count = increase(count);
console.log(count); // 1

비순수 함수

• 어떤 외부 상태에 의존하거나 외부 상태를 변경하는, 즉 부수 효과가 있는 함수
• 외부 상태에 따라 반환값이 달라지는데, 외부 상태에는 전역변수, 서버 데이터, 파일, Console, DOM등이 있다.

👾#02

let count = 0;
function increase() {
  return ++count;
}
increase();
console.log(count); // 1

increase();
console.log(count); // 2