분류 javascript

JavaScript에서 변수, 범위 및 게양 이해 - JavaScript guide

컨텐츠 정보

  • 조회 173 (작성일 )

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 변수, 범위 및 게양 이해 


소개 


변수는 많은 프로그래밍 언어의 기본 요소이며 초보 코더가 배우는 첫 번째이자 가장 중요한 개념 중 하나 입니다. JavaScript에는 변수의 여러 속성과 이름을 지정할 때 따라야 하는 여러 규칙이 있습니다. JavaScript에는 변수를 선언하는 데 사용되는 세 가지 키워드 (var, let 및 const)가 있으며 각 키워드는 코드가 변수를 다르게 해석하는 방식에 영향을 줍니다.


이 튜토리얼에서는 변수가 무엇인지, 선언하고 이름을 지정하는 방법, var, let 및 const의 차이점에 대해 자세히 살펴 봅니다. 또한 호이스팅의 영향과 변수의 동작에 대한 글로벌 및 로컬 범위의 중요성을 검토합니다.


https://www.digitalocean.com/community/tutorials/understanding-variables-scope-hoisting-in-javascript 


변수 이해 


변수는 값을 저장하는 데 사용되는 명명된 컨테이너입니다. 여러 번 참조 할 수 있는 정보는 나중에 사용하거나 수정할 수 있도록 변수에 저장할 수 있습니다. JavaScript에서 변수에 포함 된 값은 숫자, 문자열 또는 객체를 포함한 모든 JavaScript 데이터 유형일 수 있습니다.


오늘날 JavaScript가 기반으로 하는 ECMAScript 2015 (ES6) 언어 사양 이전에는 var 키워드를 사용하여 변수를 선언 할 수 있는 유일한 방법이 있었습니다. 결과적으로 대부분의 오래된 코드 및 학습 리소스는 변수에 대해서만 var를 사용합니다. 아래 섹션에서 var, let 및 const 키워드의 차이점을 살펴 보겠습니다.


변수 자체의 개념을 보여주기 위해 var를 사용할 수 있습니다. 아래 예에서는 변수를 선언하고 값을 할당합니다.


// Assign the string value Sammy to the username identifier
var username = "sammy_shark";

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

  • var 키워드를 사용한 변수 선언
  • 변수 이름 (또는 식별자), 사용자 이름
  • = 구문으로 표시되는 할당 작업
  • 할당 된 값 "sammy_shark"

이제 코드에서 username을 사용할 수 있습니다. 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'

실제 프로그램에서 암호는 데이터베이스에 안전하게 저장 될 것입니다. 그러나 이 예제는 변수 값을 업데이트해야 하는 상황을 보여줍니다. 패스워드의 값은 hunter2이지만, 우리는 이 시점에서 JavaScript가 인식하는 값인 hunter3에 암호를 다시 할당했습니다.


명명 변수 


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


  • 변수 이름은 문자 (a-z), 숫자 (0-9), 달러 기호 ($) 및 밑줄 (_)로만 구성 될 수 있습니다.
  • 변수 이름은 공백 문자 (탭 또는 공백)를 포함 할 수 없습니다
  • 숫자는 변수의 이름을 시작할 수 없습니다
  • 변수 이름으로 사용할 수 없는 예약 키워드가 여러 개 있습니다
  • 변수 이름은 대소 문자를 구분합니다

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


이것은 배우는 많은 규칙처럼 보일지 모르지만, 유효하고 일반적인 변수 이름을 작성하는 것은 매우 빨리 제 2의 성격이 될 것입니다.


var, let 및 const의 차이점 


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

KeywordScopeHoistingCan Be ReassignedCan Be Redeclared
varFunction scopeYesYesYes
letBlock scopeNoYesNo
constBlock scopeNoNoNo

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


변수 범위 


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

  • 전역 변수는 블록 외부에서 선언 된 변수입니다
  • 지역 변수는 블록 안에서 선언 된 변수입니다

아래 예에서는 전역 변수를 만듭니다.


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

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


아래 예에서는 전역 종 변수를 만듭니다. 함수 내에는 이름이 같은 지역 변수가 있습니다. 변수를 콘솔로 보내면 범위에 따라 변수의 값이 어떻게 다른지 알 수 있으며 원래 값은 변경되지 않습니다.


// 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

이 예에서 지역 변수는 함수 범위입니다. 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.

이 예에서, 종 변수는 하나의 값 (전 세계적으로)과 다른 값 (지역적으로 늑대)을 갖습니다. 그러나 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는 다른 새 범위의 일부인지 인식하지 못합니다. 실수로 변수 값을 무시할 가능성이 적은 코드를 생성하므로 블록 범위의 변수를 선언하는 것이 좋습니다.


게양 (Hoisting) 


지금까지 대부분의 예제에서 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의 출력이 true가 될 것으로 예상하기 때문에 이 동작으로 인해 문제가 발생할 수 있습니다.


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


// 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 식별자를 대문자로 쓰는 것이 일반적인 규칙입니다. 이는 다른 변수 값과 쉽게 구별 할 수 있는 것으로 표시합니다.


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


// 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 키워드의 일부 제한 사항 및 이러한 문제를 해결하고 구성하는 방법에 대해 배웠습니다.