본문 바로가기

Javascript40

[클린코드 자바스크립트] 호이스팅 주의하기 호이스팅이란? 간단하게 말하면 런타임시에 선언이 최상단으로 끌어올려지는 현상을 말한다. 예를 들어 var로 선언한 변수가 초기화가 되어 있지 않다면 undefined로 최상단에 끌어올려지는 현상이다. (let, const도 호이스팅 되지만 var 처럼 선언과 동시에 undefined로 초기화 되지는 않는다. ) 발생되는 문제 호이스팅으로 인해 예상하지 못하는 문제가 발생할 수 있다. var sum; function sum() { return 7 + 5; } console.log(sum()); // 12 console.log(typeof sum) // function var sum; console.log(sum()); // 12 console.log(typeof sum) // function functio.. 2021. 11. 11.
[클린코드 자바스크립트] 임시변수 제거하기 임시변수 제거하기 임시변수란? 스코프 안에서 전역변수 처럼 사용되는 변수를 일컫는다. function getDOMElement() { const result = {}; // 임시 변수 result.title = document.querySelector('.title'); result.content = document.querySelector('.content'); return result; } 당장은 이 임시변수가 큰 문제를 일으키진 않지만, 해당 함수가 커질 경우 임시변수가 스코프 내에서 전역 변수로 쓰여질 위험이 있고, 개발자들이 임시변수에 접근하여 조작하므로 인해 예상치 못한 사이드 이펙트를 야기할 수 있다. 이 부분을 예방하기 위해서는 함수를 크게 만들지 않고 하나의 일만 하도록 쪼개는 것이 가장.. 2021. 11. 11.
자바스크립트 Event Loop 자바스크립트는 싱글 스레드 기반의 언어이다. 자바스크립트는 비동기로 동작한다. 그럼 이벤트 루프란 무엇일까? 이벤트 루프를 알기 위해 자바스크립트를 해석하고 실행시키는 자바스크립트 엔진 에 대해 먼저 알아본다. 자바스크립트 엔진 자바스크립트 엔진은 자바스크립트로 작성한 코드를 해석하고 실행하는 인터프리터 이다. 웹 브라우저에 화면을 그리는 렌더링 엔진과는 다른 것이기 때문에 잘 구분해야 한다. (렌더링 엔진은 HTML과 CSS로 작성된 마크업 관련된 코드를 웹페이지에 렌더링 하는 역할을 함.) 자바스크립트 엔진은 주로 웹 브라우저에서 이용된다. node.js에서는 구글에서 개발한 V8과 같은 엔진이 이용된다. 이런 자바스크립트 엔진은 크게 Call Stack, Task Queue, Heap 3가지 영역으.. 2021. 6. 2.
타입스크립트 - Utility Type & Mapped Type 유틸리티 타입 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 문법이다. 꼭 이것을 사용하지 않더라도 인터페이스나 제네릭으로 타입을 변환할 수 있지만 유틸리티 타입을 사용함으로 인해 더 간결하게 정의할 수 있다. Pick 예를들어 어떠한 상품들의 목록이 있고, 그 상품의 상세 내용을 보는 페이지가 있다고 가정해 보자. interface Product { id: number; name: string; price: number; brand: string; stock: number; } // 상품 목록 받아오는 API 함수 function fetchProducts(): Promise { //.. } // Product의 일부 속성 interface ProductDetail { id: number; name:.. 2021. 4. 13.