[JavaScript] 변수

◎ 변수 

: 데이터를 담는 메모리(보관함)의 이름

 

변수를 통해 메모리에 들어있는 데이터를 사용한다.

어떻게?

1. 보관함 확보하기 → 변수 선언(declaration)

 

2. 보관함에 데이터 저장하기 → 변수에 값을 할당(assignment)

 

3. 데이터 사용하기

 

 

---

1) 변수의 선언과 할당

1. 변수 선언

- 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것

- 변수를 선언하는 키워드 사용

변수를 선언하는 키워드는 세 가지가 있다.

1. var : 변수 중복선언 허용(에러 발생 X), 함수 레벨 스코프, 변수 Hoisting
2. let : 변수 중복선언 금지, 블록 레벨 스코프, 변수 Hoisting이 발생하지 않는 것처럼 동작
3. const : 선언과 동시에 초기화 필요, 재할당 금지, 상수로써 작동

예전에는 var로만 변수를 선언했지만 많은 단점때문에 let, const가 새로 나오게 된 지금은 잘 사용하지 않는다.

(수업에서도 let 위주로 사용)

//let 변수명의 형태로 선언
let myage;

 

 

2. 변수에 값 할당

- 할당 연산자(=) 사용

//변수명 = 값 의 형태
myage = 27;

- 변수에는 사용이 가능한 모든 타입의 값을 할당할 수 있음

단, 아무값도 할당되지 않은 변수는 undefined가 자동으로 할당됨 → 초기화

- 변수의 선언과 할당을 동시에 할 수 있음

let myage = 27;

3. 값의 재할당

-let 키워드로 선언된 변수는 새로운 값을 할당할 수 있음

사진1. 값의 재할당

단, const키워드로 선언된 변수는 재할당이 불가능하다.(상수이기때문)

 

 

---

2) 네이밍 규칙

1. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러기호($)를 포함할 수 있음
단, 숫자로 시작하는 것은 허용하지 않음

2. 예약어는 식별자로 사용할 수 없음
※예약어 : 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어
 ex) let, const, true, false, typeof 등

3. 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야함

○ 네이밍 컨벤션

- 식별자의 이름이 여러 단어로 이루어진 경우 가독성을 높이기 위한 방법

- 주로 카멜케이스를 사용

let myAge; //카멜케이스
let my_age; //스네이크케이스
let MyAge; //파스칼케이스

---

 

3) 변수 활용하기

1. 변수를 활용한 연산

- 변수에 숫자타입의 값이 할당되어 있는 경우 숫자타입에 사용 가능한 모든 연산이 가능

사진2. 변수의 연산

- 연산의 결과를 변수에 반영할 수 있음 → 재할당

사진3. 변수의 재할당

- 변수끼리의 연산도 가능함

사진4. 변수끼리의 연산

 

 

---

2. 템플릿 리터럴(Template Literal)

- 문자열 타입 작성법 중 백틱( ` ` )을 사용하는 방법

-문자열 내부에 변수를 삽입할 수 있음

- ${ }를 사용하여 변수를 삽입

let myname = 'kiji';
let myage = 27;
let myscore = 70;
console.log(`name : ${myname}, age : ${myage}, score : ${myscore}`);

 

사진5. 코드결과

백틱으로 문자열을 입력하는 경우 내부에 입력한 그대로 나타난다.

 

따옴표로 같은 결과를 출력해보자.

console.log('name :'+''+myname+','+''+'age :'+ myage+','+''+'score :'+myscore);

백틱으로 입력한 경우는 연결 연산자를 쓰지 않고 문자열을 합칠 수 있지만

따옴표나 쌍따옴표의 경우에는 연결 연산자로 문자열을 합치고 그 사이의 공백을 주기 위해 빈 문자열도 사용한다.

 

따라서 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수하다.