320x100
320x100

전역객체

: 어디서나 사용가능한 변수나 함수를 만들 수 있는 객체

: 브라우저 환경에서는 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

 

전역 객체

 

ko.javascript.info

 

객체로서의 함수와 기명 함수 표현식

 

ko.javascript.info

 

new Function 문법

 

ko.javascript.info

 

300x250
728x90