전역객체
: 어디서나 사용가능한 변수나 함수를 만들 수 있는 객체
: 브라우저 환경에서는 window, Node.js 환경에서는 global 이라고 명칭
: 최근 전역객체의 이름을 globalThis로 표준화 하자는 내용이 자바스크립트 명세에 추가 됨
: 크로미움 기반이 아닌 몇몇 브라우저는 아직 globalThis를 지원하지 않지만 쉽게 폴리필 가능
// 모든 스크립트에서 현재 사용자(current user)에 접근할 수 있게 이를 전역 객체에 추가함
window.currentUser = {
name: "John"
};
// 아래와 같은 방법으로 모든 스크립트에서 currentUser에 접근할 수 있음
alert(currentUser.name); // John
// 지역 변수 'currentUser'가 있다면
// 지역 변수와 충돌 없이 전역 객체 window에서 이를 명시적으로 가져올 수 있음
alert(window.currentUser.name); // John
※ 전역변수는 되도록 사용하지 않는 것이 좋음.
함수를 만들 때는 외부 변수나 전역 변수를 사용하는 것 보다 인풋 변수를 받고 이를 이용해
아웃풋을 만들어내게 해야 테스트도 쉽고 에러가 덜 생김
전역객체 폴리필
: 브라우저가 최신 자바스크립트 기능을 지원하는지 확인하는 방법
if (!window.Promise) {
window.Promise = ... // 모던 자바스크립트에서 지원하는 기능을 직접 구현함
}
객체로서의 함수와 기명 함수 표현식
: 함수의 자료형은 객체로서 호출이 가능한 행동객체의 개념
: 자바스크립트에서 함수는 값으로 취급 됨
함수 객체의 프로퍼티
- name
: 함수의 이름을 의미하는 프로퍼티
function sayHi() {
alert("Hi");
}
alert(sayHi.name); // sayHi
// 익명 함수라도 이름이 할당 됨
let sayHi = function() {
alert("Hi");
};
alert(sayHi.name); // sayHi (익명 함수이지만 이름이 있네요!)
// 기본 값을 사용해 이름을 할당한 경우
// 이러한 기능을 contextual name이라고 함
// 이름이 없는 함수의 이름을 지정할 때는 이 컨텍스트에서 이름을 가져옴
// 각 객체 메서드의 이름도 name 프로퍼티를 통해 가져올 수 있음
function f(sayHi = function() {}) {
alert(sayHi.name); // sayHi (이름이 있네요!)
}
f();
// 객체 메서드의 이름은 함수 처럼 자동 할당이 되지 않음
// 배열 안에서 함수를 생성함
let arr = [function() {}];
alert( arr[0].name ); // <빈 문자열>
// 엔진이 이름을 설정할 수 없어서 name 프로퍼티의 값이 빈 문자열이 됨
- length
: 함수 매개변수의 전체 개수를 반환
: 다른 함수 안에서 동작하는 함수의 타입을 검사할 때도 사용
: 다형성 (polymorphism)을 구현할 때에도 사용
function f1(a) {}
function f2(a, b) {}
function many(a, b, ...more) {}
alert(f1.length); // 1
alert(f2.length); // 2
alert(many.length); // 2
※ 다형성 (polymorphism)
: 안수의 종류에 따라 인수를 다르게 처리하는 방식
커스텀 프로퍼티
: 함수에 자체적으로 만든 프로퍼티
function sayHi() {
alert("Hi");
// 함수를 몇 번 호출했는지 세봅시다.
sayHi.counter++;
}
sayHi.counter = 0; // 초깃값
sayHi(); // Hi
sayHi(); // Hi
alert( `호출 횟수: ${sayHi.counter}회` ); // 호출 횟수: 2회
기명 함수 표현식 (Named Function Expression, NFE)
: 이름이 있는 함수 표현식
: 이름을 사용해 함수 표현식 애부네서 자기 자신을 참조할 수 있음
: 기명 함수 표현식 외부에서는 그 이름을 사용할수 없음
- 일반 함수 표현식
let sayHi = function(who) {
alert(`Hello, ${who}`);
};
- 기명함수 표현식
let sayHi = function func(who) {
alert(`Hello, ${who}`);
};
let sayHi = function func(who) {
if (who) {
alert(`Hello, ${who}`);
} else {
func("Guest"); // 원하는 값이 제대로 출력됩니다.
}
};
let welcome = sayHi;
sayHi = null;
welcome(); // Hello, Guest (중첩 호출이 제대로 동작함)
new Function 문법
: 잘 사용하는 문법은 아니지만 이 방법외에 대안이 없을 때 사용
let func = new Function ([arg1, arg2, ...argN], functionBody);
let sum = new Function('a', 'b', 'return a + b');
alert( sum(1, 2) ); // 3
: 새로 만들어지는 함수는 arg...와 functionBody로 구성
: 기존의 방법과의 차이점으 런타임에 받은 문자열을 사용해 함수를 만들 수 있음
: 함수 표현식과 함수 선언문은 개발자가 직접 스크립트를 작성해야만 함수를 만들 수 있음
: new Function을 사용하면 어떤 문자열도 함수로 바꿀 수 있음
let str = ... 서버에서 동적으로 전달받은 문자열(코드 형태) ...
let func = new Function(str);
func();
: 서버에서 전달받은 문자열을 이용해 새로운 함수를 만들고 이를 실행하는 것도 가능
클로저
: 함수는 [[Environment]]에 저장된 정보를 이용해 자신이 생성된 곳을 기억
: [[Environment]]는 함수가 만들어진 렉시컬 환경을 참조함
: new Function을 이용해 만든 함수는 [[Environment]] 프로퍼티가 전역 렉시컬 환경을 참조함
: 즉, new Function으로 만든 함수는 외부 변수에 접근할 수 없고 오직 전역 변수에만 접근 가능
function getFunc() {
let value = "test";
let func = function() { alert(value); };
return func;
}
getFunc()(); // getFunc의 렉시컬 환경에 있는 값 "test"가 출력됩니다
new Function의 활용
: 서버를 비롯한 외부 출처를 통해 코드를 받아올 때 사용
Refference
'Programming > JavaScript' 카테고리의 다른 글
모던 자바스크립트 (함수) 4-5. call/apply와 데코레이터, 포워딩 (0) | 2022.04.23 |
---|---|
모던 자바스크립트 (함수) 4-4. setTiemout과 setInterval을 이용한 호출 스케줄링 (0) | 2022.04.23 |
모던 자바스크립트 (함수) 4-2. 변수의 유효범위와 클로저 / var (0) | 2022.04.21 |
모던 자바스크립트 (함수) 4-1. 재귀와 스택 / 나머지 매개변수와 스프레드 문법 (0) | 2022.04.19 |
javascript의 데이터를 멋있게 다루는 방법에 대한 총 정리. (filter / find / reduce / map / forEach /new Map / new Set / lodash / regex) (0) | 2022.04.19 |