함수 파트 정리

• 재귀와 스택

  • 재귀

    • 함수가 필요에 의해 자기 자신을 호출하는 경우

    • 반복과 서로 대체 가능

    • 실행 컨텍스트 사용

    • 베이스 : 명확한 결과값을 즉시 도출하는 코드로 작업을 아주 간단하게 만들어서 함수가 더 이상 서브 호출을 하지 않게 해주는 인수

    • 재귀 단계: 함수가 자기 자신을 호출하는 단계

    • 재귀 깊이 : 처음 호출을 포함한 중첩 호출의 최대 개수

  • 실행 컨텍스트

    • 코드 실행에 대한 세부 정보를 담고 있는 내부 데이터 구조

    • 제어 흐름의 현재 위치, 변수의 현재 값, this 의 값, arguments, return 값 등 실행 환경에 대한 상세 내부 정보 저장

    • 스택 구조로 형성되며 처리됨

    • 함수 호출 1회당 정확히 하나의 실행 컨텍스트 형성되며 메모리 하나씩 차지함

    • 종류

      • 전역 컨텍스트

        • 모든 것을 관리하는 환경

        • 스크립트가 완전히 종료될 떄 까지 남아있음

      • 함수 컨텍스트

        • 함수를 관리하는 환경

        • 함수 실행이 끝났을 시 스택 구조에 의해 삭제됨

  • 재귀적 순회는 재귀로 구현

  • 재귀적 구조는 자기 자신의 일부를 복제하는 형태의 자료 구조

  • 연결 리스트는 객체의 자료 구조 중 하나로 빠르게 삽입, 삭제가 가능하지만 index 같은 기능 지원하지 않음

• 나머지 매개변수와 전개 문법

  • 나머지 매개 변수

    • 함수 매개변수의 끝에서 사용

    • 인수 목록의 나머지를 배열로 모아줌

    • 항상 마지막에 있어야 함

  • 전개 문법

    • 함수 호출 시 사용

    • 배열을 목록으로 요소를 풀어서 펼쳐주는 작업

    • 이터러블을 목록으로 확장해줌

  • arguments

    • 반복 가능한 유사 배열 객체

    • 인덱스를 사용해 모든 인수에 접근

    • 배열 메서드 사용 불가능

    • 인수 일부만 사용 불가능

    • 화살표 함수는 this 를 가지지 않기 때문에 arguments 를 따로 가지지 않음

• 변수의 유효범위와 클로저

  • 변수의 유효 범위

    • 변수는 코드 블록 단위로 유효 범위 생성

    • 중첩 함쉬는 함수 내부에 선언한 함수이며 외부 변수에 접근할 수 있음

  • 렉시컬 환경

    • 실행중인 스크립트 전체, 코드 블록, 실행 중인 함수가 가지는 ‘숨김 연관 객체’

    • 환경 레코드, 외부 렉시컬 환경에 대한 참조 가짐

    • 변수값 갱신은 변수가 저장된 해당 환경에서 이뤄짐

    • 환경 레코드

      • 모든 지역 변수를 프로퍼티로 가지고 있는 객체

      • this 같은 기타 정보도 저장

    • 외부 렉시컬 환경에 대한 참조

      • 외부의 렉시컬 환경 레코드를 참조하는 값

    • 변수

      • 변수는 ‘환경 레코드’ 의 프로퍼티

      • 스크립트 시작 시 스크립트 내에서 선언한 변수 전체가 환경 레코드에 올라가지만 실행 흐름이 닿기 전까지 참조 불가능

    • 함수

      • 함수 선언문의 경우 바로 초기화 되고 사용 가능

      • 내부 렉시컬 환경, 외부 렉시컬 환경 참조값 두 개를 실행 시 마다 가지게 됨

      • [[Envifronment]]

        • 함수가 가지는 숨김 프로퍼티

        • 함수가 만들어진 곳의 렉시컬 환경의 참조 값

        • 함수가 생성된 곳을 기억하는 용도

        • 호출 때 마다 새로운 렉시컬 환경을 참조해서 만들어지며 해당 함수는 렉시컬 환경으로써 참조함

        • 함수가 호출될 떄 단 한번 세팅되고 변하지 않음

        • 프로퍼티들은 가비지 컬렉션이 건드리지 않으며 메모리에서 유지됨

    • 클로져

      • 외부 변수를 기억하고 기억한 외부 변수에 접근할 수 있는 함수

      • JS 는 모든 함수가 [[Environment]] 로 외부 렉시컬 환경을 참조하므로 클로져

  • 최적화 프로세스는 JS 엔진마다 다름

• var

  • let, const 와 다른 특성 보임

  • 동일한 변수명 여러 번 선언 가능

  • 블록 스코프가 아닌 함수 수준 스코프 가짐

  • 호이스팅

    • 스크립트, 함수가 실행될 떄 var, 함수 선언문으로 선언한 값들이 컨텍스트(실행 환경)의 맨 위로 끌어올려져서 선언되는 것

    • 함수 선언문

      • 선언과 할당이 호이스팅되므로 바로 실행 가능

    • var

      • 선언만 호이스팅 되므로 할당은 실행 흐름이 도달하기 전 까지 안 됨

  • 즉시 실행 함수

    • 함수 표현식을 괄호로 만들어서 함수 표현식으로 인식 시키는 방법

    • var 가 함수 수준 스코프를 가지는 것을 이용해 블록 레벨 스코프를 가질 수 있게 하는 방안

    • 함수의 이름 없어도 됨

• 전역 객체

  • 실행(호스트) 환경이 가지는 객체

  • 언제 어디서나 사용 가능한 변수 만들 때 사용

  • 환경에 따라 전역 객체의 이름과 프로퍼티 달라짐

  • 이름을 globalThis 로 표준화 하자는 내용 JS 명세에 추가 됨.

  • 프로퍼티는 바로 사용 가능

  • var는 바로 프로퍼티화

  • 프로퍼티에 폴리필 추가 가능

• 객체로서의 함수

  • 함수는 객체

  • 다양한 메서드 존재

  • name 프로퍼티는 컨텍스트 이용해 이름 추론

  • length 프로퍼티는 함수 선언부에 있는 인수의 수(나머지 매개변수는 포함 안 됨)

  • 프로퍼티에 정보 저장해서 클로져 처럼 환경 변수 핸들링 가능

  • 프로퍼티로 함수의 일과 함수의 프로퍼티 기능 둘 다 사용

  • 기명 함수 표현식

    • 함수 표현식으로 함수 정의 후 이름 부여하는 기능

    • 함수 내부에서 정의된 이름 사용

• new Function

  • 함수 표현식, 함수 선언문 이외에 함수 만들때 대안 없을 때 사용

  • new Funtion 문법으로 생성

  • 생성문의 인자엔 반드시 문자열만 가능

  • 서버에서 전달받은 문자열 사용하여 실행 가능

  • 렉시컬 환경은 전역 환경만 참조

  • ‘압축기’ 에 의해 코드를 줄여 변수명이 교체되기 떄문에 함수 내부에서 외부 변수에 접근 불가능

  • 매개변수 넘겨줄 떄는 함수 호출때 인수로 넘겨주는게 좋음

• setTimeout 과 setInterval을 이용한 호출 스케쥴링

  • 함수의 규칙적/한번 실행을 일정한 delay 주고 싶을 때 사용

  • 함수 넘길 때 참조값을 받도록 되어 있기 때문에 실행문이 아닌 반환문 만 넘겨야 함

  • 반환값은 타이머 식별자이고 식별자 이용하여 스케쥴링 취소가 사용함

  • alert 창 떠있어도 타이머는 멈추지 않음

  • 인자에 함수 넘길 시 내부 참조가 새롭게 만들어 지므로 가비지 컬렉션 대상 안 됨(메모리 누수 줄여야 할 시 스케쥴링 취소 해야함)

  • delay 가 0 일 시 ‘현재 스크립트 실행 완료 후’ 함수 호출됨

  • 중첩 setTimeout/setInterval 5회 이상 이뤄질 시 지연 간격 4밀리초 이상으로 강제됨

  • 지연 간격 보장은 현재 실행 환경에 따라 달라짐

  • setInterval

    • 일정한 delay 간격 주기로 인자에 넘겨진 함수 실행

    • 함수를 실행하는 데 걸리는 시간도 지연 간격에 포함되기 delay 시간 보장하지 않음

  • setTimeout

    • 일정한 delay 후 인자에 넘겨진 함수 실행

    • 함수 실행하는데 걸리는 시간 지연 간격에 포함하지 않기 떄문에 delay 시간 보장

• call/apply 와 데코레이터, 포워딩

  • call/apply

    • 함수의 특별 내장 메서드로 컨텍스트 설정 가능

    • call

      • 함수의 this를 할당하여 호출하는 기능

    • apply

      • 함수의 this 할당하고 유사 배열 전달하여 호출하는 기능

      • call 도 여러 인수 넣을 수 있어서 유사하지만 JS엔진에 최적화 됨

  • 포워딩

    • 컨텍스트와 함께 인수 전체를 다른 함수에 전달하는 것

    • call에 여러 인자 넣거나 apply 로 구현

  • 데코레이터

    • 함수를 감싸는 래퍼를 반환해서 함수의 행동을 변화 시키는 함수

    • 주요 작업은 여전히 함수에서 처리 되기 떄문에 재사용 가능하며 원래 함수 복잡성을 증가시키지 않음

    • 코드 변경 없이 캐싱 기능 추가, 디바운스, 스로틀링 같은 상황에서 사용

  • 메서드 빌리기

    • 다른 타입의 객체에서 메서드를 빌려와 사용하는 경우

    • 배열 메서드 빌려서 유사 배열이나 이터러블 객체에 적용할 때 자주 사용

• 함수 바인딩

  • bind

    • 함수의 this의 context 를 고정할 떄 사용

    • context가 고정된 함수 반환

    • 객체 메서드의 this를 고정해 어딘가에 넘길 떄 사용

    • 인수를 고정하는 데도 사용 가능(partial)

  • partial

    • 기존 함수의 인수 몇 개를 고정한 함수

    • 같은 인수를 여러 번 반복하고 싶지 않을 때 유용

• 화살표 함수

  • this를 가지지 않아 함수의 컨텍스트 유지 가능

  • arguments 지원하지 않아서 호출 포워딩 해주는 데코레이터 만들 떄 유리

  • new 와 함께 호출 할 수 없음

  • bind 함수는 this를 묶인 상태로 호출 가능한 특수한 객체 만든다는 점에서 this 를 묶지 않는 화살표 함수와 차이 있음