즐겁게, 코드

바닐라 자바스크립트를 활용해 DOM에 접근할 때는 HTMLCollection, NodeList 등의 DOM 요소들의 컬렉션을 다루게 될 때가 있는데요, 이번 글을 통해 두 컬렉션의 성질을 간단히 알아보도록 하겠습니다. HTMLCollection 먼저 HTMLCollection은 getElementsByClassName 과 getElementsByTagName 메서드를 통해 얻을 수 있는 객체인데요, 한번 간단한 예제를 작성해 보겠습니다. Apple Banana Orange document.getElementsByClassName 함수를 통해 class="red" 속성을 갖는 요소들을 획득한 모습인데요, 자세히 보면 이 컬렉션은 일반적인 배열이 아닌 HTMLCollection 이라는 프로토타입을 기반으로 ..

본 글은 TOAST UI Weekly Pick - "당신이 모르는 자바스크립트의 메모리 누수의 비밀" 을 정리한 내용입니다. 웹 페이지가 버벅이거나 동작을 멈추는 경우에는 여러 원인이 있을 수 있습니다. 그 중 한 가지 원인은 바로 메모리 누수 로, 메모리를 신경쓰지 않고 코드를 작성하면 결국 사용자 경험에 나쁜 영향을 미치게 됩니다. 오늘은 메모리 누수란 무엇이고, 어떤 상황에서 메모리 누수가 발생할 수 있는지 알아보도록 하겠습니다. 가비지 컬렉션 변수 또는 데이터가 더이상 필요하지 않다면 이들은 '가비지 변수' 또는 '가비지 데이터' 라는 미사용 값으로 분류됩니다. 만약 이 데이터가 계속 쌓이면 메모리 사용량을 초과하게 될 것이므로, 그러기 전에 가비지 컬렉션을 꾸준히 실행해야만 합니다. 자바스크립트..

오늘은 객체에 담긴 값을 불변으로 만드는 방법에 대해 알아보도록 하겠습니다. const person = { name: "chanmin", age: 25, }; 먼저 const 키워드로 선언한 변수에 객체 리터럴을 할당한 모습입니다. 이러면 객체가 불변 상태가 된 걸까요? 물론 아닙니다. 이렇게 const 변수에 객체를 할당하면 해당 객체의 참조 만이 불변값이 되어 새로운 객체를 할당하는 것이 불가능하고, 내부 프로퍼티를 변경하는 것은 여전히 자유롭게 가능합니다. const person = { name: "chanmin", age: 25, }; person.age = 100; person.school = "KAU"; console.log(person); // age 프로퍼티의 값은 변경이 가능합니다. //..

개발을 하다보면 객체를 배열로 바꿔야 할 때, 객체의 키만 필요할 때, 값만 필요할 때 등등 객체와 배열을 넘나들어야 하는 상황이 자주 생깁니다. 객체의 키 목록 추출하기 먼저 객체의 키 목록을 추출하는 경우입니다. Object.keys(대상 객체명) 은 해당 객체가 갖는 키의 목록을 배열로 반환합니다. const productList = { backpack: 1200, pencil: 800, eraser: 600, } Object.keys(productList) // [ 'backpack', 'pencil', 'eraser' ] 객체의 값 목록 추출하기 객체의 값만을 배열로 뽑아낼 수도 있습니다. Object.values(대상 객체명) 은 해당 객체가 갖는 값의 목록을 배열로 반환합니다. const p..

요즘에는 아마 많은 분들이 프라미스의 동작 순서를 직관적으로 표현하기 위해 async-await 문법을 사용하고 계실 텐데요, async-await를 사용하는 것만으로도 어느 정도 코드가 읽기 편해지지만 여기서 더 우아한 로직을 작성하는 방법을 공유해보려 합니다. const getStudentList = async () => { const res = await fetch("http://localhost:5000/students"); return res.json(); }; const getGradeInfo = async () => { const res = await fetch("http://localhost:5000/grades"); return res.json(); }; const fetchData = ..

Array.from() 은 문자열 등 유사 배열(Array-like) 객체나 이터러블한 객체를 배열로 만들어주는 메서드입니다. (※ 유사 배열 객체란, 키가 인덱스 값으로 되어있고 길이를 나타내는 length 속성을 갖는 객체를 의미합니다.) // 1. 문자열을 배열로 만드는 예시 console.log(Array.from("Hello")); // [ 'H', 'e', 'l', 'l', 'o' ] // 2. 유사 배열 객체를 배열로 만드는 예시 console.log(Array.from({ 0: "찬민", 1: "희진", 2: "태인", length: 3 })); // [ '찬민', '희진', '태인' ] // 3. 함수의 매개변수들을 순서대로 배열로 만드는 예시 const funcA = (...argume..

function* f1() { yield 10; yield 20; return "완료"; } const gen = f1(); 제너레이터 문법을 알고 계신 분들이라도, 제너레이터를 어떻게 사용할 수 있는지에 대해서는 잘 모르는 분들도 계실 것입니다. (저도 잘 몰랐습니다..!) 오늘은 제너레이터를 통해 성능을 개선할 수 있는 지연 평가(lazy evaluation) 라는 기법을 간단히 구현해 보도록 하겠습니다. 📋 지연 평가 지연 평가는 자바스크립트에만 존재하는 개념은 아니고, 함수형 프로그래밍에서 등장한 개념입니다. 코드와 함께 지연 평가의 개념을 간단히 소개해보겠습니다. const a = 3 + 5; const b = 2 + 4; console.log(a); // 8 변수 a에는 3 + 5의 계산 결과..