즐겁게, 코드

// utils.js const sayHello = () => { console.log("안녕하세요!"); }; const sayNothing = () => { console.log("..."); }; export { sayHello, sayNothing }; import { sayHello, sayNothing } from "./utils.js" 자주 보셨을 import-export 구문입니다. 그런데 조건에 따라 모듈을 불러오는 것도 가능할까요? // Error!!! if(person === "friend") { import { sayHello } from "./utils.js"; sayHello(); } else if(person === "professor") { import { sayNothing..

requestAnimationFrame은 자바스크립트로 *애니메이션 효과를 쉽게 구현할 수 있는 API입니다. (* 이 글에서의 애니메이션이란, 프레임 단위로 픽셀을 재렌더링하는 행위를 의미합니다.) 기존의 자바스크립트 애니메이션은 setInterval 등을 사용해 1.5ms 마다 대상의 위치를 변경하는 등의 방법을 사용했지만, 디스플레이 주사율이 기기마다 다양해짐에 따라 이는 좋지 않은 경험으로 다가올 수도 있었습니다. setInterval을 사용한 애니메이션 position: 0 const car = document.querySelector("#car"); const value = document.querySelector("#value"); let xPos = 0; const render = () =..

로직을 작성하다 보면 배열 안에서 특정 조건을 만족하는 값을 찾아야 하는 때가 자주 있습니다. 배열을 순회하는 forEach 메서드를 활용해 배열에 5보다 큰 원소가 있는지 검사하는 코드를 작성해 보겠습니다. const array = [2, 4, 6, 8, 10]; const biggerThanFive = false; array.forEach((el) => { if (el > 5) { biggerThanFive = true; } }); console.log(biggerThanFive); // true 제대로 작동합니다! 다만, 이를 위해 변수를 따로 할당하고 3줄이 넘는 코드를 작성해야 한다는 것은 어딘가 찝찝합니다. 오늘은 특정 조건을 만족하는 값을 찾는 더 나은 방법을 소개하겠습니다. Array.pr..

자바스크립트는 싱글 스레드 프로그래밍 언어입니다. 이는 곧 싱글 스레드 런타임(실행 환경)을 가지고 있다는 의미로, 한번에 하나의 작업만을 수행할 수 있음을 의미합니다. 그런데 웹 브라우저에서는 음악을 재생하면서 마우스 이벤트를 감지할 수도 있고, 웹 서버에 요청을 보내는 동안 새로운 키보드 입력을 수행할 수도 있는 등 동시에 일어나는 일이 꽤나 많습니다. 자바스크립트는 싱글 스레드에서 동작하는데 어떻게 브라우저에서 동시(병렬) 작업을 구현할 수 있었던 것일까요? 지금부터 찬찬히 알아보도록 하겠습니다. 자바스크립트 엔진과 런타임의 구조 자바스크립트 엔진은 변수와 객체의 메모리를 할당하는 힙 영역과 하나의 콜 스택으로 이루어져 있습니다. 또 자바스크립트가 실제로 실행되는 실행 환경(런타임)인 브라우저나 N..

커링은 sum(a, b) 처럼 단일 호출로 처리되는 함수를 sum(a)(b) 처럼 여러 번의 호출로 분리하는 기법입니다. const sum = (a, b) => { return a + b; } console.log(sum(1,2)); // 3 두 수의 합을 구하는 평범한 함수인데요, 위의 sum 함수는 두 인자를 입력받아 계산한 값을 리턴합니다. 그러나 커링을 적용하면 아래처럼 두 인자를 입력받아 계산한 값을 리턴하는 함수를 리턴하게 됩니다. const curriedSum = (f) => { return (a) => { return (b) => { return f(a, b); }; }; }; const sum = (a, b) => { return a + b; }; let res = curriedSum(s..

자바스크립트의 자료형은 원시형과 객체 타입으로 구분됩니다. 원시형 : Number, String, Boolean 객체 : 나머지 전부 객체 타입이 원시형과 구분되는 가장 큰 차이는 변수에 실제 값이 담기는 원시형과는 달리 객체 타입은 해당 데이터의 참조(reference) 값이 저장된다는 것입니다. (C나 C++의 일반 타입과 포인터를 떠올리면 됩니다.) 이게 뭐가 중요하다고 갑자기 이 얘기를 꺼내는 걸까요? 이제부터 코드를 통해 살펴봅시다. let number1 = 1; let number2 = number1; number2 = number1 + 9; console.log(`number1 : ${number1}, number2 : ${number2}`); // number1 : 1, number2 : ..

클로저(closure). 분명 한번은 들어봤지만 한번도 직접 써본적은 없는 그 문법입니다. 그런데 정말 없을까요? 오늘은 클로저가 무엇인지 한번 알아봅시다. let myName = "Chanmin"; function printName() { console.log(myName); // "Chanmin" } printName(); 실행 결과로 "Chanmin" 이 출력되는 것은 쉽게 예측할 수 있는데, 함수 안에서 어떻게 바깥의 myName 변수를 사용할 수 있었던 걸까요? 바로 우리가 모르는 사이에 클로저가 사용되었기 때문입니다. 이번에는 조금 복잡한 예시를 들어 보겠습니다. function outer(outerValue) { return function inner(innerValue) { console...