2.20 JavaScript 변수

코드스테이츠

2.20 JavaScript 변수

스우티 2023. 2. 21. 19:37

변수의 선언과 할당

어떤 사물을 다루기 위해서는 이름을 알아야 합니다. 데이터도 마찬가지입니다. 문제를 해결하기 위해 컴퓨터와 소통하기 위해서는 특정 데이터에 대해 같은 이름을 공유하고 있어야 합니다. JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 합니다. 이해를 돕기 위해 구구단 2단을 출력하는 코드를 예로 들어 보겠습니다.

// 구구단 2단
console.log(2 * 1); // 2
console.log(2 * 2); // 4
console.log(2 * 3); // 6
console.log(2 * 4); // 8
console.log(2 * 5); // 10
console.log(2 * 6); // 12
console.log(2 * 7); // 14
console.log(2 * 8); // 16
console.log(2 * 9); // 18

반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 그 이름을 사용하여 구구단 n단을 출력하면 어떻게 될까요? 컴퓨터가 기억하고 있는 숫자를 바꾸어주는 것만으로도 손쉽게 구구단 n단을 출력할 수 있을 겁니다. 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것을 변수 선언이라고 합니다. 변수를 선언해 보겠습니다. 변수 선언 키워드인 let을 사용하여 변수를 선언하면 컴퓨터는 값을 저장하기 위한 메모리 공간을 확보하고 그 공간의 이름을 num으로 기억합니다. 그 공간의 이름인 num을 변수라고 합니다.

let num; // 변수 선언

이제 컴퓨터가 확보한 num이라는 이름의 메모리 공간에 값을 넣어보겠습니다. 할당연산자(=)를 사용하여 메모리 공간에 특정한 값을 넣을 수 있습니다. 이것을 값 할당이라고 합니다.

num = 5; // 값 할당

변수 선언과 값 할당을 통해 컴퓨터는 값을 저장하기 위해 num이라는 이름의 메모리 공간을 확보하고, 그 메모리 공간에 숫자 5를 저장했습니다. 변수 num을 사용하여 구구단 5단을 출력하는 코드를 작성해 보겠습니다.

// 구구단 5단
let num; // 변수 선언
num = 5; // 값 할당

console.log(num * 1); // 5
console.log(num * 2); // 10
console.log(num * 3); // 15
console.log(num * 4); // 20
console.log(num * 5); // 25
console.log(num * 6); // 30
console.log(num * 7); // 35
console.log(num * 8); // 40
console.log(num * 9); // 45

실행시킬때 node index.js

요약 및 정리

변수의 선언과 할당

변수를 선언할 때는 let 키워드를 사용합니다. let 키워드 뒤에 선언하고자 하는 변수명을 입력합니다.

let name;

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

name = 'kimcoding';

변수 선언과 값 할당을 동시에 할 수 있습니다.

let name = 'kimcoding';

변수에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당할 수 있습니다. 아래 예제에서 string, number, boolean 외의 다른 타입은 추후에 학습하게 될 자료형입니다.

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키워드를 사용할 것을 권장합니다. 재할당이 필요한 변수에는 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) : 단어의 시작을 대문자로 작성