TIL_27_with Wecode 017 JavaScript about Scope

🐱‍🐉 Scope
JavaScriptでは、scopeはJavaScriptの構文ではなく、「変数がどこまで書けるか」の範囲を指します.一部の変数はあちこちに書き込むことができますが、一部の変数は特定の関数にのみ書き込むことができます.
これがscopeです.blockとは、중괄호({}, curly brace)に囲まれたもので、blockと呼ばれています.
関数の内部はblockです.

function hi() {
  return 'i am block'; //{}로 감싸진 함수의 내부!
}

ドアも一緒だから.

for (let i = 0; i < 10; i++) {
  count++; //{}감싸진 for문의 내부!
}

if文{}もブロックです.

if (i === 1) {
  let j = 'one'; //{}감싸진 if문의 내부!
  console.log(j);
}

🙀 変数が{}(block)で定義されている場合、この変数は{}(block)でのみ使用できます.
{}(block)で定義された変数はlocal(지역)변수と呼ばれます.
次のコードに問題があります.確認すれば.

function getResult() {
  let result = 10;
  return result;
}
// 자바스크립트 에러! 
// getResult 내부의 scope에 접근할 수 없다
console.log(result);

console.log(result)はgetResult内部にアクセスできないため、result変数が存在するかどうか分かりません.
result変数はgetResult関数の{}(ブロック)で宣言されるため、result変数はgetResult関数でのみ使用できます.
🐱‍🐉 グローバルレンジ
scopeは変数を宣言して使用できる空間です.
scopeの外部(ブロック外)では、特定のscopeの変数にアクセスできません.
block以外のglobal scopeで作成された変数をglobal variable(グローバル変数)と呼びます.

const color = 'red';
console.log(color);
function returnColor() {
  console.log(color);
  return color;
}
console.log(returnColor());

returnColorという名前の関数では、returnColor関数以外のcolorという変数が返されます.
colorという変数はグローバル変数なのでreturnColor関数のblockからもアクセスできるので「red」に戻りました.
すなわち、colorという変数は、returnColor関数の外でconst colorとして指定されているので、returnColor関数の内部でもアクセスできます.
🐱‍🐉 Scope汚染
上記のグローバル変数を宣言すると、プログラム内の任意の場所でグローバルネームスペースを使用できます.namespaceは変数名の範囲を表す.scopeとも呼ばれ、特に変数名を議論する場合、名前空間とも呼ばれます.
global変数はプログラムが終了するまで生きています.これは,局所変数{}−blockが終了すると,変数は存在せず,これ以上書き込むことができないことを意味する.
global変数がまだ生きていて、変数値が変化している場合、変数を追跡するのは難しい.なぜ変数が必要なのかを知るには、let、constとしてどこで宣言されているのかを見つけなければならない.
以下はscopeが汚染された典型的な例である.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';
const callMyNightSky = () => {
  stars = 'Sirius';
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};
console.log(callMyNightSky());
console.log(stars);

starsというグローバル変数があります.

callmyNightsky関数で新しい変数を宣言したいのですが、letキーワードを書くのを忘れました.

callmyNightskyを呼び出すと、「Sirius」がstars変数に割り当てられます.

はかつて世界の変数だった恒星に影響を及ぼした!

別の関数でグローバル変数starsを使用したいのですが、その値は修正後の「Sirius」です.
今後数十個の関数がある場合、グローバル変数を乱用すると、値がどこで変更されているか分からない可能性があります.

🐱‍🐉 良好なスキャン習慣
前に示したように、グローバル変数はあちこち修正できないので、できるだけ変数をblock scopeに分けるべきです.
ぴったり合った🙀scope(close scoping)の変数はコードの品質を高めることができます!!

コードはブロックに明確に区分されているため、コードはより高い可読性を有する.

コードは、1行ずつリストされるのではなく、機能別にブロックを分割するので、コードがより理解しやすくなります.

以降コードを修正する必要がある場合は、長い時間を隔ててコードが見えても、メンテナンスのためによく分割することができます.

プログラムが終了するまで変数はアクティブではない(ブロックが終了するとローカル変数のライフサイクルが終了する)ため、メモリを節約できます.
要するに、🙀グローバル変数はできるだけ書き込みを避け、できるだけ{}内でlet、constを使用して新しい変数を作成します.
今回はif文{}のblock scopeを表示します.

function logSkyColor() {
  const dusk = true;
  let myColor = 'blue'; 
  if (dusk) {
    let myColor = 'pink';
    console.log(myColor); // pink
  }
  console.log(myColor); // blue 
}
console.log(myColor); // 에러!!

if文に{}のコードブロックが使用されています.ここでmyColorという変数letを宣言します.

ifゲート内で「pink」を指定し、ゲート外で「blue」を指定した場合は注意してください.

実際、このコードは関数のblock scope、if文のblock scopeであり、blockはよく使われているが、scope名空間は汚染されている.同じ名前の変数が使用されているためです.

このように🙀新しいblockに変数を書き込むときは、常に異なる名前で変数を宣言することを忘れないでください.
JavaScript Switch Statement