Peep

즉시 실행 함수 (IIFE, Immediately-Invoked Function Expression)

• 즉시 실행하여야하지만 전역 스코프(Global Scope)를 오염시키지 않으려고 할때 사용한다.
• 함수 리터럴을 ( )로 감싼 뒤 바로 실행하는 형태가 일반적이며 기명도 가능하고 익명도 가능하다.
• ( )로 감싸주는 이유는 자바스크립트는 function(){ } 키워드를 사용할 경우 파서가 선언문으로 인지한다.
• 선언문은 해석기에서 실행 후 사라지기에 값으로 존재하지 않는다. 때문에 "함수 표현식"을 통해 명시적으로 나타내줘야한다.
• ( )를 붙이는 것 외에도 연산자를 앞에 붙일 경우에도 즉시 실행된다.

-function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행됨

하지만 보통 ( )로 묶는 표현 방법을 사용한다.

(function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행됨

;(function(a, b){ return console.log(a + b) })(1,2) // 3
// 즉시 실행되며 앞에 값과 이어진 값으로 평가받는것을 방지할 때 세미콜론을 사용한다.

함수 선언문이 아닌 함수 표현식으로 작성해야한다.

const hello = function(){} // (X)

(function(){
    // ..
})(); // (O)

(function(){
    // ..
}()); // (O)

단순히 위의 예시는 코드 스타일의 차이이나 화살표함수일 경우 아래 예시처럼 첫번째 방법만 사용이 가능하다.

(() => {
    // ..
})(); // (O)

(() => {
    // ..
}()); // (X)

아래와 같이 호출하는 경우 함수 호출을 하기 위한 호출대상이 명세에서 말하는 Member Expression 이어야하나 화살표함수는 Assignment Expression 이기때문에 불가능하다고 한다. 

(화살표 함수의 => 화살표는 연산자가 아닌 것으로 취급되며 화살표 함수 자체의 파싱이 특별하게 취급되기 때문이라고 하는데,  Assignment Expression로 인식되나봄???)

참고 ↓↓↓↓

https://stackoverflow.com/questions/34589488/es6-immediately-invoked-arrow-function/34589765#34589765

위와 같은 이유로 ( ) 없이 사용하는 ! 연산자또한 즉시실행 함수 표현식에서 문법오류가 발생한다.

((a, b) => a + b)(1, 2); // 3
!(a, b) => a + b)(1, 2); // Uncaught SyntaxError

출처 및 참고

IIFE (Immediately-Invoked Function Expression)

https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/iife.md

자바스크립트의 IIFE

https://velog.io/@doondoony/javascript-iife

var va let va const

var

함수 스코프

함수 스코프의 최상단으로 호이스팅

선언 후 할당없이 호출하면 undefined (선언과 동시에 undefined로 초기화되기 때문)

strict mode가 아닐때, 글로벌 스코프에서 선언 시 글로벌 객체에 바인딩

재선언 가능

재할당 가능

let

블록 스코프

블록 스코프의 최상단으로 호이스팅

선언 후 할당없이 호출하면 ReferenceError (이것을 TDZ(Temporal Dead Zone)이라함, 선언은 했지만 참고할 수 없는 사각지대)

strict mode가 아닐때, 글로벌 스코프에서 선언해도 글로벌 객체에 바인딩되지 않음

재선언 불가능

재할당 가능

const

블록 스코프

블록 스코프의 최상단으로 호이스팅

선언 후 할당없이 호출하면 ReferenceError (이것을 TDZ(Temporal Dead Zone)이라함, 선언은 했지만 참고할 수 없는 사각지대)

strict mode가 아닐때, 글로벌 스코프에서 선언해도 글로벌 객체에 바인딩되지 않음

재선언 불가능

재할당 불가능

선언과 초기화가 반드시 동시에 일어나야함

상수와 같은 고정값을 선언할 때 사용

이전에 읽은 아티클 

[아티클 프로젝트 004] let, const와 블록 레벨 스코프

[아티클 프로젝트 057] 취준생이 반드시 알아야 할 프론트엔드 지식들 (var vs let vs const)

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/var-let-const.md

this

javascript의 this 키워드는 다른 언어와는 조금 다르게 동작한다.

실행컨텍스트(EC, Execution Context)가 생성될때마다 this의 바인딩이 일어나며 우선순위가 있다.

대부분은 함수를 호출한 방법에 의해 this가 결정된다. 따라서 함수의 호출때마다 다를수도 있다.

1. new 는 해당객체

2. call, apply, bind 같은 명시적 바인딩일 경우 인자로 전달된 객체

3. 객체의 메소드로 호출한 경우 해당 객체

4. 그외 엄격모드는 undefined로 초기화 됨 (엄격, 비엄격에 차이가 있다)

5. 글로벌에서 일반 브라우저는 window, 노드는 global

전역 문맥

전역 실행 문맥에서의 this는 엄격모드 여부에 관계없이 전역 객체를 참조합니다.

// 브라우저 전역 객체는 window
console.log(this === window); // true

함수 문맥 

호출한 방법에 의해 this가 결정된다.

같은 코드라도 엄격모드 비엄격모드에서 달라질 수 있다.

// 비엄격모드
function test() {
  return this;
}

test() === window; // true

// 엄격모드
functiontest(){
  "use strict"; 
  return this;
}

test() === undefined; // true

this의 값을 한 문맥에서 다른 문맥으로 넘기려면 call, apply 메서드를 사용할 수 있습니다.

bind

ECMAScript 5에서는 Function.prototype.bind를 도입

bind는 함수를 어떻게 호출했는지 상관하지 않고 this를 설정할 수 있다.

this는 bind()의 첫 번째 매개변수로 고정.

function test() {
  return this.a;
}

var test1 = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

arrow function

ES6에서는 스스로 this 바인딩을 제공하지 않는 화살표 함수를 추가.

이때는 실행컨텍스트안의 this값을 유지.

const car = {
	name : avante,
	getPrice: function() {
	return this.name;
  },
};

console.log(car.name()); // avante

this의 바인딩

https://github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/javascript/this.md

mdn 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

User-Agent Client Hints의 도입, UA 프리징을 대비하라

클라이언트 입장의 User-Agent Client Hints
유저의 많은 정보를 담고 있기 때문에 개인정보 침해가 우려, UA를 점진적 삭제할 예정이라고 예전에 포스팅 했었다.
당장에 무엇을 수정해야하는지, 언제 해야하는지 몰라서 고민하던 중에 네이버 개발블로그에서 작업한 내용에 대한 포스팅했더라.

UA 프리징으로 달라지는 점

• 속성 값 고정

• navigator.userAgent

• navigator.appVersion

• navigator.platform

• navigator.productSub

• navigator.vendor

• 크롬에서 안드로이드를 제외한 모든 운영체제는 윈도우10

• 동기방식으로 OS이름, OS버전, 모델명을 알 수 있음

• 비동기 방식으로 os이름, 버전, 모델명, 브아루저 풀 버전을 알 수 있음(기존 사용하던 로직 사용하려면)

• navigator.userAtent 대신 navigator.userAgentData를 사용해야함

• 브라우저버전은 메이저 버전만 나타냄

usetAgentData 

동기 방식으로 확인 가능한 정보

• navigator.userAgentData.brands 브라우저의 이름과 메이저 버전, Chromium 정보

• navigator.userAgentData.mobile 모바일 여부

• navigator.platform: Android Chrome(Linux armv8l) 여부

• User-Agent Client Hints를 지원하지 않는 브라우저의 OS, OS 버전(Chrome 84의 지원 범위: Android 5.0 이상, Mac OS X 10.10 이상, 윈도우 7 이상)

비동기 방식으로 확인 가능한 정보

• 기존 User-Agent string으로 얻은 정보와 동일한 정보를 얻을 수 있음

• Android, iOS, Mac Safari를 제외한 OS 정보

• 특정 OS 버전

• 브라우저의 풀버전

• getHighEntropyValues 메서드를 통해 비동기로 필요한 정보 가져올 수 있음

• navigator.userAgentData.getHighEntropyValues 메서드로 정확한 agent 값을 얻을 수 있도록 만든 getAccurateAgent 비동기 함수

navigator.userAgentData.getHighEntropyValues([
    "architecture",
    "model", "platform",
    "platformVersion",
    "uaFullVersion",
]).then(info => {
    console.log(info);
});

async function start() {
    const agent = await getAccurateAgent();
    const isWindows = agent.os.name === "window";
    const isMac = agent.os.name === "mac";
}

크롬을 제외 타 브라우저는 아직 도입 예정이 없음? 그렇기 때문에 어떤식으로 UA 정보를 수정 도입할 지 추측 중..

출처

User-Agent Client Hints의 도입, UA 프리징을 대비하라

https://d2.naver.com/helloworld/6532276

예전 포스팅 

크롬 사용자에이전트 문자열(UA, User agent string) 점진적 삭제

https://okayoon.tistory.com/entry/%ED%81%AC%EB%A1%AC-%EC%82%AC%EC%9A%A9%EC%9E%90%EC%97%90%EC%9D%B4%EC%A0%84%ED%8A%B8-%EB%AC%B8%EC%9E%90%EC%97%B4UA-User-agent-string-%EC%A0%90%EC%A7%84%EC%A0%81-%EC%82%AD%EC%A0%9C