개발 정보/JS & TS

JS 잘 몰랐던 사실들

SuYongS 2021. 4. 18. 18:10

JS 정말 거지같은 문법 많은것 같다. 아마 node가 없었더라면 -함-들 처럼 힙스터 취급받는 쩌리 언어정도로 생각할 만큼 이상하리만큼 비정상적인 문법이 정말 많다. 이건 내가 몇가지 개발하다가 알게된 사실들을 몇가지 정리해두었다.


1. JS의 주석

엥?? JS 주석이 왜?

...라고 하시는 분들 있을거다. JS 주석은 총 몇개일까?

2개? JSDoc도 있으니까 3개?

 

정답은 바로 4개다

 

?? 도대체 어떻게 4개가 나오는걸까? 바로 보도록 하자

 

1. singleline comment

// 적당한 주석

뭐 너무나도 평범하다

2. multiline comment

/*
여러줄 가능하지롱~~~
사실 난 거의 #ifdef느낌으로다가 사용을 많이한다... ㅎ
*/

평범하다

3. JSDoc

/**
 * JSDoc이다! 난 이걸 쓸바엔 d.ts를 작성하는게 더 좋을것 같다!
 */

이건좀 모를 수 있을거 같긴한데... 뭐 모를수도 있지

 

그리고 대망의 4번째 주석

4. Html comment

<!-- 이거 주석처리 된다. 구라아니고 진짜다. 만우절아님. 점도붙임 진지함. -->

아니 진짜냐? 놀랍게도 진짜다... 물론 node말고 크롬 개발자 콘솔에서 된다. 브라우저 환경에서만 돌아가는 특이한 주석이다

근데 저거 더 놀라운 사실이 있다

 

쟤... 싱글라인이야...

<!-- 이것만하면 이줄만 주석이 된다
// 얘랑 같다고... 진짜야...

하이라이터 조차도 하이라이팅 안해주는거보니 진짜 legacy한건 맞나보다. 뭐 이런 재미난 사실이 있다.

 

근데 이제 첫번쨰임 ㅋㅋㅋ...


2. array.length

array.length는 writable하다

const array = [];
array.length = 5;

어... 저거 된다... 물론 결과값은 [undefined, undefined, undefined, undefined, undefined]로 출력된다.

참고로 길이 줄이는것도 가능하다.


3. this의 함정

이건 정말 정말 몰랐는데... this는 global도 포함하고 있다

var a = 'String';
var b = function () {
  console.log(this.a)
};

b();

해당코드 정말 멀쩡하게 String이라고 출력된다. 원리는 다음과 같다 js가 b의 익명함수에 this context를 집어넣을때, global 도 함께 등록한다. 그런데 var로 선언한 변수는 this에 동일한 프로퍼티 네임으로 추가 된다! 따라서 globalThis.a 가 String이 되고, b function의 this에 globalThis의 프로퍼티도 포함되어있으니 동작되는것이다!

 

물론 let을 쓰면 이런 이상한일은 생기지 않는다. 모두 let, const를 애용하도록 하자