[JavaScript] 변수, 스코프, 생성자 함수

변수

 var : 한번 선언된 변수를 다시 선언 가능

var name = 'Mike';
console.log(name); // Mike

var name = 'Jane';
console.log(name); // Jane

 

let은 불가능

let name = 'Mike';
console.log(name); // Mike

let name = 'Jane';
console.log(name); // ( error 발생 )

 

var는 선언하기 전에 사용 가능

var name;
console.log(name); // undefined
name = 'Mike';
console.log(name); // Mike

 

상수

const는 리터럴 표기법으로만 가능

// 가능
let name; // let은 선언만 해도 가능
name = 'Mike';

// 가능
var age;
age = 30;

// 불가능 !
const gender;
gender = 'male';


// 불가능 !
const a = 'hi';
a = 'hello';// 상수에는 값을 또 할당할 수 없다는 에러 발생


// 불가능 !
const a; // 선언만 할 경우 초기화해주어야 한다는 에러 발생

 

상수에 할당한 값이 객체 타입일 경우

const a = {
    x: 1,
    y: 2,
};

a = { a: 3 }; // 불가능
// TypeError: Assignment to constant variable.

 

하지만, 객체의 속성을 변경하는 것은 가능

= 새로운 객체를 할당하는 것이 아니라 이미 갖고 있는 객체를 유지하면서 내부적인 속성을 변경하는 것이므로 가능한 것

const a = {
    x: 1,
    y: 2,
};

a.x = 3;

console.log(a); // { x: 3, y: 2 }

 

그런데, 객체의 불변성을 유지하고 싶다면 Object.freeze 사용

const a = Object.freeze({
    x: 1,
    y: 2,
});

a.x = 3;

console.log(a); // { x: 1, y: 2 }

---

스코프

var : 함수 스코프

let, const : 블록 스코프 (함수, if 문, for 문, while 문, try / catch 문 등)

 

함수 스코프: 새로운 함수가 생성될 때마다 새로운 스코프가 발생.
(함수 안에서 선언한 변수는 해당 함수 안에서만 접근할 수 있다.)

 

블록 스코프: 블록( {} )이 생성될 때마다 새로운 스코프가 발생.

 

const age = 30;
if (age > 19) {
    var text = '성인';
}
console.log(text); // 성인

 

// error 발생 코드
function add(num1, num2) {
    var result = num1 + num2;
}

add(2, 3);
console.log(result); // Uncaught ReferenceError : result is not defined

 

function hello(){
    var localVar = "wow",
    number = -1;

    if (number > 0){
        var moreLocalVar = "king";
    }

    // number 조건이 참이면 print "king", 거짓이면 undefined
    console.log(moreLocalVar); 
}

hello();

 

 

 

var

var 키워드를 사용해서 변수를 선언하면 변수는 자동적으로 함수 스코프를 갖게 된다.

함수 스코프 : 변수가 선언된 함수 내부에서만 변수에 접근이 가능하다.

function main() {
    var x = 'hi';
}

console.log(x); // ReferenceError: x is not defined

 

ReferenceError : 참조 오류 - x라는 변수에 접근할 수 없다는 의미

function main() {
    var x = 'hi';
    console.log(x);
}

main(); // hi

function main() {
    if (true) {
        var x = 'hi';
        console.log(x);
    }
}

main(); // hi

 

 

var 키워드를 사용해서 선언된 변수는 자동으로 함수 스코프를 가지고 있기 때문에

변수가 선언된 함수 내부라면 어디서든지 그 변수에 접근할 수 있다. (블록 바깥이라 할지라도)

function main() {
    if (true) {
        var x = 'hi';
    }
    console.log(x);
}

main(); // hi

 

이제, var 키워드를 let으로 변경해서 코드를 실행하면 참조 에러가 발생한다. (x 변수에 접근할 수 없음)

function main() {
    if (true) {
        let x = 'hi';
    }
    console.log(x);
}

main(); // ReferenceError: x is not defined

 

x를 if 블록 안에서 접근하면 잘 출력된다. 
(블록은 if뿐만 아니라 while, for, switch도 적용됨)

let 키워드를 사용해서 선언된 변수는 블록 스코프를 갖게 된다.

변수가 선언된 블록 내부에서만 변수에 접근이 가능함.

function main() {
    if (true) {
        let x = 'hi';
        console.log(x);
    }
}

main(); // hi

 

 

"hi"라고 들어있는 변수는 블록 내부에서만 유효하기 때문에 아래와 같은 결과가 나온다.

function main() {
   let x = "hello";
   if (true) {
    let x = "hi";
   }
   console.log(x); // hello
}

main();

function main() {
   let x = "hello";
   if (true) {
    let x = "hi";
    console.log(x); // hi
   }
   console.log(x); // hello
}

main();

 

var로 선언된 변수는 블록이 아니라 함수 스코프를 갖고 있기 때문에 아래와 같은 결과가 나온다.

var는 같은 스코프 안에서 변수의 중복 선언을 허용하기 때문에 위에서 선언된 변수를 아래에서 선언된 변수가 덮어씌운다.

function main() {
   var x = "hello";
   if (true) {
    var x = "hi";
   }
   console.log(x); // hi
}

main();

 

 

입력

function main() {
    for(let i=0; i<2; i++) {
        console.log(i);
    }
}

main();

 

출력

0
1

 

 

입력

function main() {
    for (let i=0; i<2; i++) {
        console.log(i);
    }
    console.log(i);
}

main();

 

출력

let으로 선언된 i는 블록 스코프이므로 참조 에러 발생

ReferenceError: i is not defined

 

 

*** var 사용

입력

function main() {
    for (var i=0; i<2; i++) {
        console.log(i);
    }
    console.log(i);
}

main();

 

출력

2까지 출력됨.  i라는 변수는 var로 선언되어 함수 스코프를 가지고 있음. 

for문 바깥에서도 접근 가능

0
1
2

 

---

중복 선언

var

var x = "안녕하세요";

console.log(x); // 안녕하세요

 

var 키워드를 사용하면 같은 이름의 변수를 중복해서 선언할 수 있다. 

밑에서 선언한 것이 위에서 선언한 것을 덮어씌워버린다.

var 는 웬만하면 쓰지 않는 것이 좋다.

var x = "안녕하세요";

var x = "hi";

console.log(x); // hi

 

 

let 은 중복 선언 불가능

 

 

 

---

생성자 함수

 

입력

// 생성자 함수 : 상품 객체 생성하기

function Item(title, price) {
    this.title = title;
    this.price = price;
    this.showPrice = function() {
        console.log(`가격은 ${price}원 입니다.`);
    }
}

const item1 = new Item("인형", 3000);
const item2 = new Item("가방", 4000);
const item3 = new Item("지갑", 9000);

console.log(item1, item2, item3);
item3.showPrice();

 

출력

Item { title: '인형', price: 3000, showPrice: [Function (anonymous)] } 
Item { title: '가방', price: 4000, showPrice: [Function (anonymous)] } 
Item { title: '지갑', price: 9000, showPrice: [Function (anonymous)] }
가격은 9000원 입니다.