우당탕탕 좌충우돌 개발일기
자바스크립트 변수(JavaScript Variables) 본문
자바스크립트 변수를 선언하기 위한 4가지 방법이 있다.
- var
- let
- const
- 아무것도 사용하지 않는 것
변수란 무엇인가?(What are Variables?)
변수란 데이터를 저장하기 위한 컨테이너이다. (데이터 값을 저장)
해당 예제에서 x,y,z는 변수고 이를 var라는 키워드를 통해 선언한다.
var x = 5;
var y = 6;
var z = x + y;
해당 예제에서는 let이라는 키워드를 통해 변수를 선언한다.
let x = 5;
let y = 6;
let z = x + y;
해당 예제에서는 변수가 따로 선언되지 않았다.
x = 5;
y = 6;
z = x + y;
📌 언제 자바스크립트의 var를 사용하는가?
항상 var, let 혹은 const를 사용하여 자바스크립트의 변수를 선언한다.
var 키워드는 1995년부터 2015년까지 모든 자바스크립트 코드에 사용되었다.
let, const 키워드는 2015년에 자바스크립트에 추가되었다.
이전 브라우저에서 코드를 실행하려면, var를 사용해야 한다.
언제 const를 사용하는가?(When to Use JavaScript const?)
일반적인 규칙을 원한다면, 항상 const를 이용하여 변수를 선언해야 한다.
만일 변수가 변경될 수도 있다고 생각한다면 let을 사용해야 한다.
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
price1과 price2 변수는 const 키워드로 선언되었다.
: 이 두 가지 변수는 상수값이고 변하지 않는 값이다.
total 변수는 let 키워드로 선언되었다.
: 해당 변수는 변경될 수 있는 변수이다.
대수학과 마찬가지로(Just Like Algebra)
대수학에서와 마찬가지로 변수는 값을 보유한다.
let x = 5;
let y = 6;
let z = x + y;
위의 예에서 합계가 11로 계산됨을 추측할 수 있다.
💡 변수는 값을 저장하는 컨테이너다.
자바스크립트 식별자(JavaScript Identifiers)
모든 자바스크립트 변수는 고유한 이름으로 식별되어야 한다.
이런 고유한 이름을 식별자라고 하는데, 식별자는 짧은 이름(x, y)이거나 더 설명적인 이름(age, sum, totalVolume)일 수도 있다.
변수(고유 식별자)의 이름을 구성하는 일반적은 규칙은 다음과 같다.
- 이름은 글자, 숫자, 하이픈 그리고 달러 기호를 포함할 수 있다.
- 이름은 문자로 시작해야 한다.
- 이름은 $ 기호나 _ 기호로도 시작될 수 있다.
- 이름은 대소문자를 구분한다.(y와 Y는 다른 변수임)
- 예약어는 이름으로 사용될 수 없다.(예 : 자바스크립트 키워드)
💡 자바스크립트 식별자는 대소문자를 구분한다.
할당 연산자(The Assignment Operator)
자바스크립트에서, 등호(=)는 "같다"는 연산자가 아니라 "할당" 연산자라는 의미로 대수학과의 차이점이다.
해당 예제는 대수학에선 이치에 맞지 않는다.
x = x + 5
그러나 자바스크립트에서는 x라는 변수에 x + 5의 값을 할당한다는 뜻이기에 완벽하게 이치에 맞는다.
(해당 계산식은 x+5의 값을 계산하고 그 결과를 x에 넣는다. x의 값은 5만큼 증가한다.)
💡 자바스크립트에서 "같다" 연산자는 == 로 사용한다.
자바스크립트 데이터 타입(JavaScript Data Types)
자바스크립트 변수는 100과 같은 숫자와 "John Doe"와 같은 텍스트 값을 가질 수 있다.
프로그래밍에서 텍스트 값은 텍스트 문자열이라고 한다.
자바스크립트는 많은 종류의 데이터를 다룰 수 있지만 지금은 단순히 숫자와 문자열만 생각해보자.
문자열은 큰 따옴표(" ")나 작은따옴표(' ') 안에 작성되고, 숫자는 따옴표 없이 작성 한다.
만약 숫자를 따옴표 안에 넣어서 사용한다면, 텍스트 문자열로 처리된다.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';3.14
John Doe
Yes I am!
자바스크립트 변수 선언(Declaring a JavaScript Variable)
자바스크립트에서 변수를 만드는 것을 변수 "선언"이라고 한다.
var 나 let 키워드를 이용하여 자바스크립트 변수를 선언할 수 있다.
var carName;
let carName;
선언 후에, 변수는 값이 없다.(기술적으로 정의되지 않음)
변수에 값을 할당하기 위해서는 등호를 사용한다.
carName = "Volvo";
또한 선언할 때 변수에 값을 할당할 수도 있다.
let carName = "Volvo";
상단 예제에서, 우리는 carName이라고 불리는 변수를 선언하고 "Volvo"라는 값을 할당했다.
그런 다음 id가 "demo"인 HTML 문단 안에 출력해보자.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>Volvo
💡 스크립트 시작 부분에 모든 변수를 선언하는 것이 가장 좋은 프로그래밍 방법이다.
하나의 구문, 많은 변수들(One Statement, Many Variables)
하나의 구문안에 많은 변수를 선언할 수 있다.
let으로 구문을 시작하고 변수는 콤마(,)로 구분한다.
let person = "John Doe", carName = "Volvo", price = 200;
선언은 여러 줄에 나눠서 할 수도 있다.
let person = "John Doe",
carName = "Volvo",
price = 200;
값 = 정의되지 않음(Value = undefined)
컴퓨터 프로그램에서, 변수들은 종종 값 없이 선언되기도 한다.
값은 계산이 필요한 것일 수도 있고, 사용자 입력처럼 나중에 제공되는 값일 수도 있다.
값 없이 선언된 변수는 정의되지 않은 값을 가지게 된다.
해당 예제에서 변수 carName은 해당 구문이 실행된 후에 정의되지 않은 값을 갖게 된다.
let carName;
자바스크립트 변수 재선언(Re-Declaring JavaScript Variables)
var로 선언되어있는 변수를 재선언하게되면, 값을 잃지 않는다.
해당 예제에서 변수 carName은 구문이 실행된 후에도 "Volvo"라는 값을 갖고 있게 된다.
var carName = "Volvo";
var carName;
💡 let이나 const로 선언한 변수는 재선언 할 수 없다.
자바스크립트 산술(JavaScript Arithmetic)
대수학과 마찬가지로 = 와 + 같은 연산자를 사용해서 자바스크립트 변수를 계산할 수 있다.
let x = 5 + 2 + 3;
//10
문자열 또한 더해질 수 있는데 다음과 같이 연결된다
let x = "John" + " " + "Doe";
//John Doe
💡 숫자를 따옴표 안에 작성하면, 나머지 숫자들도 문자열처럼 처리되어 연결된다.
let x = "5" + 2 + 3;
//523let x = 2 + 3 + "5";
//55
자바스크립트 달러 기호 $(JavaScript Dollar Sign $)
자바스크립트는 달러 기호를 문자로 여겨, 달러 기호를 포함한 식별자는 변수명으로도 유효하다.
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
달러 기호를 사용하는 것은 자바스크립트에서 흔하진 않지만, 전문 프로그래머들은 종종 자바스크립트 라이브러리의 메인 함수에 대한 별칭처럼 쓰곤 한다.
예를 들어, 자바스크립트 라이브러리인 제이쿼리(jQuery)에서 메인 함수 $는 HTML 요소를 선택하는 데 사용되는데,
$("p")는 모든 p 요소를 선택하는 것을 의미한다.
자바스크립트 언더바(JavaScript Underscore (_))
자바스크립트가 언더바(_)를 문자로 여겨, 언더바(_)를 포함하는 식별자는 변수명으로도 유효하다.
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
언더바를 사용하는 것은 자바스크립트에서 흔하진 않지만, 전문 프로그래머들 사이에서는 "비공개(숨겨진)" 변수의 별칭으로 사용된다.
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트 Const(JavaScript Const) (0) | 2022.10.17 |
|---|---|
| 자바스크립트 Let(JavaScript Let) (0) | 2022.10.14 |
| 자바스크립트 주석(JavaScript Comments) (0) | 2022.10.13 |
| 자바스크립트 문법(JavaScript Syntax) (0) | 2022.10.13 |
| 자바스크립트 구문(JavaScript Statements) (0) | 2022.10.12 |