[The Modern JavaScript] The JavaScript language - Advanced working with functions

Recursion and stack

• 재귀(recursion) : 함수 내부에서 자기 자신을 호출하는 것
• 재귀 단계(recursion step) : 자신을 호출하는 단계
• 재귀 베이스(base) : 서브 호출을 만들지 않게 하는 인수

The execution context and stack

• 함수 내부에 중첩 호출이 있을 경워
  • 현재 함수의 실행이 일시 중지됨
  • 중지된 함수와 연관된 실행 컨텍스트는 실행 컨텍스트 스택이라는 특수한 자료 구조에 저장
  • 중첩 호출 실행
  • 중첩 호출이 끝난 후 실행 컨텍스트 스택에서 다시 꺼내온 뒤 중단한 함수를 다시 실행
    
    

Rest parameters and spread syntax

Rest parameters ...

function sumAll(...args){
  let sum = 0;
  for (let arg of args) sum += arg;
  return sum;
}

alert( sumAll(1,2) ); // 1+2 = 3
alert( sumAll(1,2,3) ); // 1+2+3 = 6

• 대부분의 자바스크립트 내장 함수는 인수 개수에 제약이 없음
• ... (나머지 매개변수, 마침표 세 개) : 남아 있는 파라미터들을 하나의 배열에 모두 저장
  • 나머지 매개변수는 항상 마지막에 위치해야 함

The "arguments" variable

• arguments : 유사 배열 객체이자 이터러블 객체 (배열X)
  • 인수 전체를 저장하기 때문에 일부만 사용할 수 없음
  • 화살표 함수 지원X

Spread syntax

• ...arr : 스프레드 문법(spread syntax, 전개 문법)
  • 이터러블 객체를 다수의 파라미터로 전달
    
    

Variable scope, closure

Code blocks

• 지역 변수 : 코드 블록 {...} 안에서 선언한 변수는 블록 안에서만 사용 가능

Nested functions

• 중첩 함수 : 함수 내부에서 선언한 함수

Lexical Environment

• 클로저(closure) : 외부 변수를 기억하고 이 변수에 접근할 수 있는 함수
  • 자바스크립트의 함수는 숨김 프로퍼티인 [[Environments]]에 자신이 어디서 만들어졌는지 기억하기 때문에 모든 함수가 클로저
    
    

The old "var"

"var" has no block scope

• var는 함수 스코프 또는 전역 스코프, 블록 밖에서도 접근 가능

"var" tolerates redeclarations

• 같은 이름의 변수를 중복 선언 가능하지만, 두 번째 선언문은 무시됨

"var" variables can be declared below their use

• 호이스팅(hoisting) : 변수를 선언한 위치와 상관 없이 선언한 함수/전역이 시작되는 시점에 끌어올려짐
  • 선언(var)은 호이스팅 되지만, 할당(=)은 되지 않음

IIFE

• 즉시 실행 함수 표현식 (immediately-invoked-function-expressions)
  • 함수 표현식에 괄호, 비트 NOT, 덧셈 연산자를 붙여서 해당 함수를 바로 실행할 수 있음
  • (function{..})
  • !function(){..}
  • +function(){..}
    
    

Global Object

• 언어 또는 호스트 환경에 내장된 어디서나 사용 가능한 전역 객체
• 표준화 globalThis, 브라우저 window, Node.js global 등
• 최소한으로만 사용하는 것을 권장
  
  

Function object, NFE

• 함수는 호출 가능한(callable) 행동 '객체'
• 'name' property : 함수 이름 저장(익명 함수도 가능)
• 'length' property : 파라미터 개수 반환(나머지...는 제외)
• custom property
• 기명 함수 표현식(Named Function Expression, NFE)
  • 함수 내부에서 자기 자신을 참조할 수 있음
  • 외부에서는 해당 이름을 사용할 수 없음
    
    

The "new Function" syntax

let func = new Function([arg1, arg2, ... ], functionBody);
func();

Closure

• new Function은 함수의 [[Environment]] 프로퍼티가 전역 렉시컬 환경을 참조
  • 외부 변수는 접근 불가
  • 전역 변수에만 접근 가능
    
    

Scheduling: setTimeout and setInterval

• 함수를 예약 실행(호출)하는 호출 스케줄링(scheduling a call)
• setTimeout( func|code, [delay], [arg1], .. )
  • 일정 시간 후에 함수 실행
  • delay : 실행 전 대기 시간(밀리초 단위)
  • clearTimeout(func) : 스케줄링 취소
• setInterval( func|code, [delay], [arg1], .. )
  • 일정 간격을 두고 반복적으로 함수 실행
    • 중첩으로 setTimeout을 사용하는 것도 가능
  • clearInterval(timerId)
• 대기 시간 0
  • setTimeout(func, 0) / setTimeout(func)
  • 현재 스크립트의 처리가 끝난 직후에 가능한 빠르게 스케줄링 함수 실행
    
    

Arrow functions revisited

• this, arguments, super 지원하지 않음
• new 생성자 사용할 수 없음
  
  

"Advanced working with functions", by Ilya Kantor, 2007-2023, https://javascript.info/advanced-functions