JavaScript - 자바스크립트 변수

NodeJS LTS 버전 다운로드 및 설치
- 설치 확인 : cmd에서 node -v
- 패키지 매니저 버전 확인 : cmd에서 npm -v
- 실행 : node 파일명 (.js는 생략 가능)

 

* 자바스크립트 변수

- 타입 선언 없이 이름만으로 선언이 가능함..
- 변수의 타입은 가리키는 값에 대한 타입을 나타낸다.

소스

name = "홍길동";
age = 30;
console.log(name, age);

결과

홍길동 30

* 자바스크립트 변수

- 타입을 선언한다면 var 키워드를 사용한다.
- es(ecma script)6 부터 var 이외의 키워드가 지원된다. - ecma6 버전의 특징

소스

var id = "hong";
console.log(id);

결과

hong

* 자바스크립트 변수

- use strict : ES6부터 변수를 사용하기 전에 선언하도록 강요.. var를 필수로 사용하게끔
- 명령어의 첫줄에 사용한다.

소스

"use strict"; // // 사용할경우 변수에 타입 및 var를 붙여 선언해야 함
name = "홍길동";
//"use strict" - 소용없음
age = 30;
console.log(name, age);

결과

변수 선언시 var를 사용하지 않아 오류 발생

 

* 자바스크립트 변수

- 변수의 중복 선언이 가능함
- 이전에 선언한 변수를 덮어쓴다.

소스

"use strict";
var id = "hong";
console.log(id);
var id = "kim";
console.log(id);

결과

hong
kim

 

* 자바스크립트 변수

- undefined : 변수에 아무 값도 없어서 타입을 알 수 없는 경우

소스

var name;
console.log(name);

결과

undefined

 

* 자바스크립트 변수

변수의 호이스팅
- 자바스크립트 엔진이 스크립트를 해석하는 단계
- 컴파일과 실행

소스

"use strict";
var id = "hong";
console.log(id);

var id = "kim";
console.log(id);

var name;
console.log(name);

 

호이스팅 순서

    컴파일 단계 - 변수들을 위로 끌어올려 먼저 선언
    var id; - 동일한 변수명이 있는 경우 기존거를 덮어 씀
    var name;

    실행 단계
    id = "hong";
    consol.log(id);
    id = "kim";
    console.log(id);
    console.log(name);

결과

hong
kim
undefined

 

* 자바스크립트 변수

변수와 데이터 타입

정적타입(static type), 엄격타입
- 변수의 선언시 용도를 고정한다.
- 변수를 만들 때 선언한 용도대로만 사용해야 한다.
- Java, C, C++, C#, ...

동적타입(dynamic type)
- 대입되는 값에 따라서 용도가 변경되는 방식
- Java Script, 스크립트 언어들, ...

6개의 데이터 타입
-------------------
기본 데이터 타입    
-------------------
number
string
boolean
null
undefined
-------------------
객체 데이터 타입
-------------------
object
-------------------

소스

"use strict";
var num1 = 10;
console.log("num1", num1);

var num2 = 10.3;
console.log("num2", num2);

var msg = "hi";
console.log("msg", msg);

var bool = true;
console.log("bool", bool);

var nullVal = null;
console.log("nullVal", nullVal);

var unVal;
console.log("unVal", unVal);

var obj1 = {};
console.log("obj1", obj1);

var obj2 = new Object();
console.log("obj2", obj2);

결과

num1 10
num2 10.3
msg hi
bool true
nullVal null
unVal undefined
obj1 {}
obj2 {}

 

* 자바스크립트 변수

변수의 자료형
- typeof 데이터     : 데이터 타입을 문자열로 반환
- typeof (데이터)   : 
- null 데이터 타입은 반환하는 값이 "null"이 아니라 "object"를 반환(자바스크립트의 오래된 버그..)

소스

"use strict";
console.log(typeof "test"); // string 반환
console.log(typeof 10); // number
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof a); // undefined
console.log(typeof {}); // object
// function(함수) : 특별한 기능을 가지고 있는 객체 (일급 객체)
console.log(typeof function() {}); // function (object임에도 function이 출력)
console.log(typeof typeof 10); // string

결과

string
number
boolean
object
undefined
object
function
string

 

* 자바스크립트 변수

- 동적타입의 변수이기 때문에 하나의 변수에 다양한 타입의 값들이 대입 될 수 있다.

소스

"use strict"; // 사용은 권장사항
var val = 10;
console.log(val, typeof val);

val = 10.3;
console.log(val, typeof val);

val = "hello";
console.log(val, typeof val);

val = true;
console.log(val, typeof val);

val = {};
console.log(val, typeof val);

val = null;
console.log(val, typeof val);

val = undefined; // undefined는 값을 직접 대입 할 수 있다.
console.log(val, typeof val);

결과

10 'number'
10.3 'number'
hello string
true 'boolean'
{} 'object'
null 'object'
undefined 'undefined'

 

* 자바스크립트 변수

변수의 범위
- var로 선언된 변수는 선언된 블록에 제한 받지 않는다

closer - 블럭내에서만 사용되는 변수..(어렵다)(let 사용)

소스

"use strict";
var msg = 1;
if (msg == 1) {
  var msg = 2;
  console.log(msg);
}
console.log(msg);
{
  var msg2 = 3;
}
console.log(msg2);

결과

2
2
3

 

* 자바스크립트 변수

let
- ES6 부터 선언된 블럭에서만 사용할 수 있는 블럭변수(let)가 제공된다.
    : if, for문 내에서 선언된 변수의 사용 범위 (블럭단위)
- 호이스팅 대상에서 제외
    (자바스크립트는 컴파일시 선언된 변수들을 블럭의 위쪽으로 끌어올리는 기능(호이스팅 과정)이 있는데,
    let 변수는 호이스팅 과정에서 빠지게 됨)

- for문 내에서 사용하는 변수는 가급적 let으로 사용해야 오류를 방지할 수 있음

소스

"use strict";
var msg = 1;
if (msg == 1) {
  let msg = 2;
  console.log(msg); // let 변수값
}
console.log(msg); // var 변수 값
{
  let msg2 = 3;
}
console.log(msg2); // 선언되어있지 않아오류 발생

결과

msg2 변수가 선언되어 있지 않아 오류 발생

 

* 자바스크립트 변수

const
- 상수로 사용(값을 할당하면 값을 변경할 수 없다) (final...)
- 선언시에 값을 할당해야 한다
- {}이 스코프로 처리됨
- 호이스팅에서 제외됨

- let과 비슷하지만 값을 변경할 수 없다

소스

"use strict"
var msg = 1;
var msg = 2;

console.log(msg);

let msg2 = 3;
// Identifier 'msg2' has already been declared 
// 호이스팅되지않아 중복선언이 되기 때문에 오류 발생, 중복선언 불가
//let msg2 = 4; 
console.log(msg2);

const msg3 = "상수";
//msg3 = "변경"; // TypeError: Assignment to constant variable.
console.log(msg3);

// 상수는 선언시 값을 할당해야 한다
const msg4; // Missing initializer in const declaration
msg4 = "할당";
console.log(msg4);

결과

msg4 변수에 값을 할당하지 않아 오류 발생