JavaScript+ 범위 및 향상된 Var, Let, Const

최초 출시 시점bigsondev.com
모든 사용자에게는 JavaScript의 변수가 필요합니다.그것들을 사용하는 가장 좋은 방법과 불필요한 부작용이나 코드에 오류를 가져올 수 있는 함정을 피하는 방법을 배워보자.

소개하다.

ES6가 나타나기 전에 글로벌 변수를 선언하거나 var 키워드(함수 또는 글로벌 범위)를 사용하는 방법은 두 가지뿐입니다.
ES6에는 let 및 const 키워드가 포함되어 있습니다.둘 다 글로벌 또는 블록 범위를 가질 수 있습니다.let은 업데이트할 수 있지만 다시 설명할 수 없습니다.말 그대로 콘스트는 업데이트도 재성명도 할 수 없다.

변량

코드 예시를 보면 상술한 모든 키워드에 대한 상세한 정보를 알 수 있습니다.그 다음에 우리는 건의와 최선의 실천을 총결산할 것이다.

👿 글로벌

지구인은 사악하다.

console.log(window.setTimeout); // function setTimeout() { [native code] } 
​
setTimeout = 'Hello World';
​
console.log(setTimeout); // POLLUTED GLOBAL SCOPE: "Hello World"
console.log(window.setTimeout); // OVERRIDDEN WINDOW VARIABLE: "Hello World"

위의 예시에서, 우리는 어떤 키워드도 사용하지 않은 상황에서 setTimeout 변수를 설명하고 Hello World 문자열을 분배했다.이렇게 하면 변수는 전체 변수가 된다.또한, 우리는 의외로 기존의 setTimeout 함수를 다시 썼기 때문에 불필요한 행동을 초래할 수 있습니다.
window 대상은 덮어쓰지 말아야 할 내장 속성이 많다.충분한 이유(예를 들어 polyfill, 사용자 정의 실현)가 없으면 창 대상의 기존 변수와 함수를 덮어쓰는 것을 피해야 한다.
뒷부분에서 전역 변수의 재작성을 피하는 방법을 설명할 것입니다. 현재 창의 대상을 연구하고 변수를 명명할 때 똑같은 이름을 사용하지 않도록 하십시오.

❌ 변량

var의 문제는 전역 변수와 같지만 함수 범위 내에서 사용할 수 있어 전역 변수가 오염되지 않도록 합니다.

// message variable has a function scope, 
// it'll only be available in the hello function
var hello = () => {
  var message = 'Hello World';
​
  return message; 
};
​
// message variable has a global scope,
// it'll be included in the window object
var message = 'Hello People';
​
console.log(message); // POLLUTED GLOBAL SCOPE: "Hello People"
console.log(window.message); // ADDED TO WINDOW: "Hello People"
console.log(hello()); // "Hello World";

좋습니다. Hello 함수 내부의 외부 메시지 변수를 덮어쓰지 않았습니다. 내부 메시지 변수는 함수 작용역이 있기 때문에 변수가 외부 작용역으로 누설되지 않도록 합니다.그러나 외부 메시지 변수는 여전히 전체 국면을 오염시켰다.
var을 사용하는 또 다른 단점은 함수식, 성명식 프로그래밍의 불변성 방법을 깨뜨리는 함수식, 성명식 프로그래밍을 다시 성명하고 업데이트할 수 있다는 것이다.

var canBeChangedAndUpdated = 42;
var canBeChangedAndUpdated = 43;
​
if (true) {
  var canBeChangedAndUpdated = 44;
}
​
console.log(canBeChangedAndUpdated); // 44

CanBeChanged 및 Update 변수를 세 번 다시 선언하고 업데이트하여 전역에 적용했습니다.
JavaScript에는 Hoisting라는 개념이 있는데 var도 그것을 정확하게 처리할 수 없다.🙈 이것은 변수 성명이 전역 범위나 함수 범위의 맨 위로 계속 이동한다는 것을 의미한다.이게 어떻게 된 일인지 보여줘.

console.log(x); // undefined
console.log(y); // ReferenceError: y is not defined
​
var x = 5;

x의 성명만 걸려 있습니다. 왜냐하면 인쇄된 것은 정의되지 않았기 때문입니다.가장 좋은 방법은 항상 맨 위에 변수 성명을 포함하고 그 값을 부여하는 것이다. 왜냐하면 사용 향상은 사람을 곤혹스럽고 추리하기 어렵기 때문이다.그것은 마땅히 아래와 같아야 한다.

var x = 5;
​
console.log(x); // 5
console.log(y); // ReferenceError: y is not defined

콘솔을 통해 인쇄할 때 우리는 5를 얻었다.이거 좋네.y 변수가 정의된 적이 없기 때문에 오류를 던졌습니다.
var 키워드는 엄격한 규칙이 없는 '유연성'을 너무 많이 제공합니다.나는 더 이상 그것을 쓰지 않을 것이다. 더 이상 기쁘기 그지없다.
ES6 키워드가 얼마나 향상되었는지 살펴보겠습니다.

⚠️ 양보하다

첫 번째 개선은 전체 변수로 성명할 때, let은 창 대상에 추가되지 않습니다.그러나 아래와 같이 사용하면 전 세계를 오염시킬 것이다.

console.log(window.setTimeout); // function setTimeout() { [native code] } 
​
let setTimeout = 'Hello World';
​
console.log(setTimeout); // POLLUTED GLOBAL SCOPE: "Hello World"
console.log(window.setTimeout); // ALL GUCCI, WINDOW OBJECT UNTOUCHED: function setTimeout() { [native code] }

두 번째 개선은let의 블록 범위입니다.그것의 실제 행동을 보여 주시오.

// global firstName variable
let firstName = 'John';
​
// another firstName variable is declared inside
// of the if block, it won't change the 
// global firstName
if (true) {
  let firstName = 'Jane';
​
  console.log(firstName); // "Jane"
}
​
// firstName is still "John"
console.log(firstName); // "John"

외부 이름 변수는 전체 범위를 오염시켰지만 내부 (if 문장 내부) 는 그 안에만 존재합니다.블록 작용역은 함수 작용역과 유사한 외부 작용역으로 변수가 누설되는 것을 피하는 데 도움이 된다.
세 번째 개선은 let't not re clared입니다. 만약 우리가 이렇게 시도한다면 무슨 일이 일어날지 봅시다.

let canOnlyBeUpdated = 42;
let canOnlyBeUpdated = 43; // Uncaught SyntaxError: Identifier 'canOnlyBeUpdated' has already been declared

Canoly BeUpdated 변수를 다시 선언할 수 없다는 오류가 발생했습니다.
그것은 여전히 갱신할 수 있는데, 이것은 불변성 개념과 모순된다.

let canOnlyBeUpdated = 42;
canOnlyBeUpdated = 43;
​
console.log(canOnlyBeUpdated); // VARIABLE UPDATED: 43

만약 조립과 관련이 있다면, 우리는 var보다 더 엄격한 방식으로 그것을 처리할 것이다.

console.log(x); // ReferenceError: Cannot access 'x'
​
let x = 1;

승급은 여전히 발생하지만 착륙Temporal Dead Zone을 시키기 때문에 방문할 수 없습니다. 저희는 오류를 얻게 됩니다.x를 사용하기 전에 x를 성명하고 분배해야 한다.
가장 완벽한 (거의) 로 넘어가자. 이것은 상수 키워드이다.

✅ 콘스트

const의 장점은let-block 역할 영역의 모든 좋은 속성을 가지고 있기 때문에 다시 설명할 수 없고 업데이트할 수 없다는 것이다.😍

const canOnlyBeUpdated = 42;
​
canOnlyBeUpdated = 43; // Uncaught TypeError: Assignment to constant variable."

const 키워드는 함수식, 성명식 프로그래밍에 적합하며, 불가변성을 고려했습니다.
하지만 앞에서 거의 언급한 적이 있다.

const person = {
 age: 28,
 name: 'Adrian'
}
​
person.name = 'Banana';
​
console.log(person); // { age: 28, name: "Banana" }

아이고, 우리가 개인 대상의 속성을 업데이트했어. 그렇게 고정불변한 것은 아니야.JavaScript에서 객체 수정 방지에 대한 경고는 this article의 내용을 참조하십시오.
다음은 const를 사용하여 코드를 작성하는 또 다른 예입니다.

const multiply = (a, b) => a * b;
​
const price = 100;
const numberOfPeople = 5;
​
const amount = multiply(price, numberOfPeople);
​
console.log(amount); // 500

글로벌 범위 방지

가장 간단한 해결 방안은 함수나 블록 역할 영역을 사용하는 것이다.더 조리 있는 것이 필요하다면, 명칭 충돌을 피하기 위해 명칭 공간을 만들 수 있습니다.

window.MY_NAMESPACE = {};
window.MY_NAMESPACE.setTimeout = 'Hello World';
​
console.log(window.setTimeout); // function setTimeout() { [native code] }
console.log(window.MY_NAMESPACE.setTimeout) // "Hello World"

이렇게 내장된 창입니다.setTimeout은 닿지 않았습니다. 우리는 이름 공간에서 변수를 설명할 수 있습니다.
JavaScript에는 글로벌 변수를 방지하는 더 많은 솔루션이 있습니다.CSS와 마찬가지로 JS 솔루션, BEM 및 SMACSS에도 CSS가 있습니다.다음 표를 검토하여 전역 변수가 생성되지 않도록 합니다.

IIFE

Module and Revealing Module patterns

ES6 Classes

Webpack variables hoisting

이제 권장 사항과 모범 사례를 요약해 보겠습니다.

요약

너는 아마도 내가 콘스터에 대한 선호를 짐작했을 것이다. 그러나 솔직히 말하자면, 댄 아브라모프 (Dan Abramov) 가 his post 에서 말한 것처럼, 나는 개의치 않는다.이것은 모두 전체 팀과 일치된 약속에 관한 것이다.모두에게 적합한지 확인하고 벨벳을 적당히 설치하세요.
다음은 나의 건의이다.

대부분의 경우 const를 목표로 하고 범위를 막으며 let을 최소화하고 var

을 사용하지 마십시오.

전 세계의 오염을 멀리하기 위해 노력한다. 예를 들어 프로젝트에서 웹 패키지를 사용한다.

의미, 함수식 프로그래밍을 고수하고 불변성, 부작용이 없고 기존 변수를 다시 정의하고 업데이트하지 않는다는 것을 명심하라.

폐막사

나는 네가 이 문장에서 많은 것을 배울 수 있기를 바란다.우리는 향상, 범위, 변수 키워드에 대해 설명했다.또한 전 세계적으로 오염되지 않도록 최선의 실천과 해결 방안을 인정받았습니다.
나는 내 사이트에서 YT 동영상 시리즈인 buildingprojects을 만들고 한 걸음 한 걸음 현대 기술을 활용하여 최상의 인코딩 실천에 대해 투철하게 설명하는 것을 고려하고 있다.
만약 당신이 이런 내용을 좋아하고 이 생각을 좋아한다면

응원해 주셔서 감사합니다!❤️
연락처: Mentorship|