📕 JavaScript 기초 3

 

변수

- es6 이후에 생긴건 let과 const, 그 전에 사용한 것이 var

- var는 한 번 선언된 변수를 다시 선언할 수 있다 let은 에러가 난다

- var는 선언하기 전에 사용할 수 있다. (호이스팅 : 어디서든 변수 선언은 최상위에 선언된 것처럼 행동)

- 하지만 선언은 호이스팅 되지만 할당은 되지 않는다

- 같은 상황에서 let은 에러가 난다. let과 const는 호이스팅이 가능하지만 에러나는 이유?? Temporal Dead Zone 때문

 

- TDZ 영역에 있는 변수는 사용이 불가, let과 const는 TDZ의 영향을 받으므로 할당 전에는 사용 불가

- 이는 코드를 예측 가능하게 하고 잠재적 버그를 줄일 수 있다

 

- var의 생성과정 1. 선언 및 초기화 단계 2. 할당 단계

- let의 생성과정 1. 선언 단계 2. 초기화 단계 3. 할당 단계

- const의 생성과정 1. 선언 및 초기화 및 할당 단계

 

- var는 함수 스코프 : 함수 내에서 선언된 변수만는 외부에서 접근 불가 (유일하게 벗어날 수 없는 스코프는 함수)

- let, const는 블록 스코프 : 모든 코드 블록 내에서 선언된 변수는 그 코드 내에서만 유효, 외부에서 접근 불가 (코드 내 변수는 지역변수)

 

 

 

생성자 함수

- 초급에서 배웠던 객체 생성법 = 객체 리터럴

- 비슷한 객체를 여러 개 만들어야 하는 상황이 올 때 사용하는 것이 생성자 함수

- 보통 첫글자를 대문자로, 생성자 함수는 붕어빵 틀과 같음 

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

const item1 = new Item('인형', 2000);
item1.showprice(); //"가격은 2000원 입니다"

 

 

객체 메소드 (Object methods)

- 'age' 대신 [a]를 사용할 수 있으며 이를 computed property라고 부른다

 

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

const obj = makeobj("나이", 23);
console.log(obj) //{"나이":23}

 

- 식 자체를 넣는 것도 가능

 

 

Object.assign() : 객체 복제

- 초기값 빈 객체 {}에 두번째 매개변수 user에서 들어온 개체가 병합됨

 

- 성별 값만 있는 객체가 user를 병합하여 총 3개의 프로퍼티를 가지게 된다

- 만약 병합을 하는데 키가 같다면 user의 것으로 덮어쓰게 된다

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

 

 

Object.keys() : 키 배열 반환

 

 

Object.valuse() : 값 배열 반환

 

 

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

 

 

Object.formEntries() : 키와 값 배열을 객체로

 

 

 

 

Symbol

- 지금까지 객체의 프로퍼티 키는 문자형

 

- 심볼형으로도 가능하다

- 심볼형은 유일한 식별자를 만들 때 사용

 

- 심볼형은 유일성이 보장되어 전체 코드 중에 딱 하나, 설명을 붙여주면 디버깅할 때 편함

- 하지만 object.keys, object.values, object.entries 이런 메소드와 for in은 키가 심볼형인 것은 건너뜀

- 따라서 심볼형은 원본 객체는 그대로 두고 속성을 추가할 때 사용

 

 

 

Symbol.for() : 전역 심볼

- 심볼은 이름이 같아도 모두 다른 존재, 하지만 가끔 전역 변수처럼 이름이 같으면 같은 객체를 가리켜야 할 때 사용하는 것이 symbol.for

- 하나의 심볼만 보장 받음 (없으면 만들고, 있으면 가져옴)

- symbol은 매번 다른 심볼값을 생성하지만 symbol.for는 하나의 심볼을 생성한 뒤 키를 통해 같은 심볼을 공유

- 전역 심볼의 이름을 알고 싶다면 Symbol.keyFor(id1) 사용

- 전역 심볼이 아닌 심볼은 id.description 사용

 

- Object.getOwnPropertySymbols(user) 는 심볼들만 볼 수 있음

- Reflect.ownKeys(user) 는 심볼을 포함한 모든 객체 보여줌

- tip. 하지만 대부분의 라이브러리, 내장함수는 이런 메소드 사용 안함

 

// 다른 개발자가 만든 객체
const user = {
  name: "mike",
  age: 30,
}

//내 작업
const showname = Symbol("show name");
user[showname] = function(){
  console.log(this.name);
}

user[showname]();

//사용자에게 보여지는 메세지
for (let key in user){
  console.log(`my ${key} is ${user[key]}`);
}