JavaScript의 변수, 범위 및 호이스팅 이해

이 진술은 몇 가지 부분으로 구성됩니다.

• var 키워드를 사용한 변수 선언
• 변수 이름(또는 식별자), username
• = 구문으로 표현되는 할당 연산
• 할당되는 값, \sammy_shark\

이제 코드에서 사용자 이름을 사용할 수 있습니다. JavaScript는 username이 문자열 값 sammy_shark를 나타내는 것을 기억합니다.

// Check if variable is equal to value
if (username === "sammy_shark") {
  console.log(true);
}

Output
true

앞에서 언급했듯이 변수는 모든 JavaScript 데이터 유형을 나타내는 데 사용할 수 있습니다. 이 예에서는 문자열, 숫자, 개체, 부울 및 null 값을 사용하여 변수를 선언합니다.

// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" }; 
var success = true;
var nothing = null;

console.log를 사용하여 특정 변수에 포함된 값을 볼 수 있습니다.

// Send spartans variable to the console
console.log(spartans);

Output
300

변수는 나중에 액세스하고 수정할 수 있는 메모리에 데이터를 저장합니다. 변수를 재할당하고 새 값을 부여할 수도 있습니다. 아래의 간단한 예는 암호를 변수에 저장한 다음 업데이트하는 방법을 보여줍니다.

// Assign value to password variable
var password = "hunter2";

// Reassign variable value with a new value
password = "hunter3";

console.log(password);

Output
'hunter3'

실제 프로그램에서 암호는 대부분 안전하게 데이터베이스에 저장됩니다. 그러나 이 예에서는 변수 값을 업데이트해야 하는 상황을 보여줍니다. password의 값은 hunter2였지만 그 시점부터 JavaScript가 인식하는 값인 hunter3에 다시 할당했습니다.

변수 명명

변수 이름은 JavaScript에서 식별자로 알려져 있습니다. JavaScript의 구문 및 코드 구조 이해에서 식별자 이름 지정 규칙 중 몇 가지를 논의했으며 여기에 요약되어 있습니다.

• 변수 이름은 문자(a-z), 숫자(0-9), 달러 기호($) 및 밑줄(_)
• 변수 이름에는 공백 문자(탭 또는 공백)를 포함할 수 없습니다.
• 숫자는 변수 이름으로 시작할 수 없습니다.
• 변수 이름으로 사용할 수 없는 몇 가지 예약어가 있습니다.
• 변수 이름은 대소문자를 구분합니다

또한 JavaScript에는 var 또는 let로 선언된 함수 및 변수의 이름에 카멜 케이스(때때로 camelCase로 양식화됨)를 사용하는 규칙이 있습니다. 이것은 첫 번째 단어를 소문자로 쓴 다음 모든 후속 단어의 첫 글자를 공백 없이 대문자로 쓰는 방법입니다. 상수가 아닌 대부분의 변수는 몇 가지 예외를 제외하고 이 규칙을 따릅니다. const 키워드로 선언된 상수 변수의 이름은 일반적으로 모두 대문자로 작성됩니다.

이것은 배워야 할 많은 규칙처럼 보일 수 있지만 유효하고 일반적인 변수 이름을 작성하는 것은 매우 빠르게 제2의 천성이 될 것입니다.

var, let 및 const의 차이점

JavaScript에는 변수를 선언하기 위한 세 가지 다른 키워드가 있으며, 이는 언어에 복잡성을 추가합니다. 이 세 가지의 차이점은 범위, 호이스팅 및 재할당을 기반으로 합니다.

자신의 프로그램에서 세 가지 중 어떤 것을 사용해야 하는지 궁금할 수 있습니다. 일반적으로 허용되는 방법은 가능한 한 const를 사용하고 루프 및 재할당의 경우 let을 사용하는 것입니다. 일반적으로 var는 레거시 코드 작업 외부에서 피할 수 있습니다.

변수 범위

JavaScript의 범위는 JavaScript에 대한 변수의 액세스 가능성을 결정하는 코드의 현재 컨텍스트를 나타냅니다. 범위의 두 가지 유형은 로컬 및 글로벌입니다.

• 전역 변수는 블록 외부에서 선언된 변수입니다.
• 로컬 변수는 블록 내부에 선언된 변수입니다.

아래 예에서는 전역 변수를 생성합니다.

// Initialize a global variable
var creature = "wolf";

변수를 재할당할 수 있음을 배웠습니다. 로컬 범위를 사용하면 원래 값을 변경하거나 재할당하지 않고도 실제로 외부 범위의 변수와 동일한 이름으로 새 변수를 만들 수 있습니다.

아래 예에서는 전역 species 변수를 생성합니다. 함수 내에는 동일한 이름을 가진 지역 변수가 있습니다. 콘솔로 보내보면 스코프에 따라 변수의 값이 달라지고 원래 값은 변하지 않는 것을 확인할 수 있습니다.

// Initialize a global variable
var species = "human";
 
function transform() {
  // Initialize a local, function-scoped variable
  var species = "werewolf";
  console.log(species);
}

// Log the global and local variable
console.log(species);
transform();
console.log(species);

Output
human
werewolf
human

이 예에서 지역 변수는 function-scoped입니다. var 키워드로 선언된 변수는 항상 함수 범위입니다. 즉, 함수가 별도의 범위를 갖는 것으로 인식합니다. 따라서 이 로컬 범위 변수는 전역 범위에서 액세스할 수 없습니다.

그러나 새 키워드 let 및 const는 블록 범위입니다. 이는 함수 블록, if 문, for 및 while 루프를 포함하여 모든 종류의 블록에서 새로운 로컬 범위가 생성됨을 의미합니다.

함수 범위 변수와 블록 범위 변수의 차이점을 설명하기 위해 let을 사용하여 if 블록에 새 변수를 할당합니다.

var fullMoon = true;

// Initialize a global variable
let species = "human";

if (fullMoon) {
  // Initialize a block-scoped variable
  let species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);

Output
It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a human.

이 예에서 species 변수는 하나의 전역 값(human)과 다른 값을 로컬(werewolf)로 가집니다. 그러나 var를 사용하면 다른 결과가 나타납니다.

// Use var to initialize a variable
var species = "human";

if (fullMoon) {
  // Attempt to create a new variable in a block
  var species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);

Output
It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.

이 예제의 결과에서 전역 변수와 블록 범위 변수는 모두 늑대인간이라는 동일한 값으로 끝납니다. 이는 var를 사용하여 새 로컬 변수를 만드는 대신 동일한 범위에서 동일한 변수를 재할당하기 때문입니다. var는 if를 다른 새 범위의 일부로 인식하지 않습니다. 의도하지 않게 변수 값을 재정의할 가능성이 적은 코드를 생성하므로 일반적으로 블록 범위 변수를 선언하는 것이 좋습니다.

게양

지금까지 대부분의 예에서 var를 사용하여 변수를 선언하고 값으로 초기화했습니다. 선언 및 초기화 후 변수에 액세스하거나 재할당할 수 있습니다.

변수가 선언되고 초기화되기 전에 변수를 사용하려고 하면 정의되지 않음이 반환됩니다.

// Attempt to use a variable before declaring it
console.log(x);

// Variable assignment
var x = 100;

Output
undefined

그러나 var 키워드를 생략하면 더 이상 변수를 선언하지 않고 초기화만 합니다. ReferenceError를 반환하고 스크립트 실행을 중지합니다.

// Attempt to use a variable before declaring it
console.log(x);

// Variable assignment without var
x = 100;

Output
ReferenceError: x is not defined

그 이유는 변수 및 함수 선언이 해당 범위의 맨 위로 이동되는 JavaScript의 동작인 호이스팅 때문입니다. 초기화가 아닌 실제 선언만 호이스팅되므로 첫 번째 예제의 값은 undefined를 반환합니다.

이 개념을 보다 명확하게 보여주기 위해 아래는 우리가 작성한 코드와 JavaScript가 실제로 이를 해석한 방법입니다.

// The code we wrote
console.log(x);
var x = 100;

// How JavaScript interpreted it
var x;
console.log(x);
x = 100;

JavaScript는 스크립트 실행 전에 x를 변수로 메모리에 저장했습니다. 정의되기 전에 여전히 호출되었으므로 결과는 100이 아니라 정의되지 않음입니다. 그러나 ReferenceError를 발생시키지 않고 스크립트를 중단합니다. var 키워드가 var의 위치를 실제로 변경하지는 않았지만 이는 호이스팅 작동 방식을 나타내는 유용한 표현입니다. 그러나 이 동작은 문제를 일으킬 수 있습니다. 이 코드를 작성한 프로그래머는 x의 출력이 100이 될 것으로 예상하고 대신 정의되지 않은 일 때 .

또한 다음 예제에서 호이스팅이 예측할 수 없는 결과를 초래할 수 있는 방법을 확인할 수 있습니다.

// Initialize x in the global scope
var x = 100;

function hoist() {
  // A condition that should not affect the outcome of the code
  if (false) {
    var x = 200;
  }
  console.log(x);
}

hoist();

Output
undefined

이 예에서는 x를 전역적으로 100으로 선언했습니다. if 문에 따라 x는 200으로 변경될 수 있지만 조건이 false였으므로 변경되지 않아야 합니다. x의 값에 영향을 미쳤습니다. 대신 x가 hoist() 함수의 맨 위로 호이스팅되었고 그 값이 정의되지 않음이 되었습니다.

이러한 유형의 예측할 수 없는 동작은 잠재적으로 프로그램에 버그를 일으킬 수 있습니다. let 및 const는 블록 범위이므로 아래와 같이 이러한 방식으로 호이스트하지 않습니다.

// Initialize x in the global scope
let x = true;

function hoist() {
  // Initialize x in the function scope
  if (3 === 4) {
    let x = false;
  }
  console.log(x);
}

hoist();

Output
true

var로 가능한 중복 변수 선언은 let 및 const에서 오류를 발생시킵니다.

// Attempt to overwrite a variable declared with var
var x = 1;
var x = 2;

console.log(x);

Output
2

// Attempt to overwrite a variable declared with let
let y = 1;
let y = 2;

console.log(y);

Output
Uncaught SyntaxError: Identifier 'y' has already been declared

요약하면 var로 도입된 변수는 변수 선언이 메모리에 저장되는 JavaScript의 메커니즘인 호이스팅의 영향을 받을 가능성이 있습니다. 이로 인해 코드에 정의되지 않은 변수가 생길 수 있습니다. let 및 const의 도입으로 변수를 선언하기 전에 변수를 사용하려고 시도하거나 변수를 두 번 이상 선언하려고 시도할 때 오류가 발생하여 이 문제가 해결되었습니다.

상수

많은 프로그래밍 언어에는 수정하거나 변경할 수 없는 값인 상수가 있습니다. JavaScript에서 const 식별자는 상수를 따라 모델링되며 const에 할당된 값은 다시 할당할 수 없습니다.

모든 const 식별자를 대문자로 쓰는 것이 일반적인 규칙입니다. 이렇게 하면 다른 변수 값과 쉽게 구별할 수 있는 것으로 표시됩니다.

아래 예에서는 변수 SPECIES를 const 키워드를 사용하여 상수로 초기화합니다. 변수를 재할당하려고 하면 오류가 발생합니다.

// Assign value to const
const SPECIES = "human"; 

// Attempt to reassign value
SPECIES = "werewolf";

console.log(SPECIES);

Output
Uncaught TypeError: Assignment to constant variable.

const 값은 재할당할 수 없으므로 동시에 선언하고 초기화해야 합니다. 그렇지 않으면 오류가 발생합니다.

// Declare but do not initialize a const
const TODO;

console.log(TODO);

Output
Uncaught SyntaxError: Missing initializer in const declaration

프로그래밍에서 변경할 수 없는 값을 불변이라고 하고 변경할 수 있는 값을 변경 가능이라고 합니다. const 값은 재할당할 수 없지만 const로 선언된 개체의 속성을 수정할 수 있으므로 변경할 수 있습니다.

// Create a CAR object with two properties
const CAR = {
	color: "blue",
	price: 15000
}

// Modify a property of CAR
CAR.price = 20000;

console.log(CAR);

Output
{ color: 'blue', price: 20000 }

상수는 의도한 변수가 재할당되어서는 안 된다는 것을 미래의 자신과 함께 프로젝트에서 작업하는 다른 프로그래머에게 명확하게 하는 데 유용합니다. 나중에 변수가 수정될 것으로 예상되는 경우 대신 let을 사용하여 변수를 선언할 수 있습니다.

결론

이 자습서에서는 변수가 무엇인지, 변수 이름 지정 규칙 및 변수 값을 재할당하는 방법을 살펴보았습니다. 또한 범위 및 호이스팅, 원래 var 키워드의 일부 제한 사항과 let 및 const가 이러한 문제를 수정하는 방법에 대해서도 배웠습니다.

변수가 다른 언어에서 어떻게 사용되는지 비교하려면 \Python 3에서 변수를 사용하는 방법\에 대한 자습서를 참조하십시오.