자바스크립트 이것저것 공부중 정리 (스테픈 2km완료)

in sct-kr •  5 days ago 

NULL 병합 연산자(Nullish Coalescing Operator)는 한번도 사용해본적 없네요

일단 삼황조건문하고 매우 유사한 형태로 사용되는 null 병합연산자

image.png
t
이런 형태로 왼쪽의 조건이 true이면 : 를 기준으로 왼편에 값이 사용되고 false면 오른쪽 값이 사용되는 형태인데요

null 병합연산자는

image.png

이런식으로 사용되는데요

?? 기준으로 왼편의 값이 null이나 undefined 인 경우에는 오른쪽 값이 사용되고

그게 아니면 왼쪽 값이 사용되는 형태인거죠

어떤 상황에서 사용하는게 좋을까 싶었는데

그냥 fetch등의 외부 api를 사용한 데이터가 들어오는 곳에 사용하는게 좋을것 같기도 하네요..

값이 안들어오면 undefined를 뱉으니..

외부 api를 생각하니

리엑트에서 쓰던 리엑트 쿼리가 생각나는군요

서버상태관리 하는 라이브러리였는데

리엑트 쿼리 이전에는 리덕스 사가나 리덕스 청크로 상태관리를 했었다고 들었습니다.

Redux Thunk와 Redux Saga 무슨차이가 있을까 하는 궁금증이 들더군요

image.png

내용을 조금 조사해보니

이렇게 비동기 상태관리에 제너레이트 함수로 만들어서 관리하는지

아니면 그냥 함수를 반환하여 처리하는지 차이가 있는것 같네요

조만간 리덕스 사가와 청크를 한번 정리해봐야겠습니다.

물론 서버 상태관리는 리엑트 쿼리로 하는게 더 나은것 같지만요..

es6이후 추가된 기능에 대해서 정리좀 해놔야겠습니다

머리로 알고는 있는데 입으로 말할줄 알정도로 하려면 계속 써야 익숙해지니..

변수 선언
let과 const: 블록 스코프 변수를 선언합니다.
블록 스코프는 기존에 var는 함수 스코프를 갖기때문에 호이스팅이 발생해서
선언 이후 콘솔을 찍어도 오류가 발생하지 않지만
let과 const는 블록 스코프를 갖기때문에 할당 이전에 호출하면 오류가 발생하는거죠

image.png

화살표 함수

image.png

매우 자주쓰는 기능인데
함수 선언을 더 간결하게 만들고, this 키워드의 동작을 일관성 있게 유지할 수 있게 해준다.

화살표 함수로 만들면 this가 상위스코프를 가리키기 때문에 this 키워드를 일관적으로 사용할 수 있다.

템플릿 리터럴
백틱(`)을 사용하여 멀티라인 문자열과 내장된 표현식을 지원한다.

image.png
위 '' 문자열과 메서드의 결과값을 + 로 합치는게 아니라
템플릿 리터럴로 한번에 표현이 가능하다.

디스트럭처링 할당
배열과 객체의 값을 쉽게 추출할 수 있다.

image.png

정말 유용한 구조분해 할당!

Rest 파라미터와 Spread 연산자
함수 매개변수나 배열, 객체에서 나머지 요소들을 다룰 수 있다
image.png
엄청 유용한 기능

클래스의 도입

image.png

객체지향 프로그래밍을 하기 쉽도록 도입되었다.
지난번 제작했던 todo리스트

프로미스
비동기 작업을 관리하기 위한 방법으로 도입되었다.
es6 이전에는 아마 xmlhttprequest를 사용해서 처리하지 않았을까..

일단 사용한적은 별로 없지만

심볼
고유한 식별자를 생성하는 기능으로 알고있는데..
거의 써본적이 없다.

맵, 셋
고유한 값을 저장하는데 사용하는 기능인데
둘다 특징이 있다.
set은 중복값이 인정되지 않기때문에
중복값을 제거할때 몇번 사용해봤다.


스테픈 2km완료

image.png

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!