ko.javascript.info - 함수 심화학습

1. 재귀와 스택

* 재귀란? 함수 내에서 자기 자신을 호출하는 함수.

* 특정 자료구조를 처리하기 위해서도 활용된다(ex: HTML 태그 같은 트리 구조의 데이터를 처리할 때라던가)

* 반복문과 비교했을 때, 더 많은 실행 컨텍스트 생성으로 인해 내부적으로 더 많은 메모리를 요구하기에 성능적으로는 좋지 않지만 코드가 명확해지고 유지보수가 쉬워진다는 점은 장점이라고 볼 수 있다.(성능도 그렇게 체감되게 안좋아지지 않는다)

* 실행 컨텍스트는 함수가 호출될 때 1회 생성된다. (실행 컨텍스트: 함수 수행과 관련된 상세 정보가 저장되는 자료구조, 저장되는 정보로는 제어 위치, 변수, this 등이 있음) 함수가 호출되고 내부에서 한 번 더 함수가 호출되면 현재 호출중인 함수에 대한 실행 컨텍스트의 제어흐름 위치 저장 및 실행 컨텍스트 스택 위에 쌓고 새로운 실행 컨텍스트를 생성한다. 내부에서 호출된 함수가 종료되면 실행 컨텍스트 스택에서 이전에 수행 중이던 실행 컨텍스트를 pop해서 제어 흐름을 이어간다.

 

2. 나머지 매개변수와 전개 구문

*영어 표기법: 나머지 매개변수(rest parameters) & 전개 구문(Spread syntax)

*rest parameters는 함수 작성 시 인자를 받아와 처리할 때 유용한다.(인자의 갯수가 정해지지 않은 경우 특히). function bla(...rest) {}의 경우, rest는 배열이 된다.

*spread syntax 같은 경우 함수 호출 시 여러 개의 인자를 전달해야할 때 유용하며 이터러블 객체 앞에 '...'를 붙여서 전달해주면 된다. Max(...arr) 같이 말이다.

*spread syntax는 배열 뿐 아니라 이터러블 객체에도 활용 가능하다.(spread syntax를 사용하면 내부적으로 for of로 이터레이터를 순회하며 요소 목록을 가져온다) 그렇기 때문에 이터러블 객체를 배열화 할 때도 사용 가능하다. 그러나 유사 배열에는 활용 불가능하다(Array.from이 더욱 보편적으로 활용되는 이유)

*spread syntax는 배열이나 객체를 얕은 복사할 때 코드가 간결하다는 점 때문에 유용하다.

 

3. 변수의 유효범위와 클로저

*코드 블럭: 코드 블럭 내에서 선언한 변수는 블럭 내에서만 접근이 가능하다.(if, while, for, {...} 등)

*중첩 함수: 함수 내에서 선언한 함수를 '중첩 함수'라고 한다.

*렉시컬 환경: 실행 중인 함수, 코드 블럭, 전체 스크립트는 렉시컬 환경을 갖는다. 전체 스크립트에 대한 렉시컬 환경은 전역 렉시컬 환경이라고 부른다. 렉시컬 환경은 환경 레코드와 외부 렉시컬 환경 참조로 이뤄진다.

   * 환경 레코드: 함수의 매개 변수, 지역 변수가 저장되고 변경되면 따라서 갱신된다.

   * 외부 렉시컬 환경 참조: 말그대로 외부 렉시컬 환경을 참조하는 것이다.

*렉시컬 환경은 함수 호출 시 생성되며 종료 시 제거되며 메모리에서 제거된다. 그러나 함수 종료 후에도 도달 가능한 상태라면 해당 렉시컬 환경은 메모리에서 제거되지 않는다. 중첩 함수가 외부 렉시컬 환경으로써 특정 렉시컬 환경을 가리키면, 해당 렉시컬 환경은 함수 종료 후에도 메모리에서 남게 된다.

*중첩 함수에서 내부 렉시컬 환경에 존재하지 않는 변수에 접근 시도하면 참조 중인 외부 렉시컬 환경에서 값을 찾는다.(중첩 함수는 선언된 곳을 외부 렉시컬 환경으로써 참조한다.)

*렉시컬 환경이 생성되면 스크립트 속 모든 변수가 등록된다. 코드가 읽히기 전까진 uninitialized 상태로 취급되며 참조 시 에러가 발생한다.

*렉시컬 환경이 생성될 때 스크립트 속 함수(선언 방식으로 정의한)는 그 즉시 호출이 가능한 상태가 된다(선언문이 나오기도 전에)

*환경 레코드 속 내용은 렉시컬 환경 생성 시점에 한 번에 구성되는게 아니라 코드가 한줄한줄 실행될 때의 내용으로 갱신되는 것이다.

*함수는 [[Environment]]라는 숨김 프로퍼티를 갖는다. 해당 프로퍼티는 외부 렉시컬 환경를 참조한다. 중첩 함수가 어디서 호출되든 외부 렉시컬 환경을 기억할 수 있는 이유이다.(렉시컬 환경은 함수, 코드 블럭(for, while, if), 전역 스크립트 등에 생성될 수 있다.)

 

5. 전역 객체

*전역 객체는 프로젝트 전체에서 접근할 수 있는 객체를 의미한다.

*브라우저 환경에선 'window', Node 환경에선 'global', 일반적으론 'globalThis'라고 불린다.

*전역 객체는 내장 객체(Array 등), 브라우저 환경 변수(windw.innerHeight 등) 등을 저장하고 있다.

*전역 객체는 최소한으로만 사용한다.