신기한 연구소

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

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

같이 보시죠~

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

즐 코딩하세요.

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

자바스크립트(javascript) promise에 대해 공부를 하고 포스팅을 했었습니다.

promise를 좀 더 쉽게 사용할 수 있는 방법이 있습니다.

자바스크립트(javascript)에서 지원하는 async/await입니다.

async와 await라고 하니 뭔가 어려워 보이기도 하는데요.

사실 사용 방법은 엄청 간단합니다.

그럼 하나씩 예제를 통해 사용법을 알아봅니다.

1. async 

async는 자바스크립트(javascript) 키워드입니다.

보통 async function(함수)라고 쓰인 경우가 있는데 그 이유는 바로 async는 함수를 선언하는 function 앞에 붙여서 사용하기 때문입니다.

function 앞에 async를 붙였습니다.

async 함수의 특징은 promise를 리턴합니다.

그렇다면 promise에서 사용하는 then()을 사용할 수 있다는 의미이기도 합니다.

promise를 리턴하는 함수입니다.

resolve로 success!! 를 성공적으로 리턴하게 됩니다.

리턴된 값은 then을 사용해서 구현할 수 있습니다.

위 promise를 async로 바꾸어보겠습니다.

1번과 2번 두 가지 방식으로 코딩을 해봤습니다.

1번을 보면 promise를 사용한 것 보도 엄청 간단하게 만들어졌습니다.

promise의 .then()을 그대로 사용하는 것을 보면 async funciton이 promise를 리턴하는 게 맞네요.

2번의 경우는 return시 Promise.resolve()를 사용해서 promise 명시적 지정 방식으로 리턴을 했습니다.

역시 사용법은 promise와 같에 .then을 이용했습니다.

Promise.resolve()를 어떤 경우에 사용하는지 궁금했는데 위 예제를 보니 이해가 되네요.

2. await

await 키워드는 단어 뜻대로 기다린다는 의미입니다.

자바스크립트(Javascript) 키워드로 async와 짝꿍으로 사용합니다.

await에 대해 아주 중요한 부분이 있습니다.

await는 반드시 async funciton 내에서만 사용할 수 있습니다.

promise가 생성되고 실행이 되는 동안 약간의 시간이 걸릴 수 있습니다. 보통 API 통신의 경우로 생각해 볼 수 있는데요.

결과가 와서 후처리를 해야 되는데 결과가 오기 전에 다음 소스로 진행이 되면 null이나 undefined 등 오류가 발생할 수 있습니다.

이런 경우 promise가 처리될 때까지 기다리라는 명령이 바로 await입니다. 역시 예제를 봐야 이해가 편합니다.

6번 라인을 보면 키워드 await를 사용하고 있습니다. 

async function testAwait 함수 내에서 사용하고 있습니다.

promise로 리턴된 testPromise 앞에서 await를 사용하고 있습니다.

이제 위 소스는 testPromise가 3초 동안 대기하고 '3nd OK!!'를 출력하도록

await로 결과가 올 때까지 대기시킵니다.

보통 promise로 대기하기 위해서는 then()을 사용합니다.

then() 내부에 화살표 함수를 사용해서 리턴 받는 방식이라 구현이 좀 필요하지만

await를 사용하면 간단하게 사용할 수 있겠군요.

다시 강조하지만 await는 async function 내부에서만 사용이 가능합니다.

보통 API 호출하고 결과를 기다리기 위해 await를 자주 사용할 듯합니다.

지금까지 자바스크립트(javascript)의 키워드인 async와 await의 사용에 대해 간단하게 알아봤습니다.

예외처리나 응용 사용방법 그리고 thenable 등에 대한 내용은 다음에 포스팅해 볼게요.

다들 즐거운 코딩 생활 하세요~~