원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-hoisting-478h 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 만약 당신이 자바스크립트가 익숙하지 않다면, 어떤 변수들이 랜덤하게 'undefined'로 되어서 ReferenceError가 던져지는 이상한 경험을 해본 적이 있을 것이다. 호이스팅은 '변수와 함수들을 파일의 맨 위쪽에 놓은 것'이라고 주로 설명되는데, 그렇게 보일 수 있지만 맞지 않다. 자바스크립트 엔진이 스크립트를 받게 되면, 처음으로 하는 일은 바로 코드 안의 데이터를 위해 메모리를 세팅하는 일이다. 이 때 코드는 실행되지 않..

원문 (영어) : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif 저자 : Lydia Hallie 👩🏻‍💻Thanks to Lydia for this amazing article about Javascript! 자바스크립트는 단일 쓰레드로 구성되어있다 = 한 번에 하나의 일을 수행하는 것! 만약 하나의 일이 30초가 걸린다면? 우리는 30초를 기다려야하는 상황인 것이다 (자바스크립트는 기본적으로 브라우저의 메인 쓰레드에서 돌아가기 때문에 모든 UI가 막히게 된다) 다행히도, 브라우저는 자바스크립트 엔진 자체가 제공하지 않는 몇 가지 기능을 제공하는데 바로 'Web API'이다. Web API에는 DOM API, setTimeout, HT..

흔히 하는 실수 '=' 연산자 사용 let origin = { num : 1 } let clone = origin origin.num = 2 console.log(clone) // { "num" : 2 } 객체는 '참조타입(reference type)'이기 때문에 객체를 '='로 복사하면 값이 아니라 메모리 주소값 참조를 복사한다. 즉, clone과 origin는 같은 메모리를 사용한다는 것이다. 그러므로 콘솔에 찍어보면 하나의 객체가 2개의 변수에 의해서 공유되고 있는걸 확인할 수 있다. (하나의 변수를 통해 값을 바꿨지만, 다른 변수의 값도 함께 바뀌었다) console.log(origin === clone) 따라서, 객체를 비교할 때 참조가 같은지 비교하는 '===, =='로 비교해보면 'true'..