[Javascript] 변수( let, const, var ), 생성자, object, Symbol

참고강의

변수

let (ES6~) : 재할당 가능, 재선언 불가, 블록 스코프

let은 선언 단계와 초기화 단계가 분리되어 진행한다. 따라서 선언은 했지만 초기화가 되지 않았기에 conosole.log로 출력하려고 하면 참조 에러(ReferenceError)가 발생한다.
선언 단계 ~ 초기화 단계 구간을 TDZ(temporal Dead Zone)라고 부른다.

console.log(name) // ❌
// TDZ(temporal Dead Zone) 때문에 변수에 값을 할당하기 이전에는 사용할 수 없다. -> 코드의 예측 가능성을 높이고 버그 줄임
let name = 'Kim';
console.log(name) // Kim
name = 'Park' 
// let name = 'Park' // ❌
console.log(name) // Park

var : 재할당 가능, 재선언 가능, 값 할당 전에 출력가능, 함수 스코프

var는 선언 단계와 초기화 단계가 동시에 진행된다.

console.log(age) // ⭕ undefined 
// age가 undefined이 출력되는 이유는 var는 선언하자마자 호이스팅이 되어 변수 선언이 코드의 최상단에 올라가게 된다. 

var age = 20;
console.log(age) // 20
var age = 30; // ⭕
console.log(age) // 30

// 따라서 실제로 var의 작동방식은 아래와 같다.
var age;
console.log(age); // undefined
age = 20;
// var는 선언은 호이스팅되지만 값이 할당되는 것은 호이스팅이 되지 않는다.

const (ES6~) : 재할당 불가능, 재선언 불가능, 블록 스코프

const는 선언 단계, 초기화 단계, 할당 단계가 동시에 진행된다.

const height = 180;
console.log(height); // 180
height = 185; // ❌

생성자 함수

let user = {
	name : 'Kim",
	age : 30,
}

// user를 재사용 하고 싶을때
function User(name, age){
  	// this = {}
	this.name = name;
 	this.age = age;
  	this.sayName = function(){
    	console.log(`제 이름은 ${this.name} 입니다. `)
    }
  	// return this
}

let user1 = new User('Kim', 20);
let user2 = new User('Park', 30);
console.log(usre1); // { name : 'Kim", age : 30, sayName : f }
user2.sayName(); // 제 이름은 Park 입니다.

computed property

let a = 'age';

const user = {
	name : 'Kim",
	[a] : 30, // age :30
  	["환영"+"합니다"] : "welcome!" // 환영합니다: "welcome!"
}

object methods

object.assign(초기값, 객체) : 객체 복제

const user = {
	name : 'Kim",
	age : 30, // age :30
}

const cloneUser = user; //❌ 객체의 참조값이 복사됨
const cloneUser = object.assign({}, user); //⭕
// {} +  { name : 'Kim", age : 30 }

cloneUser.name = 'Park';
console.log(user.name); // 'Kim'
console.log(cloneUser.name) // 'Park;

const cloneUser2 = object.assign({gender:'male'}, user);
console.log(cloneUser2) = { gender:'male', name : 'Kim", age : 30 }

object.keys() : key 배열 반환

object.values() : value 배열 반환

object.entries() : key/value 배열 반환

object.fromEntries() : key/value 배열을 객체로( object.entries()의 반대)

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

object.keys(user) // ["name", "age", "gender"]
object.values(user) // ["Kim", 30, "male"]
object.entries(user) // [["name", "Kim"], ["age", 30], ["gender", "male"]]

Symbol

유일한 식별자를 만들때 사용한다.

const a = Symbol();
const b = Symbol();

console.log(a); //Symbol()
console.log(b); //Symbol()

console.log(a == b); // false
console.log(a === b); // false

const id = Symbol('id');
const user = {
	name : 'kim',
  	age : 30,
  	[id] : 'kim id'
};

console.log(user); // { name : 'Kim", age : 30, Symbol(id) : 'kim id' }

object.keys(user); // ["name","age"], Symbol은 접근 불가
Reflect.ownKeys(user); // ["name","age", Symbol(id)]
id.description; // "id"

Symbol.for() : 전역 심볼

하나의 심볼만 보장함

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

console.log(id1 === id2) // true
Symbol.keyFor(id1) // "id"