변수(let,var,const의 차이점, 호이스팅, tdz)
선언은 호이스팅 되지만 할당은 호이스팅 되지 않기에 undefined
let 이 호이스팅 되지 않는것 처럼 보이는이유 = temporal dead zone 때문
tdz 영역에 있는 변수들은 사용할 수 없음.
let, const는 tdz영역의 영향을 받음. 즉 할당을 하기 전에는 사용할 수 없음.
=> 코드를 예측가능하게하고, 잠재적 버그를 줄일 수 있다.
위 코드는 문제가 발생함
let이 호이스팅 되지 않는게 아님.
호이스팅은 스코프 단위로 일어남
let age =20; 부분이 호이스팅이 일어남.
만약 호이스팅이 일어나지 않았다면 함수밖에서 선언한 age 30이 정상적으로 찍혀야 함.
하지만 그렇지 않음.
var는 선언과 초기화가 동시에 진행됨
let은 선언단계과 초기화단계가 분리되어 진행됨
선언단계에서 호이스팅이 일어나지만 초기화단계는 실제 코드에 도달했을때 일어나기에 레퍼런스 에러가 발생함.
const는 선언과 할당이 동시에 되어야만함.
let, var는 선언만하고 나중에 할당하는걸 허용함.
위와 같이 선언하면서 할당을 안했기에 에러가 발생
블록스코프는 모든 블록에서 선언된 변수는 코드블록내에서만 유효함. 외부에서는 접근할 수 없음.
즉, 코드블록 내부에서 선언한 변수는 지역변수.
코드블록은 함수, if문 등을 의미함.
반면 함수스코프는 함수내에서 선언된 변수만 그지역의 지역변수가 됨, 즉, if문 for문 등에서 선언된 변수도 전역변수가 되여버림.
var 로 선언된 변수가 유일하게 벗어날 수 없는 스코프가 함수스코프
생성자 함수(비슷한 객체 여러개 만들기)
Intermediate Class
위와 같이 객체를 만드는 것을 객체 리터럴 이라고 함
그런데 저렇게 비슷한 객체를 여러개 만들어야 하는 상황인 경우? 예를들어 회원, 상품 등
->생성자 함수를 쓸 수 있음
각각 다른 변수명으로 3번 연달아 호출함
비슷한 객체를 3개 빠르게 만듦
- 실행되는 과정
- new 함수명();을 실행하면
- 빈객체를 만들고 this에 할당함(this={})
- 함수 본문을 실행하면서 this에 프로퍼티들을 추가함.
- 마지막으로 this를 반환함
실제로 this={}, return this는 코드에 없지만, new를 붙이는 순간 저 방식으로 알고리즘이 동작함.
생성자 함수를 이용하면 일일이 객체를 리터럴방식으로 만드는것보다 빠르고 일관성있게 만들 수 있음. 스펙이 변경되어도 저 생성자 함수면 고치면됨
어떤 함수라도 new를 붙여서 실행하면 저 알고리즘이 동일하게 동작함
그래서 생성자 함수는 첫글자를 대문자로 하는게 관례
- 메소스 추가해보기
모든 user에는 sayName이라는 메소드가 있어서 자신의 이름을 말하는 기능이 있음.
this로 할당된 객체에 sayName 메소드를 추가하고 user를 하나더 만듦.
user5에 sayName을 호출하면 이름을 알려줌
user5.sayName을 호출했을때 sayName 함수의 this는 user5.
this.name은 user5.name이 됨
- 실습
그런데 위와 같이 new를 안붙이면
console에 item2 찍어보면 undefined나옴.
생성자 함수는 꼭! new를 붙여야 동작
Object-methods(객체에서 사용할 수 있는 몇가지 메소드), Computed property
Computed property
위에서 age키 대신 [a]를 써도 됨
대괄호로 묶어주면 a라는 문자열이 아니라 변수 a에 할당된 값이 들어감
대괄호 안에 식 자체를 넣는 것도 가능함.
Object-methods(객체에서 사용할 수 있는 몇가지 메소드)
변수에 객체를 담은 변수(user) 할당한다고해서 객체가 cloneUser에 복제되지 않음.
user에는 객체가 들어가 있는게 아닌,
객체가 저장되어있는 메모리 주소인 객체에 의한 참조값이 저장됨.
따라서 cloneUser를 만들어서 user를 넣으면 객체가 복사해서 들어가는게 아니라, 참조값만 들어감.
따라서 위와 같은 상황이 발생함.
cloneUser의 이름을 바꾸었는데 user의 이름도 바뀐 상황.
하나의 객체를 두 변수가 접근하고 있음.
Object.assign();
동일하게 복제하려면 Object.assign메소를 써야함.
첫번째 매개변수(빈객체{}는) 초기값, 두번째 매개변수 부터 들어온 객체들이 초기값에 병합 됨
이름을 바꾸어도 user에는 변함이 없음. 같은 객체가 아님.
병합시 키가 같다면 덮어쓰게 됨
두개 이상의 객체를 합칠 수도 있음.
위 화살표 방향으로 합쳐짐.
Object.keys()
객체의 키를 '배열'로 반환함.
Object.values()
Object.entries()
Object.fromEntries()
실습
-
Computed property
어떤게 KEY가 될지 모르는 객체를 만들때 유용 -
복제
