본문 바로가기

공부/JavaScript23

비동기 처리 자바스크립트는 그 자체로는 동기적인 언어[1]입니다. 하지만 많은 사람들이 자바스크립트를 자바 등과 다르게 비동기적인 언어라고 알고 있습니다. 바로 다음과 같은 예 때문입니다. setTimeout(() => console.log("Horse A"), 0); console.log("Horse B"); 위 코드의 실행 결과는 위에서부터 순서대로 찍히지 않고 Horse B가 먼저 찍힙니다. 이처럼 자바스크립트가 특정 환경에서 실행할 때, 다시 말해 서버와의 네트워크 통신이나 setTimeout 함수와 같은 웹 API[2]를 사용할 경우 비동기적으로 동작합니다. 이 글에서는 자바스크립트가 다양한 환경에서 비동기 처리를 어떤 식으로 해왔는지에 대해 적어보고자 합니다. 공부 목적으로 적은 글이니 틀린 부분이나 피드.. 2020. 12. 27.
느슨한 연결 최근 제가 작성한 JS 코드가 유지보수하기 힘들고 파악하기 쉽지 않다는 느낌을 받았고, 그 원인에 대한 생각을 하다가 이 글을 작성하게 되었습니다. 수정할 부분이 있다면 댓글로 피드백 부탁드립니다. 참고자료의 출처는 하단에 기재하였습니다. 글의 대략적 목차는 아래와 같습니다. 1. 전역 선언 방지 2. One-Global 접근법 3. UI 레이어 느슨하게 연결하기 _____ 전역 선언 방지 전역 객체를 사용하면 어디에서나 사용 가능한 변수나 함수를 만들 수 있다[1]. 전역 객체는 언어 자체나 호스트 환경에 기본 내장되어 있는 경우가 많다[2]. alert("Hello"); // 위와 동일하게 동작합니다. window.alert("Hello"); var gVar = 5; alert(window.gVar).. 2020. 12. 27.
Function 자바스크립트의 핵심 개념인 함수를 정리하고자 글을 남깁니다. 참고한 자료들은 최하단에 기재하였고, 글의 대략적인 목차는 다음과 같습니다. 1. 유효범위(Scope) 2. 정의 3. 함수 표현식 vs. 함수 선언식 _____ 유효범위(Scope) 자바스크립트에서 함수란 어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록이다. 이는 코드의 재사용 측면에서 유용하다는 점에서 타언어와 같지만 자바스크립트의 함수는 조금 특별하다. var globalNum = 10;// globalNum을 전역 변수로 선언함. function printNum() {// 함수 선언문 document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum.. 2020. 12. 26.
Logical Operators 개발을 하며 화면을 제어하기 위해 논리 연산자를 많이 쓰는 것 같다. 간단하지만 한 번 상기하기 위해 간단한 예와 MDN 문서를 살펴보려 한다. _____ true || anything === false false || anything === false true && anything === anything false && anything === false 위 코드 중 참인 것은 무엇일까?[1] 흔히들 논리연산자는 Boolean 타입만을 피연산자로 갖는다고 착각하지만 논리연산자는 주로 Boolean 값과 함께 사용된다[2]. 연산자 사용법 설명 && expr1[3] && expr2 expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환한다. || expr1 || .. 2020. 12. 25.