JavaScript Variables
JavaScript 변수(Variables)는 데이터를 저장하고 나중에 참조하거나 조작하는 데 사용되는 이름이 붙은 메모리 공간입니다. 변수는 값을 보관하며, 값은 문자열, 숫자, 불리언 등 다양한 데이터 유형을 가질 수 있습니다.
즉, 변수는 데이터 저장을 위한 컨테이너/보관함 입니다.
자바스크립트 변수는 4가지 방법으로 선언할 수 있습니다.
- 암시적 변수 선언 (권장하지 않음)
- var
- let
- const
// 암시적 선언
// 사용하기 전에 항상 변수를 선언하는 것이 좋은 프로그래밍 습관입니다.
x = 5;
y = 6;
z = x + y;
// var
// var 키워드는 1955~2015년까지 사용되었지만
// 2015 이후 let, const가 추가됨
// 키워드 var는 이전 브라우저용으로 작성된 코드에서만 사용
var x = 5;
var y = 6;
var z = x + y;
// let
let x = 5;
let y = 6;
let z = x + y;
// const
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
언제 var, let, const 를 사용해야 할까?
var
ES5 이전의 JavaScript에서 사용되던 변수 선언 키워드입니다.
함수 스코프(Function Scope)를 가집니다.
즉, 변수는 해당 함수 내에서만 유효하며 함수 내에서 선언된 변수는 함수 외부에서 접근할 수 없습니다.
var로 선언된 변수는 호이스팅(Hoisting)에 영향을 받습니다.
변수가 선언되기 전에도 사용할 수 있으며, 값이 정의되기 이전에 해당 변수에 접근하면 undefined가 반환됩니다.
가능하면 var보다는 let 또는 const를 사용하는 것이 권장됩니다.
let
ES6(ECMAScript 2015)에서 도입된 블록 스코프(Block Scope) 변수 선언 키워드입니다.
블록 내에서 선언된 변수는 블록 외부에서 접근할 수 없습니다. 즉, 중괄호 {} 안에서만 유효합니다.
재할당이 가능한 변수를 선언할 때 사용됩니다. 변수의 값이 필요에 따라 변경될 수 있는 경우 let을 사용합니다.
const
블록 스코프를 가지며, let과 마찬가지로 블록 내에서만 유효합니다.
재할당이 불가능한 상수(값이 변하지 않는 변수)를 선언할 때 사용됩니다.
한 번 값이 할당되면 다른 값으로 변경할 수 없습니다.
상수를 사용하면 값이 변경되는 것을 방지하여 프로그램의 안정성과 유지보수성을 향상시킵니다.
일반적으로 변수가 재할당되어야 하는 경우 let을 사용하고, 변수가 변하지 않는 상수로 사용될 경우 const를 사용합니다. var은 호이스팅과 스코프의 특성으로 인해 문제를 일으킬 수 있으므로, ES6 이상의 환경에서는 let과 const를 사용하여 변수를 선언하는 것이 권장됩니다.
JavaScript Identifiers
JavaScript Identifiers(식별자)는 변수, 함수, 클래스, 객체 속성 등을 식별하는 데 사용되는 이름입니다. 식별자는 다음과 같은 규칙을 따라야 합니다:
첫 글자는 반드시 영문자(a-z, A-Z), 밑줄(_) 또는 달러 기호($)로 시작해야 합니다. 숫자로 시작하는 것은 허용되지 않습니다.
두 번째 문자부터는 숫자, 영문자, 밑줄, 달러 기호 등을 포함할 수 있습니다.
대소문자를 구분합니다. 즉, myVariable과 myvariable은 서로 다른 식별자입니다.
예약어(Reserved Words)는 식별자로 사용할 수 없습니다. 예약어는 JavaScript에서 이미 특별한 의미로 사용되는 단어들을 말합니다.
// 유효한 식별자
let firstName = "John";
const MAX_COUNT = 100;
function showMessage() { ... }
// 유효하지 않은 식별자
let 123abc; // 숫자로 시작해서 불가능
let my-variable; // 하이픈(-) 사용 불가능
let if; // 예약어 사용 불가능
The Assignment Operator
할당 연산자 또는 대입 연산자라고도 합니다.
일반적인 수학에서 사용하는 같다라는 의미와는 다른 의미이며
왼쪽 변수에 오른쪽 값 또는 데이터를 할당/대입한다라는 의미입니다.
자바스크립트에서 같다 라는 연산자는 '==' 입니다.
+=, -=, %=, *=, /= 등 복합 할당 연산자도 사용가능합니다.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>더하기 계산기</p>
<input type="number" id="num1" placeholder="첫 번째 숫자" style="width: 120px; height: 80px;">
<input type="number" id="num2" placeholder="두 번째 숫자" style="width: 120px; height: 80px;">
<button onclick="addNumbers()">더하기</button>
<p id="demo"></p>
<script>
function addNumbers() {
let x = parseFloat(document.getElementById("num1").value);
let y = parseFloat(document.getElementById("num2").value);
if (!isNaN(x) && !isNaN(y)) {
let sum = x + y;
document.getElementById("demo").innerHTML = "결과: " + sum;
alert("결과: " + sum);
} else {
document.getElementById("demo").innerHTML = "숫자를 입력하세요.";
alert("숫자를 입력하세요.");
}
}
</script>
</body>
</html>JavaScript Variables
더하기 계산기
'FRONTEND > JAVASCRIPT' 카테고리의 다른 글
| JavaScript 튜토리얼 - JavaScript Const (0) | 2023.07.28 |
|---|---|
| JavaScript 튜토리얼 - JavaScript Let (0) | 2023.07.24 |
| JavaScript 튜토리얼 - JavaScript Syntax (0) | 2023.07.19 |
| JavaScript 튜토리얼 - JavaScript Statements (0) | 2023.07.17 |
| JavaScript 튜토리얼 - JavaScript Output (0) | 2023.07.14 |