자바스크립트 - 변수와 상수

변수

• 먼저 변수란, 프로그램이 실행되는 도중에 변경되는 값을 저장하기 위한 이름을 가진 저장소입니다. 
• 자바스크립트에서 변수를 선언할때 let이라는 키워드를 사용합니다. let뒤에는 생성할 변수의 이름을 작성하고, 그 다음 = 연산자를 통해 해당 변수에 값을 할당합니다.
  
  • 아래의 코드를 보면 color라는 변수를 생성하고 = 연산자를 통해 데이터를 저장했습니다. 그리고 결과값이 출력되는 것을 볼 수 있습니다. 

• 변수의 값은 실행도중 변경될 수 도 있습니다. 위의 예제코드에서 skyblue라는 값이 담긴 변수 color를 중간에 yellow라는 값으로 변경하는 것도 가능합니다. 

 

변수 명명 규칙 

자바스크립트에서 변수의 이름을 결정할 때 지켜야 할 규칙을 배워보겠습니다.

• 첫 번째 규칙은 $와 _를 제외한 기호를 사용하면 안된다는 규칙입니다. 

let $name;
let test_data;

위의 코드처럼 $와 _를 포함한 변수명은 사용 가능하지만,

let & name; //불가능
let ^ test; //불가능

위의 변수명은 에러가 발생합니다. 

 

• 두 번째 규칙은 변수명은 맨앞은 숫자를 사용하면 안된다는 규칙입니다.

let 1test; //불가능
let test12; //가능

 

• 세 번째 규칙은 예약어는 변수명으로 사용할 수 없다는 규칙입니다. 

let let = 1; //에러!!
let class = "class"; //에러!!

위의 예시에서 "let"이라는 단어와 "class"라는 단어는 자바스크립트 내부에서 이미 사용 중인 예약어 이기 때문에 변수명으로 활용할 경우 에러를 발생시킵니다. (자바스크립트 예약어 목록 : https://www.w3bai.com/ko/js/js_reserved.html)

 

긴 변수명 표기법

개발을 하다보면 변수명이 길어지게 될 경우가 있습니다. 예시로 고양이인지 강아지인지 구분하는 값을 담는 변수의 이름을 is cat or dog라고 지어보겠습니다. 

let iscatordog;

이렇게 긴 변수명으로 변수를 선언했는데, 굉장히 읽기가 불편합니다. 이럴때는 카멜 표기법을 사용합니다. 

let isCatOrDog;

카멜 표기법은 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 방법입니다. 

 

 

동적 타입과 typeof 연산

이렇게 자바스크립트 변수에 대해 배우면서, 의문이 들으셨을 수 도 있습니다. c언어나 java는 변수의 자료형을 먼저 작성해야 하지만, 자바스크립트는 다른 언어들과는 다르게 변수 선언 시 변수의 자료형을 작성하지 않습니다.

왜 그럴까요?

자바스크립트 변수는 typeof연산자를 통해 해당 변수의 타입을 확인해볼 수 있습니다.  

자바스크립트 변수명은 이렇게 typeof 연사자로 확인이 가능합니다. 

그렇다면 왜 변수 선언시 자료형을 명시하지 않는 것인지 알아보겠습니다. 

 

자바스크립트 변수는 값이 바뀔때마다 바뀐값의 자료형을 변수의 자료형으로 갖는 동적 타입을 지원하기 때문입니다. 

직접 코드를 보면서 확인해보겠습니다.

맨처음 변수의 값은 문자열로 할당되었지만, 중간에 값을 숫자로 변경하니 숫자로 변경되었습니다. 

이렇게 자바스크립트 변수는 같은 변수에, 서로 다른 타입의 값을 저장하더라도, 아무런 에러 없이 유연하게 값과 함꼐 타입이 변하는 것을 확인할 수 있습니다. 

그렇기 때문에 자바스크립트는 별도로, 변수를 선언 시 앞에 자로형을 명시하지 않아도 되는 것입니다. 

 

 

상수

지금까지 변수 값과 자료형을 유연하게 변경할 수 있는 자바스크립트 변수의 동적타입에 대해 배워보았습니다. 이번에는 반대의 성질을 갖는 상수에 대해 배워보겠습니다. 

• 상수란 변하지 않는 변수를 뜻합니다. 
• 상수를 선언할 때는 let이 아닌 const키워드를 통해 변수를 선언해야합니다. 
• 아래의 코드는 에러를 발생시킵니다. (const로 선언했기 때문!)

const color = "skyblue";
color = "yellow";

console.log(color); //에러

 

상수 활용예시 

• 왜 값을 변화시킬 수 없는 상수를 사용할까요? 상수는 생일, 이름 등 정밀 값이 절대 변경될 수 없다고 확신할 때, 다른 개발자들이 변수의 값을 변화시키는 것을 방지하기 위해 사용됩니다. 또한 상수는 값이 변경되지 않기 때문에 기억하어려운 값을 저장하는 예약어로도 사용됩니다.

const GITHUB_URL = "<https://github.com/hbin12212>";
const HOMEPAGE = "<https://www.hyobb.com>";

let nowUrl = GITHUB_URL;

상수를 예약어로 활용할 때는 위와 같이 전부 대문자로 선언 후 사용합니다. 

---

참고자료

https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의