JS

송은우·2022년 3월 20일
0

호출 스택 annonymous 부터 항상 시작한다고 기억
그 다음에는 평범하게 내가 생각했던 것과 같게 진행하면 됨.

scope chain 이 변수 접근 영역
예전에는 함수 기준, 지금은 block 기준.
trycatch,{}도 block임. ({})가 되어야 객체가 됨.

가장 최상위 block에 있는 것들은 anonymous에 엮인다고 생각하면 됨.
함수 내부 함수 선언은 a{b{}}같은 경우 b=>a=>annonymous같은 느낌이면 됨
그냥 들여쓰기 같은 느낌으로 보면 됨
lexical scope 라는 느낌
scope를 뒤질 때는 그냥 scope를 봐야 됨. 현재 있는 scope에서 없다면, 상위 scope도 보고, 그래도 없으면 undefined

annonymous=>a,다른 함수들
a=>b 이런 느낌으로 scope 를 그릴 수 있음
선언 지도상 같은 위치에 같은 명 선언시 에러
TDZ. 호이스팅 터지는 코드 쓰지 않기
TDZ는 annonymous같은 스코프 안에서만 터지는 문제임 함수 내부에서는 관계 없음

var을 쓰면 안 되는 이유 : 호이스팅 방식이 비직관적임. var x만 호이스팅 되고, 할당 부분이 안 되고, 하는 이상한 부분, + 재선언 가능 + 함수 레벨 스코프를 가짐
화살표 함수는 호이스팅시 에러를 뱉기에 조금 편해짐

예외 : 화살표 함수는 호이스팅이 안 됨

기본적으로 this는 윈도우다
함수도 this는 window. node는 global이라고 했지만
최근에는 globalThis로 합쳐짐
strict mode는 undefined
.이면 바로 앞에 있는 것이 this

const obj={
	name:"asdf"
	sayName(){
		console.log(this.name)
	}
}
const obj={
	name:"asdf"
	sayName=function(){
		console.log(this.name)
	}
}

이 2개가 사실 속성을 찍어보면 다르다고 나오긴 함
생성자로 쓰면 new일 경우 바뀜

bind,call, apply로 this를 바꿀 수 있음
화살표 함수는 부모의 this를 물려받음
이거는 선언을 신경 써야 됨

node의 this는 살짝 조건이 더 붙음

const obj={
	name:'testing',
    sayName(){
    	console.log(this.name);
        function inner(){
        	console.log(this.name);
		}
        inner();
	}
}

이게 가장 베이스가 되어 있어야 함
inner=>sayName=>annonymopus
선언 기준이기에 화살표 함수랑 딱히 관계 없음
이거는
obj.sayName();
실행시
testing, ""가 나옴.
sayName:()=>라면 둘다 ""로 시작됨
그냥 생각의 기준은 언제나 this를 바꾸는 행동을 했는가의 차이가 있음
inner=()=>라면 부모 함수의 this를 물려 받기에 testing이 나옴

호출시에 결정 된다 => 호출 스택을 생각해 주면 좋음.
호출 스택에 this를 같이 그린다.

이 그림 그리기 생각
add event lister같은 함수는 함수 호출 부분이 가려져서 호출 상황을 모르기에 this를 구경할 수 없음

화살표 함수는 call을 못 붙힘.
따라서 실제로 console에다가 addEventListener를 이용해 붙혀보면 화살표 함수인 경우 window가 this가 되버림
addEventListener가 선언한 값이 아님

callback자체는 비동기가 아니다 라는 생각은 갖고 있어야 함
promise에서는 딴짓을 하다 생각났을 때 promise로 꺼낼 수 있다는 느낌임. 이게 커다란 장점임. 코드를 분리할 수 있고, 결과를 내가 원할 때 꺼내서 쓸 수 있다는 커다란 장점이 있음

콜백 헬이 안 좋은 이유 : 결과값을 바로 받아야 한다는 점이 또 다른 단점이 됨. promise는 나중에 받아도 되긴 함
promise.all은 하나라도 터지면 다 터지기에 문제가 되지만, promise.allsettled는 되게 깔끔해짐. catch도 터진 것만 들어가고, 성공 실패가 확실하가ㅔ 됨
promise.all의 catch는 then에 터져도 catch로 간다는 점

공식문서 볼만한거 추천 : 사전인지, 공부할만한게 있는지

클린 코드

profile
학생의 마음가짐으로 최선을 다하자

0개의 댓글