변수와 상수

안녕하세요🙆

이번 시간 부터는 자바스크립트의 기본 문법에 대해 하나씩 배워보도록 하겠습니다. 이번 시간에는 자바스크립트 기본 문법 중 변수와 상수, 자바스크립트 변수의 동적 타입에 대해 알아봅시다.

변수

먼저 변수란, 프로그램이 실행되는 도중에 변경되는 값을 저장하기 위한 이름을 가진 저장소 입니다.

실습을 통해 변수 선언 방식 부터 함께 작성해보겠습니다.

let color;
color = "skyblue";

자바스크립트에서는 변수를 선언할 때 let 이라는 키워드를 사용합니다.

let 뒤에는 생성할 변수의 이름을 작성하고, 그 다음 = 연산자를 통해 해당 변수에 값을 할당합니다.

color 라는 변수를 생성하고 = 연산자를 사용해 color 라는 이름의 변수 안에 skyblue 라는 데이터를 저장해보겠습니다.

변수에 저장된 값은 앞에서 배웠던 console.log() 를 통해 확인해볼 수 있습니다.

let color;
color = "skyblue";

console.log(color); //skyblue

위의 예제 코드를 실행하면 skyblue 라는 결과값이 출력되는 것을 볼 수 있습니다.

변수의 값은 프로그램 실행 도중 변경할 수 도 있습니다.

위의 예제코드에서 skyblue라는 값이 담긴 변수 color를, 중간에 yellow라는 값으로 변경해보겠습니다.

let color = "skyblue";
color = "yellow";

console.log(color); //yellow

color 변수에 yellow 라는 값을 = 연산자를 통해 할당한 다음, console.log를 통해 color 변수의 값을 출력해보았습니다.

출력 결과, color 변수에 담긴 값이 skyblue 에서 yellow 로 바뀐 것을 확인할 수 있습니다.

이렇게 자바스크립트 변수를 선언하고, 중간에 값을 변경하는 방법까지 알아보았습니다.

변수 명명 규칙

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

자바스크립트에서 변수의 이름을 결정할 때에는 몇 가지 규칙을 지켜야합니다.

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

let $name;
let test_data;

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

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

위의 변수명 처럼 다른 기호를 사용할 경우, 에러가 발생합니다.

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

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

위의 예시에서는 test12만 변수명으로 사용 가능하고, 1test 라는 이름으로 변수를 생성했을 경우에는 에러가 발생하게 됩니다.

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

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

위의 예시에서 "let" 이라는 단어와 "class"라는 단어는 자바스크립트 내부에서 이미 사용 중인 예약어 이기 때문에 변수명으로 활용할 경우 에러를 발생시킵니다.

자바스크립트에는 다음과 같은 예약어 목록이 있습니다.

참고해주시면 좋을 것 같습니다.

긴 변수명 표기법

개발을 하다보면 변수명이 길어지게 될 경우가 있습니다.

예시로 고양이인지 강아지인지 구분하는 값을 담는 변수의 이름을 is cat or dog 라고 지어보겠습니다.

let iscatordog;

이렇게 긴 변수명으로 변수를 선언해보았는데, 변수명은 띄어쓰기가 되지 않아 굉장히 읽기가 불편한 것을 볼 수 있습니다.

이렇게 여러 단어를 조합해 변수명을 만들 경우에는 카멜 표기법 으로 변수명을 작성합니다.

let isCatOrDog;

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

여기서 첫 단어는 is로 is 를 제외한 cat, or, dog의 첫 글자를 대문자로 작성해주면 됩니다.

이렇게 카멜 표기법으로 변수명을 작성하게되면, 훨씬 읽기 수월하고 좀 더 직관적으로 변수의 역할을 확인할 수 있게 됩니다.

동적 타입과 typeof 연산

이렇게 자바스크립트 변수에 대해 배우면서, 기존에 C 언어나 Java를 배우셨던 분들은 의문이 들으셨을 수 있습니다.

C나 Java는 변수를 선언할 때, 앞에 char 나 string 처럼 해당 변수의 자료형을 먼저 작성해야 하지만,

자바스크립트는 다른 언어들과는 다르게 변수 선언 시 변수의 자료형을 작성하지 않기 때문인데요,

그럼, 의문을 해결하기 위해 자바스크립트 변수의 자료형을 알 수 있는 방법은 무엇인지, 그리고 왜 자바스크립트 변수는 선언 시 자료형을 명시하지 않는지에 대해 알아보겠습니다.

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

typeof 연산자 사용을 위해 nowType이라는 변수를 선언하고, 해당 변수에 "안녕하세요" 라는 문장을 할당해보겠습니다.

그 다음 typeof 연산자를 사용해 nowType의 자료형을 출력해보겠습니다.

let nowType = "안녕하세요";
console.log(typeof nowType);

위의 코드처럼 nowType의 자료형을 확인해보기 위해서는 typeof 연산자 뒤에 변수명을 적어주면 nowType 변수의 현재 타입을 확인할 수 있습니다.

위의 코드를 실행하면 string, 문자열 이라고 나오네요.

자바스크립트 변수의 자료형은 이렇게 typeof 연산자로 확인이 가능합니다.

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

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

직접 코드를 작성해보면서, 동적 타입을 지원하는 언어가 무슨 말인지 확인해보겠습니다.

let nowType = "안녕하세요";
console.log(typeof nowType);

nowType = 100;
console.log(typeof nowType);

위의 코드를 실행시켜보면, 첫 번째 콘솔의 결과값은 string 이 출력되고, nowType 변수의 값이 100으로 변경된 이후의 결과값은 number 가 출력되는 것을 확인할 수 있습니다.

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

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

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

상수

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

상수란, 변화하지 않는 변수를 뜻합니다.

변화하지 않는 변수가 무슨 말인지, 실습을 통해 알아보도록 하겠습니다.

상수를 선언할 땐 let 이 아닌 const 키워드를 통해 변수를 선언을 해야합니다.

앞에서 작성했던 코드와 동일하게 color라는 변수에 skyblue 라는 값을 할당하고, 이후 yellow로 값을 변경하는 코드를 작성해보겠습니다.

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

console.log(color); //에러

이런식으로 const 로 선언되어있는 color 라는 상수의 값을 yellow으로 변경시키려고 한다면, 타입 에러가 발생하게 됩니다.

오른쪽 콘솔 창에 해당 변수는 읽기 전용이라고 나오는 것을 볼 수 있습니다.

let으로 선언된 변수는 중간에 값이 변경 될 수 있지만, const로 선언된 변수는 프로그램 실행 도중 변화할 수 없는 변수인 상수가 됩니다.

상수 활용 예시

지금까지 자바스크립트 변수의 장점은 유연한 타입 변경이라고 배웠는데, 왜 값을 변화시킬 수 없는 상수를 사용하는지 궁금하실 수 있습니다.

상수는 생일, 이름 등 정말 값이 절대 변경될 수 없다고 확신할 때, 다른 개발자들이 변수의 값을 변화시키는 것을 방지하기 위해 사용됩니다.

또한, 상수는 값이 변경되지 않기 때문에 기억하기 어려운 값을 저장하는 예약어로도 사용됩니다.

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

let nowUrl = GITHUB_URL;

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

이렇게 자바스크립트의 변수와 상수에 대해 알아보았습니다.

다음 시간에는 자바스크립트의 자료형에 대해 배워보도록 하겠습니다.

감사합니다.