안녕하세요🙆
이번 시간에는 자바스크립트 기본 문법 중 변수와 상수, 그리고 자바스크립트 변수의 동적 타입에 대해 배워보도록하겠습니다.
변수
변수란?
변수란, 프로그램이 실행되는 도중에 변경되는 값을 저장하기 위한 이름을 가진 저장소 입니다.
let color;
color = "skyblue";자바스크립트에서는 skyblue 라는 값을 color 라는 저장소에 저장하기 위해서
위의 예제와 같이 let 키워드를 사용해 변수를 생성합니다.
위의 예제에서는 let 으로 color 라는 변수를 생성하고 = 연산자를 사용해 변수 안에 데이터를 저장했습니다.
변수에 저장된 값은 console.log() 라는 명령어를 통해 확인해볼 수 있습니다.
console.log() 명령어는 괄호 안에 있는 값을 그대로 콘솔에 출력하는 역할을 합니다.
let color;
color = "skyblue";
console.log(color);위의 예제 코드를 실행하면 skyblue 라는 결과값이 출력되는 것을 볼 수 있습니다.
변수의 값은 프로그램 실행 도중 변경할 수 있습니다.
위의 예제코드에서 중간에 변수 값을 변경한 후 console.log() 를 통해 값을 출력해보겠습니다.
let color = "skyblue";
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;카멜 표기법은 위의 변수와 같이, 단어를 차례대로 나열하면서 첫 단어를 제외한 각 단어의 첫 글자를 대문자로 작성하는 방법입니다.
이렇게 카멜 표기법으로 변수명을 작성할 경우 훨씬 읽기 수월하고 좀 더 직관적으로 변수의 역할을 확인할 수 있습니다.
동적 타입과 typeof 연산
이렇게 자바스크립트 변수에 대해 배우면서, 기존에 C 언어나 Python을 배우셨던 분들은 의문이 들으셨을 수 있습니다.
자바스크립트는 다른 언어들과는 다르게 변수 선언 시, 변수 타입을 선언하지 않기 때문인데요,
그럼, 의문을 해결하기 위해
자바스크립트 변수의 타입을 알 수 있는 방법은 무엇인지,
왜 자바스크립트 변수는 선언 시 자료형을 명시하지 않는지에 대해 알아보겠습니다.
let nowType = "안녕하세요";
console.log(typeof nowType);자바스크립트 변수는 typeof 연산자를 통해 현재 타입을 확인해볼 수 있습니다.
위의 코드처럼 nowType의 자료형을 확인해보기 위해서는 typeof 연산자 뒤에 변수명을 적어주면 nowType 변수의 현재 타입을 확인할 수 있습니다.
그렇다면 왜 자바스크립트 변수는 선언 시 자료형을 명시하지 않는 것일까요??
let test = "test";
console.log(test + "의 자료형 = " + typeof test);
test = 23;
console.log(test + "의 자료형 = " + typeof test);자바스크립트 변수는 값이 바뀔때마다 바뀐 값의 자료형을 변수의 자료형으로 갖는 동적 타입을 지원하기 때문입니다.
위의 코드를 예시로 살펴보겠습니다.
위의 코드를 실행시켜보면, 첫 번째 콘솔의 결과값은 test의 자료형 = string 이 출력되고, test 변수의 값이 23으로 변경된 이후의 결과값은
23의 자료형 = number 이 출력되는 것을 확인할 수 있습니다.
이렇게 자바스크립트 변수는 같은 변수에 서로 다른 타입의 값을 저장하더라도, 아무런 에러 없이 유연하게 타입과 함께 값이 변하는 것을 확인할 수 있습니다.
상수
지금까지 변수 값과 타입을 유연하게 변경할 수 있는 자바스크립트 변수의 동적타입에 대해 배워보았는데요, 이번엔 반대의 성질을 갖는 변수에 대해 배워보도록 하겠습니다.
상수란?
상수란, 변화하지 않는 변수를 뜻합니다.
상수를 선언할 땐 let 이 아닌 const로 선언을 해야합니다.
const age = 23;
age = 30; //에러!!이런식으로 const 로 선언되어있는 age 라는 상수의 값을 30으로 변경시키려고 한다면, 에러가 발생하게 됩니다.
상수는 프로그램 실행 도중에 절대로 값을 변경할 수 없기 때문입니다.
상수 활용 예시
지금까지 자바스크립트 변수의 장점은 유연한 타입 변경이라고 배웠는데, 왜 값을 변화시킬 수 없는 상수를 사용하는지 궁금하실 수 있습니다.
상수는 생일, 이름 등 정말 값이 절대 변경될 수 없다고 확신할 때, 다른 개발자들이 변수의 값을 변화시키는 것을 방지하기 위해 사용됩니다.
또한, 상수는 값이 변경되지 않기 때문에 기억하기 어려운 값을 저장하는 예약어로도 사용됩니다.
const GITHUB_URL = "https://github.com/hbin12212";
const VELOG_URL = "https://velog.io/@hbin12212";
let nowUrl = GITHUB_URL;상수를 예약어로 활용할 때는 위의 예시처럼 전부 대문자로 선언합니다.
next
이번시간에는 자바스크립트의 변수와 상수에 대해, 그리고 자바스크립트 변수의 동적타입에 대해 알아보았습니다.
다음시간에는 자바스크립트의 자료형과 형변환에 대해 배워보도록 하겠습니다.
감사합니다🤗
🙏참고 & 출처
https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
https://ko.javascript.info/variables