[BB-JS] 7. 함수 표현식

본 글은 자바스크립트 공부를 위해 프론트엔드 개발자를 위한 자바스크립트 프로그래밍를 정리한 글입니다.

들어가며

  • 함수를 정의하는 방법
    • 함수 선언
      • function 키워드 다음에 함수 이름을 쓰는 형태
      • 파이어폭스, 사파리, 크름과 오페라에서는 비표준 프로퍼티인 function 키워드 다음에 쓴 함수 이름과 일치하는 name을 지원(IE는 지원하지 않음)
      • 함수 끌어올림(hoisting)이 발샘
      • 함수 선언부를 다른 코드보다 먼저 읽고 실행한다는 뜻
      • 함수 선언식을 분기문 안에서 사용하는 패턴은 브라우저마다 에러를 수정하는 방법이 다르므로 지양
    • 함수 표현식
      • 일반적인 변수 할당과 유사
      • function 키워드 다음에 함수 이름이 없으므로 익명 함수로 간주
      • 익명 함수의 name 프로퍼티는 빈 문자열
      • 다른 표현식과 마찬가지로 반드시 호출하기 전에 할당해야 함
      • 함수 표현식은 분기문 안에서 사용하여도 안전
      • 다른 함수에서 사용할 수 있도록 함수를 반환하는 형태도 가능

재귀

  • 재귀 함수는 일반적으로 함수가 자기 자신을 이름으로 호출하는 형태
  • arguments.callee는 현재 실행 중인 함수를 가리키는 포인터이므로 재귀 호출에 사용할 수 있음
  • 스트릭트 모드에서는 arguments.callee의 값에 접근할 수 없으며, 접근하면 에러가 발생
  • 이름 붙은 함수 표현식을 사용하면 스트릭트 모드와 비 스트릭트 모드에서 모두 동작

클로저

  • 클로저란 다른 함수의 스코프에 있는 변수에 접근 가능한 함수
  • 함수를 호출하면 실행 컨텍스트와 스코프 체인이 생성
  • 함수의 활성화 객체는 arguments 및 이름 붙은 매개변수로 초기화
  • 외부 함수의 활성화 객체는 스코프 체인의 두 번째 객체이며, 이 과정에서 포함 관계에 있는 함수에서 발생하여 스코프 체인이 전역 실행 컨텍스트에서 종료될 때까지 이어짐
  • 스코프 체인이란 변수 객체를 가리키는 포인터 목록이며, 객체를 직접 포함하는 것은 아님
  • 함수에서 변수에 접근할 때마다 스코프 체인에서 해당 이름의 변수를 검색
  • 일반적으로 함수 실행이 끝나면 로컬 활성화 객체는 파괴되고 메모리에는 전역 스코프만 남음
  • 클로저는 외부 함수의 활성화 객체를 자신의 스코프 체인에 추가
  • 외부 함수가 실행을 마쳤는데도 익명 함수의 스코프 체인에서 참조하고 있기 떄문에 활성화 객체가 파괴되지 않는 부수 효과가 있음
  • 클로저는 외부함수의 스코프를 보관해야 하므로 다른 함수에 비해 메모리를 많이 요구
  • 클로저를 과용하면 메모리 문제가 생길 수 있으니 반드시 필요한 떄만 사용하길 권장
  • 클로저와 변수
    • 클로저는 항상 외부 함수의 변수에 마지막으로 저장된 값만 알 수 있음
    • 클로저가 특정 변수가 아니라 전체 변수 객체에 대한 참조를 저장
    • 익명 함수를 통해 해결할 수 있음
  • this 객체
    • this 객체는 런타임에서 함수가 실행 중인 컨테긋트에 묶임
    • 전역 함수에서 this는 스트릭트 모드가 아닐 때는 window, 스트릭트 모드에서는 undefined
    • 함수가 객체 메서드로 호출되었을 때 this는 해당 객체
    • 익명 함수는 특정 객체에 묶여 있지 않으므로 스트릭트 모드가 아니라면 this 객체는 window이며 스트릭트 모드에서는 undefined
    • 모든 함수는 호출되는 순간 자동으로 thisarguments 두 특별한 변수를 갖게되지만, 내부 함수는 결코 외부 함수의 thisarguments에 직접적으로 접근할 수 없음
  • 메모리 누수
    • 클로저는 인터넷 익스플로러 9 이전 버전에서 메모리 문제를 일으키는데, 이는 JScript 객체와 COM 객체에 사용하는 가비지 컬렉션 방법이 다르기 때문

블록 스코프 흉내내기

  • 자바스크립트에서는 블록 레벨 스코프라는 개념이 없으므로 블록 문장에서 정의한 변수는 해당 문장이 아니라 외부 함수에 묶임
  • 익명 함수를 블록 스코프처럼 쓰는 문법을 고유 스코프 부름
  • 전역 스코프에 추가되는 변수나 함수의 수를 제한하는 용도로 자주 사용
  • 일반적으로 전역 스코프에 변수나 함수를 추가하지 않는 편이 좋으며 여러 개발자가 참여하는 대규모 애플리케이션에서는 이를 꼭 지켜야 이름 충돌을 막을 수 있음

고유 변수

  • 자바스크립트에는 고유 구성원(private member)이란 개념이 없으며 객체 프로퍼티는 모두 공용(public)
  • 함수 안에서 정의한 변수는 함수 밖에서 접근할 수 없으므로 모두 고유 변수라고 간주(ex. 매개 변수, 지역 변수, 내부 함수등)
  • 특권(privileged) 메서드는 고유 변수/함수에 접근 가능한 공용 매세드
    • 생성자 안에서 만드는 방법
      • 생성자 안에서 정의한 특권 메서드가 클로저가 되어서 생성자의 스코프 안에서 정의된 모든 변수와 함수에 접근할 수 있기 때문
      • 고유 및 특권 멤버를 정의해서 데이터에 대한 getter, setter를 만들어 보호할 수 있음
      • 생성자 패턴을 통해서만 이런 결과가 가능하다는게 단점
  • 정적 고유 변수
    • 특권 메서드는 고유 변수나 함수를 정의할 때 쓰는 고유 스코플르 통해서 생성할 수 있음
    • 고유 변수와 함수를 인스턴스에서 공유
    • 특권 메서드는 프로토타입에 정의되므로 모든 인스턴스에서 같은 함수를 호출
    • 클로저가 될 득권 메서드는 외부 스코프에 대한 참조를 간직
    • 정적 고유 변수를 생성하면 각 인스턴스가 독립 변수를 가질 수 는 업싲만 프로토타입을 통해 코드 재사용성은 좋아짐
    • 인스턴스를 쓸 것인지 정적 고유 변수를 쓸 것인지는 상황에 따라 결정
    • 변수를 검색할 때 스코프 체인을 따라 이동하는 거리가 늘어날수록 검색 시간이 늘어나는데 크로저와 고유 변수 때문
  • 모듈 패턴
    • 객체를 반환하는 익명 함수를 사용
    • 객체 리터럴이 싱글톤에 대한 공용 인터페이스를 정의하는 것
    • 싱글톤에 일종의 초기화가 필요하고 고유 변수에 접근해야 할 때 유용
    • 단 하나의 객체를 반드시 생성하고 몇 가지 데티터를 가지며 또한 고유 데이터에 접근 가능한 공용 메서드를 외부에 노출하도록 초기화 해야 할 때 유용
  • 모듈 확장 패턴
    • 모듈 패턴에서 객체를 반환하기 전에 확장하는 패턴
    • 싱글톤 객체가 특정 타입의 인스턴스지만 프로퍼티나 메서드를 추가하여 확장해야 할 때 유용

SmileCat

SmileCat
How do you define yourself?

[Openlayers] Render Event 정리

## 이벤트### [Map](http://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html)| event | module | note || :--: | -- | -- || [postcompose](...… Continue reading