자바스크립트 중급 (1) - TDZ, 생성자 함수, 객체 메소드, 계산된 프로퍼티

이번 포스트도 역시나 코딩앙마님의 강의를 보고 작성했습니다.

[자바스크립트 중급 강좌 : 140분 완성 - YouTube](https://www.youtube.com/watch?v=4_WLS9Lj6n4&t=5204s)

---

1. TDZ

: Temporal Dead Zone

: 스코프의 시작 지점부터 초기화 시작 지점까지의 구간

let age = 30;

function showAge(){
    console.log(age); // TDZ
    let age = 20; // 선언 및 초기화 시작
}; // 블록 스코프 범위


showAge(); // Error

let과 cons`는 hoisting이 되지만, TDZ 구간에 의해 메모리에 할당되지 않아 참조 에러가 발생한다.

 

변수의 생성 과정

1. 선언 단계
2. 초기화 단계 (`undefined` 할당)
3. 할당 단계

• `var` : 선언 + 초기화 -> 할당 / 함수 스코프
• `let` : 선언 -> 초기화 -> 할당 / 블록 스코프
• `const` : 선언 + 초기화 + 할당 / 블록 스코프

---

2. 생성자 함수

생성자 함수를 사용하여 일관성 있게 객체를 생성할 수 있다. ex) 고객 정보

보통 첫 글자는 대문자로 선언한다.

function User(name, age){
    // this = {}
    this.name = name;
    this.age = age;
    // return this;
};


let user1 = new User('Mike', 30);
let user2 = new User('Jane', 14);
let user3 = new User('Tom', 20);

console.log(user1); // User{name : 'Mike', age : 30}
console.log(user2); // User{name : 'Jane', age : 14}
console.log(user3); // User{name : 'Tom', age : 20}

생성자 함수는 new 생성자를 사용해서 호출한다.

new 연산자를 사용하면 User 함수 내부에 매개변수 값을 배열 형식으로 할당하며, 코드 실행 후에 User{name : 'Mike', age : 30} 형식을 반환한다.

new 연산자를 사용하면 따로 코드를 작성하지 않아도 User 함수 내부에서 함수 맨 처음과 맨 마지막에 자동으로 알고리즘을 실행한다.

✔️ new를 사용하지 않으면 User 함수는 return하는 것이 없기 때문에 undefined로 뜬다.

---

3. 객체 method, 계산된 프로퍼티

let a = 'age';
const user = {
    name : 'Mike',
    [a] : 30, // age : 30
}

const hello = {["안녕"+"하세요"] : 'Hello'};
console.log(hello); // {안녕하세요 : 'Hello'};

변수를 [ ]로 묶어주면 변수에 할당된 값이 반환된다. 이를 computed property(계산된 프로퍼티) 라고 한다.

 

Object.keys()

객체의 key로 이루어진 배열 반환

let user = {
    name : 'Mike',
    age : 20,
    gender : 'male'
};

let keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'gender']

 

Object.values()

객체의 value로 이루어진 배열 반환

let user = {
 name : 'Mike',
 age : 20,
 gender : 'male'
};

let vals = Object.values(user);
console.log(vals); // ['Mike', 20, 'male']

 

Object.entries()

객체를 배열로 만들어준다.

객체의 키와 값을 [key, value]의 배열로 반환한다.

let user = {
 name : 'Mike',
 age : 20,
 gender : 'male'
};

let ents = Objct.entries(user);
console.log(ents); // [['name', 'Mike'], ['age', 20], ['gender', 'male']]

 

Object.fromEntries()

2차원으로 구성된 배열의 키 값 쌍 목록을 객체로 바꾼다.

let user = [['name', 'Mike'], ['age', 20], ['gender', 'male']]

let ents = Objct.fromEntries(user);
console.log(ents); // {name : 'Mike', age : 20, gender : 'male'}