[코딩앙마] 자바스크립트 중급 강좌 : 140분 완성 1-20

변수 호이스팅 TDZ (Temporal Dead Zone)

변수 let const var

 

1) var

var는 한 번 선언된 변수를 다시 선언할 수 있다

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

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

*같은 상황에서 let은 문제가 발생

 

var는 선언하기 전에 사용할 수 있다

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

왜냐하면 var는

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

로 동작하기 떄문

 

var로 선언한 모든 변수는 코드가 실제로 이동하지는 않지만 최상위로 끌여올려진 것처럼 작동, 이를 호이스팅이라고 함

 

위의 코드에서 undefined가 나온 이유는 선언은 호이스팅되지만, 할당은 호이스팅이 되지 않는다

 

*같은 상황에서 let은 에러가 난다

let은 호이스팅 되지 않는 것일까? ->nope!

 

호이스팅

: 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동

 

그런데 let은 왜 오류가 생길까?

 

그 이유는 TDZ(Temporal Dead Zone)이라고 하는 것 떄문

 

TDZ 영역에 있는 변수들은 사용이 불가. let과 const는 TDZ의 영향을 받는다.

할당을 하기 전에는 사용할 수 없다(->코드를 예측가능하게 하고, 에러 발생을 줄여줌)

 

let age=30;

function showAge() {
    console.log(age);
    let age=20;
}
showAge();

이 코드는 문제가 발생

호이스팅은 스코프 단위로 발생하기 때문에 저 함수 내에서 let age=20;이 호이스팅을 일으킴

 

변수의 생성 과정

1. 선언 단계

2. 초기화 단계 (*초기화 : undefined를 할당 해주는 단계)

3. 할당 단계

 

var

1. 선언 및 초기화 단계

2. 할당 단계

 

let

1. 선언 단계

2. 초기화 단계

3. 할당 단계

 

const

1. 선언 +초기화+할당

 

 

[스코프]

var

: 함수 스코프(function-scoped)

ex)

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

 

 

let, const

: 블록 스코프(block-scoped)

   함수, if문, for문,, while문, try/catch문 등

 

 

 

 

---

 

 

 

 

생성자 함수

 

객체 리터럴

let user = {
    name : 'Mike',
    age : 30,
}

 

 

개발을 하다보면, 비슷한 객체를 여러 개 만들어야 되는 상황이 생김

ex) 회원, 상품

 

생성자 함수

function User(name, age) {
    this.name=name;
    this.age=age;
}
let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

생성자 함수는 첫 글자를 대문자로 하는 것이 관례(ex User)

 

function User(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function() {
        console.log(this.name);
    }
}

let user5 = new User('Han', 40);
user5.sayName();

 

 

 

 

---

 

 

 

Intermediate Class

 

Object - methods / Computedd property

 

[Computed property] - 계산된 프로퍼티

let a = 'age';

const user = {
    name : 'Mike',
    age : 30
}

이것과

let a = 'age';

const user = {
    name : 'Mike',
    [a] : 30
}

이떄 [a]를 computed property 즉, 계산된 프로퍼티라고 한다.

 

 

const user = {
    [1 + 4] : 5,
    ["안녕"+"하세요"] : "Hello"
}

이렇게 사용도 가능

 

 

 

 

---

 

 

 

객체에서 사용할 수 있는 메서드

 

Object.assign()

Object.keys()

Object.values()

Object.entries()

Object.fromEntries()

 

1. Object.assign() : 객체 복제

const user = {
    name : 'Mike',
    age : 30
}

const newUser = Object.assign({}, user);

이때 빈 객체는 초깃값임({}). 두 번째부터 들어온 매개변수들이 매개변수에 혼합됨(user)

 

 

Object.assign({gender:'male'}, user);

이렇게 될 경우 결괏값은

gender : 'male',
name : 'Mike',
age : 30,

만약 병합을 하는데, key의 값이 같다면 -> 덮어쓰게 됨

 

두 개 이상의 객체도 합칠 수 있음

const user = {
    name : 'Mike'
}
const info1 = {
    age : 30,
}
const info2 = {
    gender : 'male',
}

Object.assign(user, info1, info2)

 

 

 

2. Object.keys() : 키 배열 반환

const user = {
    name : 'Mike',
    age : 30,
    gender : 'male',
}

Object.keys(user);

key들이 배열로 만들어 반환됨

=> ["name", "age", "gender"]

 

 

3. Object.values() : 값 배열 반환

 

반대로 값들만 얻고 싶다면 Object.values()를 사용하면 됨

const user = {
    name : 'Mike',
    age : 30,values(user);
    gender : 'male',
}
Object.values(user);

결과값 : ["Mike", 30, "male"]

 

 

 

4. Object.entries() : 키/값 배열 반환

const user = {
    name : 'Mike',
    age : 30,
    gender : 'male',
}
Object.entries(user);

이것을 이용하면 키와 값을 쌍으로 묶어서 준다

결과값

[
    ["name", "Mike"],
    ["age", 30],
    ["gender", "male"]
]

 

 

 

5. Object.fromEntries() : 키/값 배열을 객체로

const arr = 
[
    ["name", "Mike"],
    ["age", ],
    ["gender", "male"]
};
Object.fromEntries(arr);

결과값

{
    name : 'Mike',
    age : 30,
    gender : 'male',
}

 

 

실습

let n = "name";
let a = "age";

const user = {
    [n] : "Mike",
    [a] : 30,
    [1 + 4] : 5,
};

console.log(user);

function makeObj(key, val) {
    return {
        [key] : val,
    };
}

const obj = makeObj('나이', 33);

console.log(obj);