신기한 연구소

안녕하세요. 신기한 연구소입니다.

모던 자바스크립트 공부하다 나름 특이하거나 알아두면 괜찮은 팁을 정리해 봤습니다.

같이 보시죠~

1. <script> 사용방법

예전에 사용하던 <script> 태그 속성입니다.
<script type="text/javascript">
<script language="javascript">
<scrtip type="text/javascript"><!--     //--></script>
이제 위 예시는 사용하지 말고 스크립트가 필요한 곳에 <script> </script> 태그만 사용하면 됩니다.

외부 js파일이나 링크는 src로 사용하면 됩니다.
주의점은 src를 사용한 아래 예시의 경우 <script>에 스크립트를 작성해도 인식되지 않습니다.

<script src="/js/module.js"></script>
<script src="https://js.mypage.com/libs/module.js"></script>
<script src="/js/module.js">
   console.log("hi~"); //인식 안됨!!
</script>

간단한 스크립트는 소스에 <script> 태그를 사용해도 되고 길고 복잡하거나 공통적인 소스라면 js파일을 별도로 만들면 좋습니다. 별도 파일로 만들면 호출 시 브라우저에서 한 번만 다운로드하여 캐시에 저장해서 사용하면 되기에 속도 개선에 도움이 됩니다.

2. null과 undefined

둘 다 자료형입니다.
하지만 둘은 다릅니다.

우선 둘의 특징을 보면
변수를 선언하고 할당하지 않으면 'undefined'로 자동할당됩니다.

let myAge;
console.log(myAge);

undefined가 출력되고 myAge에 값이 할당되지 않았다는 의미로 해석됩니다.

null의 경우는 개발자가 변수를 다룰 때 값이 비었다거나 알 수 없음을 임의로 지정하고 싶은 경우에  null을 사용합니다.

myAge = null;
console.log(myAge);

이제 myAge는 미할당이 아닌 빈값인 null이 되었습니다.

myAge = undefined;
console.log(myAge);

undefined는 위 소스처럼 임의 지정을 할 수 있지만 자동할당이라는 의미처럼 직접 할당하지 않는 게 좋습니다.

강력주의사항!!
가끔 기존 개발 소스를 보면 null과 undefined를 할당하면서 문자열처럼 하는 경우가 있습니다.

myAge = "null";
myAge = "Null";
myAge = "NULL";
myAge = "undefined";

이렇게 사용하지 마세요.
이런 경우로 인해 다음과 같은 조건문을 사용하게 됩니다.

if (myAge == null || myAge == "null")

null과 undefinded은 문자열 자료형이 아니고 순수하게 자체가 자료형이기에 그대로 사용하셔야 합니다.


typeof undefined -> undefined
typeof null -> object

undefined는 자신의 타입에 맞게 undefined를 출력하지만 null은 null타입임에도 object가 출력됩니다. 하지만 null은 객체가 아님을 명심하세요.

null과 undefined는 각각이 데이터형이기에 같지 않다고 했습니다.

console.log(null === undefined); -> false

그래서 일치 연산자를 사용한 위 결과는 서로 자료형이 다르기에  false가 출력됩니다.

console.log(null == undefined) -> true

동등 연산자는 null과 undefined를 같게 취급합니다. 자료형은 확인하지 않기도 하지만 같은 개념으로 취급해서 true가 출력됩니다.

그래서 위 예시를 보듯 일치연산자와 동등연산자를 잘 구분해서 사용해야 합니다.


비교연산자는 값을 숫자로 변경합니다.
null은 0이지만 undefined는 NaN을 반환한다고 했습니다.

console.log( null == 0 );
console.log( null >= 0 );

null은 숫자로 0으로 변환되지만 동등 연산자(==)는 null을 0으로 자동 변환해주진 않습니다. 그래서 false가 됩니다.
비교 연산자는 숫자로 변환해준다고 했기에 null >= 0은 null이 0으로 변환되기에  true가 됩니다.

3. 형변환

Number(undefined) -> NaN
Number(null) -> 0
Number(true) -> 1
Number(false) -> 0
Number("") -> 0
Number("0") -> 0
Number("3") -> 3

null은 숫자로 0이 됩니다.
문자열 빈값인 ""도 0이 됩니다.
undefined는 0이 아닌 NaN으로 null과 다른 부분입니다.

4. falsy란?

형변환 중 Boolean인 경우 자바스크립트는 true/false를 비슷한 성향인 경우 변환되는 경우가 있습니다.

Boolean(1) -> true
Boolean(2) -> true
Boolean(0) -> false
Boolean("0") -> true
Boolean(Number("0")) -> false
Boolean("") -> false
Boolean(" ") -> true
Boolean(null) -> false
Boolean(undefined) -> false
Boolean(NaN) -> false
Boolean("hi") -> true

숫자 1은 true입니다.
숫자 0은  false이지만 문자 "0"은 빈값도 아니고 형변환도 안되기에 true입니다. 하지만 Number로 형변환 하면 false입니다.
문자열 빈값 ""은 false이지만 공백 " "은 스페이스가 있기에 true입니다. 하지만 Number(" ")는 0입니다.

위 false가 나오는 값들을 잘 이해하면 코딩 시 다양하게 활용할 수 있습니다.

예)
0이 false이므로 다음 while문에서 활용할 수 있습니다.

let cnt = 10;
while(cnt) {
   cnt--;
}

cnt 값이 10부터 1까지 --로 줄어드는 경우는 true를 반환해서 while문이 계속 처리지만 cnt값이 0이 되면 false가 돼서 while문을 빠져나가게 됩니다.

희한하네요.

5. +연산자

+는 숫자는 더하기로 문자는 연결로 작동합니다.

console.log(2 + 2); -> 4
console.log(2 +"2"); -> 22

이렇게 + 앞 뒤로 숫자나 문자가 있을 경우 +는 이항 연산자라고 합니다.

let minusNum = -5;
console.log (+minusNum); ->  -5

console.log(null);
console.log(+null);

부호처럼 앞에 +를 붙이면 단항연산자라고 하는데요.
음수 -5에 +5를 해도 변화가 없습니다.
하지만 null에 +를 붙이니 갑자기 숫자로 변경되었습니다.
단항 연산자는 숫자를 제외한 어떤 값을 숫자형으로 변환하는 능력이 있습니다. 물론 숫자로 변환이 안 되는 값은 NaN을 반환합니다. 마치 Number()를 사용하는 기분이 듭니다.

이 기능도 잘 활용하면 유용해 보입니다.

6. 쉼표 연산자

다음 결과는 어떤 값이 출력될까요?

let a = 1, b = 2, c = 3;

let k = (b=10, b+c);

console.log(k);

쉼표 연산자의 특징은 , 앞의 b=10을 실행만 하고 , 뒤의 b+c를 실행한 뒤 k에 할당합니다.
그래서 값은 5가 아닌 13이 됩니다. b가 10으로 재 할당되었기 때문입니다.

1차로 정리를 해봤는데 모던 자바스크립트만의 특징을 활용하면 개발할 때 편하게 사용할 수 있을 거 같습니다.

즐 코딩하세요.