변수를 선언할 때는 var, const, let으로 선언할 수 있으며 변수에 할당(assignment)하는 값의 특성에 따라 선언 방법을 달리하여야합니다.
1. 변수 선언법
먼저 기본 변수 선언 규칙을 알아보겠습니다.
var name = "assignment";
//(변수선언) (변수명) = (변수에 할당할 값);좌측 부터 순서대로 1) 변수 선언 방식을 정하고 2) 해당 변수의 이름을 정해주고 3) 해당 변수에 할당할 값을 정하면 됩니다.
const orderNumber = 1; // 예시1
let address = "서울특별시 강남구 역삼동"; // 예시2
const HeartIsBlack = false; // 예시3
var myDogName = null; // 예시4위의 예시와 같이 var name = “assignment” 의 공식으로 선언할 변수의 특성에 따라 변수선언 종류, 변수명, 변수타입을 적절하게 작성해야합니다.
변수 선언 시 대표적으로 고려해야할 항목들은 아래와 같습니다.
- 1) 변수선언 종류 -
const,let,var
2) 변수명 작성법 - CamelCase 로 작성
3) 변수에 할당할 값의 기본 타입 (데이터 타입) - number, string, boolean, null, undefined
1-1. 변수 선언 종류
앞서 변수 선언의 방법은 const, let, var 로 세가지의 종류가 있다고 했는데요, 변수를 선언한 이후 해당 변수에 다른 값이 재할당 될 필요(가능성)이 있는가에 따라 쓰임새에 맞게 선택하여 변수를 선언하여야합니다.
1) 변수 재할당법
먼저 변수를 재할당 하는 방법에 대해 알아보겠습니다.
let welcomeMSG = "안녕"; // 1)변수 선언
console.log(welcomeMSG); // 2)콘솔에.기록해라(welcomeMSG)변수를; >> 안녕
welcomeMSG = "안녕하세요"; // 3)(welcomeMSG)변수 값을 "안녕하세요"로 재할당 하기
console.log(welcomeMSG); // 4)콘솔에.기록해라(welcomeMSG)변수를; >> 안녕하세요간단합니다. 선언했던 변수의 이름을 작성한 후 우측에 다른 값을 재할당하면 됩니다.
console.log를 통해 변수가 오류 없이 선언 되었는지 확인할 수 있습니다.변수명 = 할당값좌항, 우항의 순서를 이해해야합니다. 좌항에 있는 변수는 우항에 있는 데이터를 저장한다는 뜻입니다.- 이 때 자바스크립트는 위에서 아래의 순서대로 코드를 읽기 때문에 2)번 라인의 콘솔 실행 시 4)번에서 기록한
“안녕하세요”값이 반환되는 것이 아닙니다. 아직 3)번 코드를 못 읽은 채로 console.log가 실행되었기 때문에 1)번에서 선언한“안녕”값이 반환 되는 것 입니다.
[주의] 변수 재선언 ≠ 변수 재할당
변수 값을 재할당 할 목적으로, 최초 선언된 변수명으로 변수를 재선언하는 것은 불가능합니다.
//*Bad case
let welcomeMSG = "안녕";
let welcomeMSG = "안녕하세요"; // Identifier 'welcomeMSG' has already been declared (ID 'welcomeMSG'는 이미 선언 되었습니다.)이제 본격적으로 변수 선언 후 재할당 여부에 따라 const, let, var 어떤 것을 써야하는지 그리고 왜 차이를 두어야하는지 이유를 알아보겠습니다.
2) 변수 선언 법 - const 를 쓰는 경우
constrant(상수)의 약자이며 절대 변함 없는 일정한 값을 의미합니다.
변수 선언 후 해당 변수가 재할당 될 필요가 없는 경우 사용합니다.
const myBirth = 041225;
console.log(myBirth); // 041225
myBirth = 641225;
console.log(myBirth); // 오류 Assignment to constant variable.위처럼 const로 변수를 선언한 후 다른 값을 재할당할 경우 에러가 뜹니다. (같은 값도 마찬가지, ‘재할당’ 자체가 불가) 따라서 const로 변수를 선언할 경우, 선언한 후 변경되지 않을 값을 대입해야 합니다.
3) 변수 선언 법 - let 을 쓰는 경우
let을 사용해 변수를 선언하는 경우는 이 후 해당 변수가 재할당이 필요하다는 의미입니다.
let myPhoneNum = "010-1234-2345";
console.log(myPhoneNum); // 010-1234-2345
myPhoneNum = "010-2345-6789"; // myPhoneNum 변수 재할당
console.log(myPhoneNum); // 010-2345-6789위처럼 let으로 변수를 선언할 경우 다른 값을 재할당한 후 콘솔에 출력하게 되면 재할당한 값이 기록됩니다.
4) 변수 선언 법 - var 을 쓰는 경우
variable(변수)의 약자이며 var로 변수를 선언한 후에는 변수 재선언, 재할당 모두 가능합니다.
var lang = "자바스크립트";
console.log(lang); // 자바스크립트
var lang = "JavaScript"; // lang 변수 재선언
console.log(lang); // JavaSciprt
lang = "js"; // lang 변수 재할당
console.log(lang); // js제가 앞서 ‘변수 재선언 ≠ 변수 재할당’ 예시를 들었으나 var는 변수 재선언을 허용합니다.
JS 초기버전엔 var는 변수를 선언하는 최초, 그리고 단일 방법 중 하나였습니다. 때문에 변수 재할당 여부와 관계 없이 자유롭게 변수값이 변경될 수 있었는데요.
이러한 var의 특징은 코드가 길어졌을 때 치명적인 단점을 갖고 있습니다.
실수로 이미 선언한 변수 이름을 재선언하고 다른 값을 넣었을 때 브라우저는 해당 내용이 잘못되었다고 인지를 못하기 때문에 작업자는 어디서 부터 잘못이 되었는지 파악하기가 힘듭니다.
이를 보완하고자 const와 let으로 변수를 선언하는 방식이 나왔으며 현재는 var를 사용하는 것은 지양됩니다.
보통 const를 기본으로 변수를 선언하며 필요에따라 let 을 사용하는 방식으로 코드를 작성합니다.
1-2. 변수명 작명법
변수 선언법 을 정했다면, 이제는 변수의 이름을 정해줄 차례입니다.
원활한 협업을 위해 아래와 같이 JavaScript 작성 관례에 맞게 변수명을 작명해 주는 것이 좋습니다.
- CamelCase란 중간의 단어의 중간에 띄어쓰기나 표기 없이 대문자를 사용하는 방법을 의미합니다. 예로는 iPhone, eBay, FedEx 등이 있습니다. 출처 - 네이버 어학사전
- 변수 명에 공백이 있으면 안됩니다.
const userID = "abcdefg"; // user id 정의
const userName = "tstory232"; // user name 정의
const iAmCute = true;변수명은 누구나 변수의 의미를 이해할 수 있도록 구체적으로 작성하는 것이 좋습니다.
1-3. 데이터타입 (변수에 할당할 값의 타입)
데이터 타입이란 말 그대로 데이터의 종류를 이야기합니다.
JS에서 대표적인 데이터 타입으로는 number, string, boolean, null, undefined 이 있습니다.
대표적인 데이터 타입 별 변수 내 값을 할당 하는법을 알아보겠습니다.
1) number
숫자로 이루어진 숫자 데이터를 뜻합니다.
const numData1 = 4;
const numData2 = 2;
console.log (numData1 + numData2); // 6
console.log (numData1 - numData2); // 2
console.log (numData1 * numData2); // 8
console.log (numData1 / numData2); // 2
console.log (numData1 ** numData2); // 16- 우항에 바로 숫자를 입력하면 됩니다.
- 정수(Integer)와 부동 소수점 수를 모두 입력할 수 있습니다.
- 연산기호를 활용해 계산할 수 있습니다.
2) string
텍스트로 이루어진 문자 데이터를 뜻합니다.
const stringData1 = "text";
const stringData2 = '1';
const stringData3 = '2';
console.log (stringData1 + stringData2 + stringData3); // text12- 큰 따옴표 혹은 작은 따옴표 안에 텍스트를 넣어 값을 할당합니다.
- 숫자를 string으로 할당할 경우 텍스트 자체로 인식합니다.
+를 통해 값을 나열할 수 있습니다.
3) boolean
참인지 거짓인지 나타내는 데이터를 뜻합니다.
const catGoesMeow = true;
const catGoesWoof = false;
console.log (catGoesMeow); // true
console.log (catGoesWoof); // false- 해당 변수가 참일 경우
true를, 거짓을 경우false를 씁니다.
4) null
‘아무 값도 들어있지 않다’는 데이터를 뜻합니다.
변수의 값이 null일 경우, ‘변수 안에 null값이 있다.’는 것을 말합니다.
즉, 아무 값도 없다는 것을 직접적으로 확실히 하기 위해 쓰입니다.
let nothingInHere = null;
console.log(nothingInHere); // null- 변수를 선언하고
null을 할당합니다.
5) undefined
변수는 있되, 아직 정의 된 값이 없다는 것을 뜻합니다.
추후 값이 재 할당 될 가능성을 암시하기도 합니다.
let paymentOption;
console.log(paymentOption); // undefined- 변수를 선언하고 아무것도 할당하지 않으면 undefined 가 반환됩니다.
- 재 할당이 불가능한 const 변수로 아무 값도 할당하지 않게 되면 오류 메세지가 뜹니다.```
코드를 입력하세요
