[WEB]JavaScript 변수(var, let, const) 사용하기

JavaScript 변수(var, let, const)

 

변수는 값이 변하는 것이 가능한 데이터를 말한다.

JavaScript에서  데이터 값을 저장하기 위해서 보통 사용한다

 

JavaScript에서 사용하는 변수의 종류는  var(ES5), let(JS), const(JS)를 주로 사용한다

 

var 키워드는 1995~2015까지 모든 자바스크립트 코드에서 사용되었고

let, const 키워드는 2015년에 자바스크립트에 추가 되었다

대부분의 프로그래밍 언어는 블록 레벨 스코프를 따르지만

자바스크립트는 함수 레벨 스코프를 따른다 그래서 ES5 까지는

글로벌 스코프(Global Scope)와 기능 스코프(Function Scope)

var를 사용해서 변수를 생성하였다

 

ES6부터 let그리고 const

블록 스코프(Block Scope)을 사용하기 시작했다.

 

함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

블록 레벨 스코프(Block-level scope)
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.

참고:https://poiemaweb.com/es6-block-scope

 

---

변수 형 종류

var 형

 

{함수 레벨 스코프}

변수를 선언 하고 동시에 값을 초기화, 재선언 가능/ 재할당 가능

 

<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML ="The value of z is: " + z;
</script>

var 형 같은 경우는

var carName = "Volvo";
var carName;

 

같은 변수를 선언 할 수 있고, 가지고 있는 값을 잃지 않는다

 

{} 블록 내부에서 선언된 var변수는 외부에서도 접근이 가능하다.

<script>
{
  var x = 2;
}
// x변수는 이곳에서 사용이 가능하다
<script>

블록 내부에서 변수를 다시 선언하면 변수도 다시 선언되서 값이 변경 된다.(변수명 재사용 불가능!)

var x = 20;
//x의 값 20
{
var x = 2;
// x의 값 2
}
//결과: x의 값 2

*값 없이 선언된 변수는 기본값으로 'undefined' 를 가지고 있다*

let 형

 

{블록 레벨 스코프}

지역변수를 선언 할때 사용하고 동시에 값을 초기화, 재선언 불가능/ 재할당 가능

<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML ="The value of z is: " + z;
</script>

let 형은 var와 다르게 

[재선언 불가능]

let carName = "Volvo";
let carName;

 

carName을 두 번 재선언이 불가능하다

 

{} 블록 내부에서 선언된 let 변수는 외부에서 접근이 불가능하다

<script>
function()
{
  let x = 2;
}
// x변수는 이곳에서 사용이 불가능하다
<script>

블록 내부의 변수를 다시 선언해도 외부 변수의 값은 변하지 않는다

let x = 10;
// x 값 : 10
{
let x = 2;
// x 값 : 2
}
// x 값 : 10

*값 없이 선언된 변수는 기본값으로 'undefined' 를 가지고 있다*

 

const 형

{블록 레벨 스코프}

읽기만 가능한 전용 상수를 의미, 재선언 불가능 / 재할당 불가능

 

const 형으로 선언한 변수는 값을 변경 할 수가 없다

 

<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML ="The total is: " + total;
</script>

[재선언 불가능 / 재할당 불가능]

const carName = "Volvo";

const carName ="BMW";

carName ="BMW";

 

배열의 요소에 접근해서 값을 변경, 추가 하는 것은 가능하다

const cars = ["Saab", "Volvo", "BMW"];
// 배열의 요소에 접근해서 값을 변경하는 것은 가능
cars[0] = "Toyota";
// 배열 요소에 값을 추가 하는 것 또 한 가능하다
cars.push("Audi");

하지만, 배열을 다시 할당 받는 것(재할당)을 불가능 하다

<script>
try {
  const cars = ["Saab", "Volvo", "BMW"];
  cars = ["Toyota", "Volvo", "Audi"];
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

결과값 ERROR : TypeError: Assignment to constant variable.

{} 블록 내부에서 선언된 const변수는 외부에서 접근이 불가능하다(let과 같음)

const x = 10;
// x 값 : 10
{
const x = 2;
// x 값 : 2
}
// x 값 : 10

 

*const는 선언할 때 반드시 변수에 값을 선언해 주어야 한다.*

 

---

하나의 문에 여러개의 변수 선언하기

 

let person = "John Doe";
let carName = "Volvo";
let price = 200;

보통 변수를 선언 할 때 위와같이 선언을 하게 되는데

쉼표(,) 를 사용해서 한줄에 축약해서 선언을 할 수가 있다

let person = "John Doe", carName = "Volvo", price = 200;

---

변수 만들기

 

사칙연산

 

변수 하나에서 '사칙연산'을 이용해서 결과 값을 낼 수 있다. 

let x = 5 + 2 + 3;

(+)연산자를 사용해서 문자열 두개를 합치는 것도 가능하다

let x = "John" + " " + "Doe";

결과: John Doe

 

달러 사인($)

 

자바스크립트에서 달러 기호는 문자로 취급하기 때문에

$를 포함한 변수명도 사용이 가능하다

 

<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>

 jQuery에서 메인 함수는 $HTML 요소를 선택하는 데 사용된다

jQuery $("p"); "모든 요소 선택" 을 의미하기 때문에

가능하면 $로 시작하는 변수명은 사용하지 않는 것이 좋다.

 

밑줄 : 언더바(_)

 

자바스크립트는 _(언더스코어)를 문자로 취급하므로

_을 사용해서 변수명을 만들 수 있다.

 

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;