JavaScript 상수 변수

JavaScript는 동적 타입 언어로서, 상수와 변수는 프로그램에서 데이터를 저장하고 조작하는 데 필수적인 개념입니다. 함께 예제를 통해 JavaScript 상수 변수 개념과 활용 방법을 자세히 알아보겠습니다.

 

 

상수(const)

상수(const)는 한 번 선언되고 나면 값을 변경할 수 없는 변수입니다. 이는 주로 프로그램에서 변하지 않는 값을 저장하는 데 사용됩니다.

 

다음은 상수를 선언하는 예제입니다.

const PI = 3.14159;

위의 예제에서, PI는 상수로 선언되었으며, 값은 3.14159입니다. 한 번 선언된 후에는 PI의 값을 변경할 수 없습니다. 이를 통해 프로그램에서 PI 값이 변하지 않는다는 것을 확신할 수 있습니다.

 

 

변수(let, var)

변수는 값을 저장하고 변경할 수 있는 데이터 컨테이너입니다. JavaScript에서는 let과 var 키워드를 사용하여 변수를 선언합니다. let은 블록 범위(block scope) 변수를 선언하는 데 사용되고, var는 함수 범위(function scope) 변수를 선언하는 데 사용됩니다.

 

다음은 변수를 선언하는 예제입니다.

let age = 25;
var name = "John";

위의 예제에서, age 변수는 숫자 25를 저장하고, name 변수는 문자열 "John"을 저장합니다. 이후에는 변수 값을 변경할 수 있습니다.

 

 

변수의 범위(scope)

JavaScript에서 변수의 범위(scope)는 변수가 접근 가능한 영역을 말합니다. let과 var의 범위에 차이가 있습니다.

let을 사용하여 선언된 변수는 블록 범위를 가지며, 해당 블록 내에서만 접근할 수 있습니다. 블록은 중괄호({})로 정의되는 영역을 말합니다.

{
  let x = 10;
  console.log(x); // 출력: 10
}
console.log(x); // 에러: x는 정의되지 않았습니다.

위의 예제에서, x 변수는 블록 안에서만 유효합니다.

 

 

반면에, var로 선언된 변수는 함수 범위를 가지며, 해당 함수 내에서만 접근할 수 있습니다. 함수 외부에서 선언된 var 변수는 전역 범위를 가지게 됩니다.

function example() {
  var y = 5;
  console.log(y); // 출력: 5
}
example();
console.log(y); // 에러: y는 정의되지 않았습니다.

위의 예제에서, y 변수는 example() 함수 내에서만 유효합니다.

 

 

변수의 재할당과 상수의 제약

let과 var로 선언된 변수는 값을 재할당할 수 있습니다.

let count = 0;
count = 1;
console.log(count); // 출력: 1

 

 

반면에, const로 선언된 상수는 값을 재할당할 수 없습니다. 상수는 선언과 동시에 초기화되어야 합니다.

const PI = 3.14159;
PI = 3; // 에러: 상수는 재할당할 수 없습니다.

위의 예제에서, PI 상수를 재할당하려고 하면 에러가 발생합니다.

이러한 제약은 상수가 한 번 할당된 후에는 값이 변하지 않는다는 것을 보장하기 위함입니다.

 

 

상수와 변수의 선택

상수와 변수는 데이터를 저장하고 관리하는 데 중요한 역할을 합니다. 상수는 변하지 않는 값을 저장하고, 변수는 값을 변경해야 할 때 사용합니다. 따라서, 프로그램에서 값이 변하지 않을 것으로 예상되는 데이터는 상수로 선언하고, 값이 변경될 수 있는 데이터는 변수로 선언하는 것이 좋습니다.

 

 

변수와 상수를 명확하게 구분하여 사용함으로써 코드의 가독성을 높이고, 버그 발생 가능성을 줄일 수 있습니다.

이상으로 JavaScript 상수 변수 같이 알아보았습니다.

 

[관련글]

[html, css, js] - HTML, CSS, JavaScript 사용 자판기 프로그램 만들기

HTML, CSS, JavaScript 사용 자판기 프로그램 만들기

[html, css, js] - JavaScript 함수 - 코드 재사용성 핵심

JavaScript 함수 - 코드 재사용성 핵심

[html, css, js] - HTML5 Canvas 캔버스 그래픽 만들기

HTML5 Canvas 캔버스 그래픽 만들기