Chapter 3. 변수

학습 목표

• 변수가 메모리에 데이터를 저장하는 방법이라는 것을 기억한다.
• let 키워드를 활용하여 변수를 선언하고 원하는 값을 할당할 수 있다.
• 변수를 활용하여 더 쉽게 구구단을 출력할 수 있다.
• template literal을 사용할 수 있다.

JavaScript에서도 데이터를 편하게 다루기 위해 데이터에 이름을 붙이는데, 그 이름이 바로 변수

데이터 보관함(메모리)이 있고, 보관함에 크기는 동일하며, 각 보관함의 이름 = 변수, 이름을 통해 데이터를 사용(재활용)하는 것을 의미

변수를 사용하는 법
사용할 수 있는 데이터 보관함이 주어지고, 1. 데이터 보관함에 자리를 확보(선언-declaration), 2. 보관함에 데이터 저장(할당-assignment), 3. 선언과 할당 동시에 가능함

3-1. 변수의 선언과 할당

변수의 선언과 할당

예를 들어, 반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고, 그 이름을 사용하여 구구단 n 단을 출력하면 어떻게 되는가?

컴퓨터가 기억하고 있는 숫자를 바꾸어주는 것만으로도 손쉽게 구구단 n단을 출력할 수 있음

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

요약 및 정리

변수의 선언과 할당

• 변수를 선언할 때는 let 키워드를 사용
• let 키워드 뒤에 선언하고자 하는 변수명 입력

let name;

• 선언된 변수에 값을 할당할 때는 할당 연산자(=)를 사용

name = 'kimcoding';

• 변수 선언과 값 할당을 동시에 할 수 있음

let name = 'kimcoding';

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

let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'SEB FE'};
let empty = null;
let notDefined = undefined;

아무것도 할당하지 않은 변수

• 아무것도 할당되지 않은 변수는 undefined가 자동으로 할당
• 초기화라는 JavaScript의 독특한 특징

let variable;
console.log(variable) // undefined

값의 재할당

• let 키워드로 선언한 변수에 새로운 값을 할당할 수 있음
• 재할당에도 할당연산자(=)를 사용

let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'

재할당이 불가능한 변수(상수)

• let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

var키워드

• var키워드는 let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드
• var키워드에는 여러 단점이 존재하고, 이를 보완하기 위해 let키워드와 const키워드가 등장
• var키워드는 사용을 되도록 지양하고, let키워드와 const키워드를 사용 권장

var name = 'kimcoding'; // var키워드가 가지고 있는 단점으로 인해 사용을 지양하는 것이 좋다.

네이밍 규칙

• 변수명은 다음과 같은 네이밍 규칙을 준수해야 함

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음

let name, $head, _score // 사용 가능한 변수명

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

let 1st; // 사용할 수 없는 변수명

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

let true; // 사용할 수 없는 변수명

• 그 외 규칙들
  • 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현

// 변수의 존재 목적을 이해할 수 없는 변수명
let x = 100;
let y = 5;

// 변수의 존재 목적을 명확히 알 수 있는 변수명
let name = 'kimcoding';
let age = 25;

네이밍 컨벤션

• 하나 이상의 영어단어를 사용하여 식별자를 만들 경우 네이밍 컨벤션을 잘 지켜서 가독성을 높임
• JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용
  • 카멜 케이스는 낙타의 등모양에서 유래된 이름으로써, 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법

// 🐪카멜 케이스(camelCase)
let firstName = 'coding'; 
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

3-2. 변수 활용하기

변수를 활용한 연산

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

let number = 10;
console.log(number + 2); // 12
console.log(number - 5); // 5
console.log(number * 3); // 30
console.log(number / 2); // 5
console.log(number % 3); // 1
console.log(number); // 10

• 연산의 결과를 변수에 반영하려면 재할당을 함

let number = 10;
number = number + 2;
console.log(number); // 12

number = number * 3;
console.log(number); // 36

• 변수끼리의 연산도 가능

템플릿 리터럴(template literal)

• 값을 큰따옴표(”), 작은따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string) 타입이 됨

• 이 중에서 백틱을 사용하는 방법이 템플릿 리터럴

• 템플릿 리터럴은 큰따옴표, 작은따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있으며, 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아야 함

• 템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있으며, 문자열이 할당되지 않은 변수도 문자열로 취급

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

• 단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 우수

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'