3.1. 프로그램언어 자바스크립트(JavaScript)에서의 변수 선언

by

프로그램언어 자바스크립트(JavaScript)의 var 키워드를 이용한 변수 선언

프로그램언어 자바스크립트(JavaScript)에서 변수를 선언할 때 사용하는 var 키워드는 변수를 선언하고 값을 할당하는 데 사용됩니다. var 키워드를 사용하여 변수를 선언하면 해당 변수는 함수 스코프를 가지게 됩니다. 이는 변수가 선언된 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없다는 의미입니다.

var 키워드를 사용한 변수 선언의 기본 구문은 다음과 같습니다:


var 변수명 = 값;

예를 들어, 다음은 var 키워드를 사용하여 변수를 선언하고 값을 할당하는 예제 코드입니다:


// 변수 선언과 값 할당
var number = 10;
var message = "Hello, JavaScript!";

위의 예제에서는 number라는 변수에 10이라는 숫자를, message라는 변수에 “Hello, JavaScript!”라는 문자열을 할당하고 있습니다.

프로그램언어 자바스크립트(JavaScript)의 let 키워드를 이용한 변수 선언

자바스크립트(JavaScript)에서 변수를 선언할 때 사용되는 let 키워드는 ES6(ECMAScript 2015)에서 도입된 새로운 변수 선언 방식입니다. let을 사용하면 블록 범위(block-scoped) 변수를 선언할 수 있습니다. 이는 변수가 선언된 블록(scope) 내에서만 유효하게 됩니다.

let 키워드를 사용한 변수 선언의 특징은 다음과 같습니다:

  • 변수는 선언된 블록(scope) 내에서만 유효
  • 변수가 선언된 위치 이전에 접근할 수 없음(호이스팅(hoisting)이 발생하지만 TDZ(Temporal Dead Zone)에 의해 초기화 전에 접근할 수 없음)
  • 동일한 이름의 변수를 중복 선언할 수 없음

아래는 let 키워드를 사용한 변수 선언의 예제 코드입니다:





  Let 키워드 예제

프로그램언어 자바스크립트(JavaScript)의 변수 선언시 주의점

프로그램언어 자바스크립트(JavaScript)의 변수 선언시 주의해야 할 점은 다음과 같습니다.

첫째, 변수명을 정할 때는 의미 있는 이름을 사용해야 합니다. 변수명은 해당 변수가 어떤 역할을 하는지 명확하게 표현해야 코드를 이해하기 쉽습니다.

둘째, 변수를 선언할 때는 중복된 이름을 사용하지 않아야 합니다. 같은 스코프 내에서 중복된 변수명을 사용하면 예상치 못한 오류가 발생할 수 있습니다.

셋째, 변수를 선언할 때는 적절한 데이터 타입을 지정해야 합니다. JavaScript는 동적 타입 언어이기 때문에 변수에 어떤 값이든 할당할 수 있지만, 변수의 목적에 맞는 데이터 타입을 사용하는 것이 좋습니다.

넷째, 변수를 사용하기 전에 반드시 선언해야 합니다. 변수를 먼저 사용한 후에 선언하면 오류가 발생할 수 있습니다.

다섯째, 변수의 범위(scope)를 이해해야 합니다. 변수의 범위에 따라 변수의 생명주기와 접근 가능 여부가 달라지므로 스코프를 잘 파악해야 합니다.


// 변수명을 의미 있게 지정
let age = 30;// 중복된 변수명 사용하지 않기
let count = 10;
let count = 20; // SyntaxError: Identifier 'count' has already been declared// 적절한 데이터 타입 사용
let price = 29.99; // 숫자
let name = 'John'; // 문자열// 변수 선언 후 사용
console.log(message); // ReferenceError: Cannot access 'message' before initialization
let message = 'Hello, World!';// 변수의 범위 이해
let globalVar = 'I am global';function myFunction() {
  let localVar = 'I am local';
  console.log(globalVar); // globalVar 변수에 접근 가능
  console.log(localVar); // localVar 변수에 접근 가능
}console.log(globalVar); // globalVar 변수에 접근 가능
console.log(localVar); // ReferenceError: localVar is not defined

프로그램언어 자바스크립트(JavaScript)의 변수 스코프(scope)

자바스크립트(JavaScript)의 변수 스코프(scope)는 변수가 유효한 범위를 나타내는 개념입니다. 변수 스코프에는 전역 스코프(global scope)와 지역 스코프(local scope)가 있습니다.

전역 스코프는 코드 어디에서든 접근할 수 있는 범위를 말하며, 전역 변수는 전역 스코프에 속합니다. 반면에 지역 스코프는 특정 블록({}) 내에서만 접근할 수 있는 범위를 말하며, 지역 변수는 해당 블록의 지역 스코프에 속합니다.

변수가 선언된 위치에 따라 스코프가 결정되며, 변수는 가장 가까운 스코프에서부터 찾아나가며 사용됩니다. 만약 변수가 지역 스코프에 없다면 전역 스코프에서 변수를 찾습니다.

아래는 변수 스코프의 예제 코드입니다.


// 전역 스코프
var globalVar = 'Global Variable';function exampleFunction() {
    // 지역 스코프
    var localVar = 'Local Variable';
    console.log(globalVar); // 전역 변수에 접근 가능
    console.log(localVar); // 지역 변수에 접근 가능
}exampleFunction();
console.log(globalVar); // 전역 변수에 접근 가능
console.log(localVar); // 오류 발생, 지역 변수에 접근 불가

프로그램언어 자바스크립트(JavaScript)의 변수 hoisting 개념

자바스크립트(JavaScript)에서 변수 hoisting은 변수가 선언되기 전에 참조될 수 있다는 개념을 말합니다. 이는 변수 선언이 코드의 상단으로 ‘끌어올려진다’는 것을 의미합니다. 즉, 변수를 선언하기 전에 해당 변수를 사용할 수 있습니다.

이러한 hoisting은 변수를 선언하기 전에 변수를 사용할 수 있는 이점을 제공하지만, 변수의 할당은 실제 선언 위치에서 이루어지므로 주의해야 합니다. 변수의 초기화(할당)는 hoisting되지 않습니다.

예를 들어, 다음과 같은 코드를 살펴봅시다.


console.log(myVar); // undefined
var myVar = 5;

위의 코드에서 myVar 변수는 선언 전에 참조되었지만, hoisting에 의해 변수가 선언된 위치로 ‘끌어올려지므로’ 오류가 발생하지 않고 undefined가 출력됩니다.

하지만 변수를 선언하고 값을 할당하는 경우, 값의 할당은 실제 선언 위치에서 이루어집니다.


console.log(myVar); // undefined
var myVar;
myVar = 5;

Leave a Comment