Unit 2-[JavaScript] 변수

📌 변수 개요

JavaScript에서도 데이터를 편하게 다루기 위해 데이터에 이름을 붙일 수 있다. 그 이름을 바로 변수라고 부른다. 데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 변수에 대해 학습하자.  각각의 데이터에 이름을 짓는 방법을 알게 된다. 개발자답게 표현하자면 변수를 선언하고 값을 할당할 수 있는 것을 의미한다. 또 변수를 활용하여 복잡한 작업을 간단하게 처리할 수 있게 된다.

📌 변수의 선언과 할당 

✏️  변수의 선언과 할당

문제를 해결하기 위해 컴퓨터와 소통하기 위해서는 특정 데이터에 대해 같은 이름을 공유하고 있어야 한다. JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 한다. 

 

 **반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 그 이름을 사용하여 구구단 n단을 출력하면 어떻게 될까?** 컴퓨터가 기억하고 있는 숫자를 바꾸어주는 것만으로도 손쉽게 구구단 n단을 출력할 수 있을 거다. 특정 데이터를 컴퓨터가 기억할 수 있도록 메모리 공간을 확보하고 그 메모리 공간에 이름을 부여하는 것을 **변수 선언**이라고 한다. 

✅ 변수를 선언하는법

let num; // 변수 선언

 변수 선언 키워드 let 을 사용 변수를 선언하면 컴퓨터는 값을 저장하기 위한 메모리 공간을 확보하고, 그 공간의 이름을 num으로 기억한다. 그 공간의 이름인 num이 바로 변수이다. 이제 컴퓨터가 확보한 num이라는 이름의 메모리 공간에 값을 넣어보겠다.

num = 5; // 값의 할당

이처럼 할당연산자 ( = )를 사용하여 메모리 공간에 특정한 값을 넣는 것을 값의 할당이라 한다. 

 

🌈 정리 : 컴퓨터가 값을 저장하기 위해 num이라는 메모리 공간 확보 => 메모리 공간에 숫자 5 저장 => num  을 이용해 구구단 출력

// 구구단 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

오히려 코드의 양이 많아진 것처럼 느껴질 수도 있다. 하지만 앞서 설명한 것처럼 변수 사용의 이점은 구구단 n단을 출력하기 용이하다는 것에 있다.  6단, 7단, 8단 등으로 직접 변경해 보면서 변수 사용의 편리함을 직접 경험해 봐야한다.

📌 요약 및 정리 

✅ 변수의 선언과 할당

 

변수를 선언할 때는  let  키워드를 사용

let 키워드 뒤에 선언하고자 하는 변수명을 입력

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

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

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) : 단어의 시작을 대문자로 작성

📌 변수 활용하기 

⭐️ 변수를 활용한 연산

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

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

그러나 각각의 연산은 독립적으로 이뤄질 뿐, 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'