사이트로(SITERO)

변수

변수란?

변하는 데이터(값)을 저장할 수 있는 메모리공간.
저장할 수 있는 데이터의 종류로는 문자형(string), 숫자형(number), 논리형(boolean), 비워진(null)데이터가 있다.

변수 선언

ES6 이전

var 키워드를 변수명 앞에 붙여 선언한다.
중복선언 : 중복으로 선언해도 에러가 나지 않는다. (단점)
스코프 : 함수 수준의 범위(function scope)를 가지고 있어 외부에서 선언한 변수는 모두 전역변수로 사용가능 하다 (단점)
호이스팅 : 변수 선언을 순서 상관없이 해도 에러가 나지 않는다. (단점)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//순서 상관없이 해도 undefined가 뜰 뿐, 오류가 나지 않는다.
console.log(a); //출력결과 : undefined
var a = 0;
 
//중복 선언해도 오류가 나지 않는다.
var b = 1;
console.log(b); //출력결과 : 1
var b = 5;
console.log(b); //출력결과 : 5
 
//함수 범위의 스코프를 가진다.
var c = 1;
if (true){
    var c = 5;
}
 
console.log(c); //출력결과 : 5

ES6 이후 (단점보완)

값이 재할당 되지 않는 값(상수)은 const를 이용하여 선언하고, 추후 값을 재할당 해야할 수도 있다면(변수) let을 사용하여 선언한다.
중복선언 : var의 단점을 보완하여 나온 키워드이므로 중복선언 할 경우 콘솔오류가 뜬다. 값 재할당은 가능하나, 재선언은 불가하다. const는 재할당도 불가!
스코프 : 블록 범위(block scope)를 가지고 있어 {} 내에서 재선언할 경우 새로운 변수로 인식한다. {블록} 내에서만 유효하다.
호이스팅 : 변수 선언하기 전 해당 변수 값을 사용하려 할 경우 에러가 뜬다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//변수 선언 전 출력할 경우 오류가 난다.
console.log(a); //출력결과 : Uncaught ReferenceError : Cannot access 'a' before initialization
let a = 0;
 
 
//중복 선언하면 오류가 난다. (let의 경우 재할당은 가능하다)
let b = 1;
console.log(b); //출력결과 : 1
 
b = 5;
console.log(b); //출력결과 : 5
 
let b = 7;
console.log(b); //출력결과 : Uncaught SyntaxError : Identifier 'b' has already been declared
 
 
//const의 경우 값의 재할당도 불가하다.
const c = 1;
console.log(c); //출력결과 : 1
 
c = 1;
console.log(c); //출력결과 : Uncaught TypeError : Assignment to constant variable.
 
const c = 5;
console.log(c); //출력결과 : Uncaught SyntaxError : Identifier 'c' has already been declared.
 
 
//블록 범위의 스코프 (함수 안에서 선언한 변수는 외부에 영향을 끼치지 않음)
let abc = 1;
 
if (true){
    let abc = 5;
    console.log(abc); //출력결과 : 5
}
 
console.log(abc) //출력결과 : 1

변수에 저장할 수 있는 데이터형

문자형 데이터(String)

문자나 숫자를 큰 따옴표("")또는 작은따옴표('')로 감싸고 있다.
태그를 포함하여 작성해도 출력문을 적용하면 태그로 인식하여 적용된다.

1
2
3
4
5
6
7
let 변수명 = "사용할 문자나 숫자"; //기본형태
let s = "javascript"; //s라는 변수의 값은 javascript 라는 문자로 출력된다.
let num = "100"; //num이라는 변수에 숫자 100을 기입했지만 따옴표로 감쌌으므로 100이라는 글자(문자)로 담긴다.
let tag = "<h1>hello</h1"; //<h1></h1>이라는 태그를 따옴표로 감쌌지만 출력하면 h1은 태그로 인식된다.
 
//예시
console.log(num + num) //출력결과 : 200이 아니라 100100이라는 글자가 출력된다.

숫자형 데이터(Number)

변수에 숫자만 들어가는 데이터.
""가 붙으면 문자형데이터가 된다. Number("숫자");을 이용하면 ""붙은 문자형데이터를 숫자형 데이터로 바꿀 수 있다.

1
2
3
4
5
6
7
8
9
let 변수명 = 숫자;
let 변수명 = Number("숫자");
let s = 100;
let t = Number("100");
 
console.log(s + t) //출력결과 : 200
console.log(s + "만원") //출력결과 : 100만원
console.log(s + t + "만원") //출력결과 : 200만원
console.log(s + "100" + "만원") //출력결과 : 100100만원

논리형 데이터(Boolean)

논리형데이터에는 true(참)또는 false(거짓)이 있다.
2개의 데이터를 비교할 때 또는 어떠한 함수를 실행시킬 때 사용한다.
0, null, undefined는 false로 반환되며, 나머지는 true로 인식한다.

1
2
3
4
5
6
7
let 변수명 = true 혹은 false;
let 변수명 = Boolean(데이터);
 
let s = true;
let t = 10 > 100; //10은 100보다 크다는 명제가 틀렸으므로 false 라는 값이 저장된다.
let k = Boolean("hello"); //데이터 값에 0, null, undefined를 제외한 모든 데이터는 true로 반환하여 저장된다.
let a = Boolean(0); //a에 false 값을 반환하여 저장한다.

Null 데이터

Null은 변수에 데이터값이 null로 저장되어있는 경우를 가리킨다.
변수에 저장된 데이터를 지우고 싶을때 사용한다.

1
let a = null;

Undefined 데이터

변수에 아무 값도 등록되어있지 않은 경우 or 따로 선언하지 않았던 변수
추후 어떤 함수를 실행시켜 값을 재할당 하기 위한 용도로 자주 사용한다.

1
let a;

type of

type of는 지정한 데이터 또는 변수에 저장된 데이터 유형을 알고싶을때 사용한다.
'해당 변수 or 데이터가 숫자면~ ㅇㅇ를 실행해라' 와 같이 활용할 수 있다.
배열인지 여부는 확인할 수 없다.

1
2
3
4
5
typeof 변수 또는 데이터;
 
console.log(typeof "100"); //출력결과 : String
console.log(typeof 100); //출력결과 : number
console.log(typeof true); //출력결과 : boolean