[기본 문법] JavaScript 변수 (Scope/variable)

JavaScript를 이제 막 시작한 자바린이로써, 나중에 다시 찾아볼 수 있도록 정리한 포스팅입니다. 😂

---

1. 변수 선언 방법

변수 선언문	재선언	재할당	특징
let	불가	가능	- 블록 레벨 스코프 - ECMA2015 버전부터 사용 가능
const (constant(상수))	불가	불가	- 변수 선언시 값을 반드시 같이 넣어줘야 함  - 블록 레벨 스코프 - ECMA2015 버전부터 사용 가능
var (variables(변수))	가능	가능	- 전부 가능 (자유도 높음)

  1) let

변수를 선언하고 값을 바꿔봅니다.

let tomato

tomato = "맛있어";
console.log(tomato);

tomato = "빨간색";
console.log(tomato);

/*
실행 결과
-----------------------------------
맛있어
빨간색
-----------------------------------
*/

변수를 재 선언 해봅니다.
이미 선언되었다는 오류가 나오네요. let은 값은 재할당이 가능하지만 재선언은 불가능합니다.

let tomato

tomato = "맛있어";
console.log(tomato);

let tomato = "꿀맛"

/*
실행 결과
-----------------------------------
let tomato = "꿀맛"
    ^

SyntaxError: Identifier 'tomato' has already been declared
-----------------------------------
*/

  2) const

변수를 선언해봅니다. const는 변수 선언시 반드시 값을 넣어줘야합니다. 
아래 코드에서는 변수만 선언했기때문에 오류가나오네요.

const banana

banana = "노랑";
console.log(banana);

/*
실행 결과
-----------------------------------
const banana
      ^^^^^^

SyntaxError: Missing initializer in const declaration
-----------------------------------
*/

   이번에는 값을 넣고 선언해봅니다. 선언이 잘 되었네요.

const banana = "노랑";
console.log(banana);

/*
실행 결과
-----------------------------------
노랑
-----------------------------------
*/

이제, 재 할당을 해봅니다. 바나나는 맛있어를 넣어보겠습니다.
역시 오류가 나네요. const는 값을 재할당할 수 없습니다. 

const banana = "노랑";
console.log(banana);

banana = "맛있어";
console.log(banana);



/*
실행 결과
-----------------------------------
banana = "맛있어";
       ^

TypeError: Assignment to constant variable.
-----------------------------------
*/

변수를 재선언 해봅니다. 바로 오류가 나오네요.
const는 변수를 재선언할수도 없습니다. (지역변수에서는..가능)

const banana = "노랑";
console.log(banana);

var banana = "맛있어";



/*
실행 결과
-----------------------------------
var banana = "맛있어";
    ^

SyntaxError: Identifier 'banana' has already been declared
-----------------------------------
*/

 

  3) var

var 는 위에서 말했던 재선언, 재할당 모두 가능합니다. 심지어 선언되기 전에도 사용 가능합니다.
먼저, 재선언, 재할당 해보겠습니다.

// 변수 선언
var apple;

apple = "맛있어";
console.log(apple);

// 변수 재 선언
var apple = "사각사각";
console.log(apple);

// 변수 재 할당
apple = "아오리사과";
console.log(apple);

/*
실행 결과
-----------------------------------
맛있어
사각사각
아오리사과
-----------------------------------
*/

선언 전에 사용도 가능합니다.
위의 let, const, var 같이 확인해봅니다.

// let 선언전 사용
console.log(test_let);
let test_let = "B";

/*
실행 결과
-----------------------------------
console.log(test_let);
            ^

ReferenceError: Cannot access 'test_let' before initialization
-----------------------------------
*/


// const 선언전 사용 
console.log(test_const);
const test_const = "A";


/*
실행 결과
-----------------------------------
console.log(test_const);
            ^

ReferenceError: Cannot access 'test_const' before initialization
-----------------------------------
*/

// var 선언전 사용

console.log(test_var);
var test_var = "C";
/*
실행 결과
-----------------------------------
undefined
-----------------------------------
*/

 

2. Scpoe(유효범위)

왜 변수를 선언해야할까? 라는 의문이 들었습니다. 왜냐하면 단순히 보면 변수선언 없이도 사용 가능하기때문입니다.

a="a"
var b="b"

console.log(a, b);

/*
실행 결과
-----------------------------------
a b
-----------------------------------
*/

스코프란, 변수가 활동할 수 있는 범위를 말합니다. 
변수의 범위를 확인 하기 위해 아래의 코드를 사용합니다.

const area1 = "A";
let area2 = "B";
var area3 = "C";

function func() {
    const area4 = "D";
    let area5 = "E";
    var area6 = "F";
    const area1 = "a";  // area1 변수 재 할당
    area7 = "G";
    console.log("함수내부에서 실행:",area1,area2,area3,area4,area5,area6,area7)
}

console.log("함수외부에서 실행:",area1,area2,area3)
func();

/*
실행 결과
-----------------------------------
함수외부에서 실행: A B C
함수내부에서 실행: a B C D E F G
-----------------------------------
*/

- 전역변수(Global) : 코드 내 어디서나 사용 가능
전역변수는 위 변수 중 area1, area2, area3에 해당합니다.
전역변수는 함수 밖에 선언된 변수입니다.

- 지역변수(local) : 함수 안에서만 사용 가능
지역변수는 위 변수중 area4, area5, area6, area7에 해당합니다.
area1 변수는 전역변수에서 이미 선언했으나, 지역변수에서 한번 더 선언합니다.
그 결과 함수 안에서 실행될때 지역변수가 우선합니다.
지역변수에서 선언한 함수는, 함수 외부에서 사용할 수 없습니다 (not defined error)

- 정리
1) 변수는 유효범위(Scope)를 가집니다.
2) 크게 전역변수(Global variable), 지역변수(Local variable)로 나뉩니다.
3) 나누는 기준은 함수범위, 함수 내부에서 선언된 변수를 지역변수라고 합니다.
4) 함수 내부, 혹은 블록문(if 등)에서 변수를 사용할때, 함수 내부 혹은 블록문 내부에서 변수를 찾고, 내부에 없다면 글로벌 변수를 찾고, 글로벌 변수가 없는 경우 동적으로 할당하여 사용합니다. (area7 확인)
5) 지역변수는 함수 내에서 전역변수보다 더 높은 우선순위를 가집니다.

 

---

정말 알기 쉽게 설명해주는 유튭자료가 있어요~ 이해 안갈때는 복습하기~~!

www.youtube.com/watch?v=HsJ4oy_jBx0