[JavaScript] 02. 자바스크립트 변수

자바스크립트에서 변수를 선언하는 방법은 let, const, var 키워드를 사용하여 선언합니다.

💡변수(Variable)

어떤 값을 저장하기 위한 공간을 의미
자바스크립트에서는 let 키워드를 사용하여 변수를 선언
특정 데이터 타입을 지정하지 않아도 사용 가능

let name;
let major = "ComputerScience";
let age = 24;

++ undefined와 null 차이점
undefined와 null 모두 값이 없음을 의미 하는데요! 둘은 전혀 다른 개념이라는 점!
undefined는 정의되지 않은 값을 의미하고, null은 명시적으로 값이 비어있음을 의미합니다.

💡상수(Constant)

변하지 않는 값을 의미
const 키워드를 사용하여 상수를 선언

상수로 선언해서 사용할 때에는 재할당 할 수 없음으로 변경하지 않는 값을 저장할 때 사용해야 해요!

const age = 24;
age = 20; //error!

✓ 상수로 선언된 값을 변경하게 된다면 에러가 발생하니 주의해서 사용해야 합니다.

💡var 키워드

variable의 약자, 변수를 선언하는 오래된 방식

var 키워드를 사용했을 때 나타나는 여러 단점들을 보완하기 위하여 ES6에서 let와 const 키워드가 등장시켰다고 해요!

var name = "송우든";

💡var 키워드 단점

var 키워드의 단점은 아래와 같이 크게 3가지가 존재합니다.

1) 중복된 변수명 사용 문제
2) 변수의 유효 범위 문제
3) 호이스팅(Hoisting) 문제

✓ 호이스팅(Hoisting)이란, 코드 중간에 선언된 변수를 최상단으로 올리는 것을 의미합니다.

var name = "송우든";

console.log(major); // 3) 호이스팅 문제 

if(name === "송우든"){ 
	var result = true; // 1) 중복된 변수명 사용 문제 
}
else { 
   	var result = false;
}

var major = "ComputerScience";

console.log(result); // 2) 변수의 유효범위 문제

💡변수명 규칙

자바스크립트에서 변수명을 정의할 때에는 문자, 숫자와 특수기호 _ 와 $만 사용이 가능합니다.
또한, 변수명의 첫 글자에는 숫자가 올 수 없고, 대소문자를 구분하여 사용합니다.

let 1foo = 5; // (x) → 변수명은 숫자로 시작할 수 없음!
let foo!@; // (x) → 특수기호는 _(언더바)와 $(달러)만 가능!

💡자료형

자바스크립트는 동적 타입 언어로, 변수에 저장되는 값의 타입이 바뀔 수 있습니다.
자바스크립트의 타입은 크게 원시타입과 객체타입으로 분류할 수 있는데요!

원시타입에는 숫자, 문자열, 논리값 등이 포함됩니다.

let name = "송우든"; // 문자열
let age = 24; // 숫자
let isStudent = true; // 논리타입

💡템플릿 리터럴(Template Literal)

템플릿 리터럴은 일부만을 변경하여 반복 또는 재사용할 수 있는 틀을 의미합니다.
또한, 표현식의 값을 문자열에 추가하여 사용할 수 있어요!
이때, `백틱(BackTick)으로 묶어서 사용합니다.

let name = "송우든";
console.log(`나의 이름은${name} 입니다.`); // 출력 : 나의 이름은 송우든 입니다.

💡형변환

형변환에는 문자형으로 형변환, 숫자형으로 형변환, 논리형으로 형변환이 있습니다.

1) 문자형 형변환

String()사용

특히, alert문 사용할 때 전달받은 자료형과 관계없이 문자형으로 형변환이 발생합니다.

let foo = 1000;
console.log(typeof foo); // 출력 : number

foo = String(foo); // 1) 문자형으로 형변환
console.log(typeof foo); // 출력 : string

2) 숫자형 형변환

Number()사용

수학과 관련된 함수 또는 표현식에서 자동으로 형변환이 일어나는데요!
이때, 문자열을 숫자로 변환하게 된다면 NaN(Not a Number)으로 값이 변환됩니다.
(전달받은 값을 undefined로 인식하기 때문에)

또한, null 값을 숫자로 변환시, 0으로 변환됩니다.

let foo = "wooden";
console.log(Number(foo)); // 출력 : NaN

let bar = null;
console.log(Number(bar)); // 출력 : 0

console.log("12" / "2"); // 출력 : 6
console.log("10" - "5"); // 출력 : 5
console.log("6" + "3"); // 연산 불가능!(문자열을 연결해주는 연산자로 인식) 출력 : 63

3) 논리형 형변환

Boolean()사용

console.log(Boolean(1))

참고 자료 및 사이트

JAVASCRIPT.INFO