[Front-End] JavaScript 변수

변수

변수는 컴퓨터 메모리에있는 정보의 작은 컨테이너라고 할 수 있다.

사용자 이름, 계정 번호 또는 개인화 된 인사말과 같은 정보를 변수에 저장하면 메모리에서 찾을 수 있다.

즉, 변수는 메모리에 데이터를 레이블링하고 저장한다.

 

< 변수로 수행할 수 있는 작업 >

① 설명이 포함된 이름으로 변수를 만든다.

② 변수에 저장된 정보를 저장하거나 업데이트한다.

③ 변수에 저장된 참조 또는 "가져 오기"정보

 

 

* 2015년 JavaScript ES6 버전에 많은 변경 사항이 도입되었고, 가장 큰 변경 사항 중 하나는 변수를 만들거나 선언하기 위해 사용되는 두 개의 새로운 키워드가 바로 let과  const 이다.

 

 

변수 만들기 : var

var 키워드 : 변수 선언에 사용되며 ES6 이전에는 var 키워드만 사용할 수 있었다 .

var userName = 'Jessi';
console.log(userName);
// Jessi 출력

var 변수는 새 변수를 만들거나 선언할 때 사용하는 JavaScript 키워드이며, userName이라는 이름의 변수에 Jessi를 할당한다. 이러한 방식으로 대문자를 사용하는 것은 camel casing 이라는 JavaScript의 표준 규칙이다. camel casing은 단어를 하나로 그룹화하고 첫 번째 단어는 소문자, 그 뒤에 오는 모든 단어는 첫 글자가 대문자로 표시됩니다. ex) camelCaseEverything

 

<변수 이름 지정 규칙>

① 변수 이름은 숫자로 시작할 수 없다.

② 변수 이름은 대소 문자를 구분하므로 userName과 username은 다른 변수가 된다. (하지만 같은 스펠링으로 다른 변수를 만드는 것은 좋지 않다!)

③ 변수 이름은 키워드와 같을 수 없다 . ex) case, class, void 등

⤷  키워드 리스트를 볼 수 있는 사이트

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords

Lexical grammar - JavaScript | MDN

 

 

변수 만들기 : let

let 키워드 : ES6에 도입되었으며, 변수에 다른 값을 재할당 할 수 있다. 

let food = 'Pasta';
console.log(food); // Pasta 출력
food = 'Pizza';
console.log(food); // Pizza 출력

let과 var를 사용할 때 변수에 값을 할당하지 않고도 변수를 선언할 수 있다. 그런데 이 경우 변수는 undefined로 자동 초기화된다.

let money;
console.log(money); // undefined 출력
money = 200;
console.log(money); // 200 출력

let 키워드를 사용하며 선언된 변수에 값을 할당하지 않아서 자동으로 undefined 값이 출력되었는데 추후 변수 값을 다시 할당할 수 있다.

 

 

변수 만들기 : const

const 키워드 : ES6에서도 도입되었으며, constant의 줄임말이다.  var, let과 같이 const 변수에 어떤 값을 저장할 수 있다.

const userName = 'Sam';
console.log(userName); // Sam 출력

그러나 const 변수는 상수이기 때문에 재할당하려고 하면 TypeError가 발생한다. 즉, const 변수는 선언 할 때 값을 할당해야한다.

const 변수를 값 없이 선언하려고 하면 SyntaxError가 발생한다.

나중에 변수를 재할당하는지 여부에 따라 let 또는 const 키워드 사용을 결정해야 한다.

• 변수를 다시 할당 O → let 사용

• 변수를 다시 할당 X → const 사용

 

 

수학적 할당 연산자

할당 연산자 +=, -=, *=, /= : +, -, *, / 대신에 수학적 연산을 수행한 다음에 계산된 값을 다시 할당한다.

let a = 3;
a = a + 1;
console.log(a); // 4 출력

let b = 1;
b += 1;
console.log(b); // 2 출력

let c = 13;
c -= 3; // c = c - 3
console.log(c); // 10 출력

let d = 20;
d *= 3; // d = d * 3와 동일
console.log(d); // 60 출력

let e = 4;
e /= 2; // e = e / 2와 동일
console.log(e); // 2 출력

 

 

증가 및 감소 연산자

증가 연산자(++)와 감소 연산자(--)가 있다.

증분 연산자는 변수 값을 1씩 증가시키고, 감소 연산자는 변수 값을 1씩 감소시킨다. 

let a = 12;
a++;
console.log(a); // 13 출력

let b = 10;
b--;
console.log(b); // 9 출력

 

 

변수와 문자열 연결

+로 문자열(String) 값을 조합하여 사용할 수 있다.

let userName = 'Benny';
console.log('My name is ' + userName + '.'); // 'My name is Benny.' 출력

 

 

문자열 보간

ES6 버전의 JavaScript에서는 템플릿 리터럴을 사용하여 변수를 문자열에 삽입하거나 보간할 수 있다. 

const userName = 'Hoo';
console.log(`My name is ${userName}.`); // My name is Hoo. 출력

 

템플릿 리터럴은 백틱( ` )으로 둘러싸고 ${ } 안에 변수를 넣는다. 

 

 

typeof 연산자

typeof 연산자 : 코드를 작성하는 동안 프로그램에서 변수의 데이터 유형을 추적하기 위해 사용되며 변수 값의 데이터 유형을 확인해야하는 경우를 사용할 수 있다 .

const data1 = 'hello';
console.log(typeof data1); // string 출력
 
const data2 = 8;
console.log(typeof data2); // number 출력
 
const data3 = true; 
console.log(typeof data3); // boolean 출력

 

I own a pet armadillo.