즐겁게, 코드

개발을 하다보면 객체를 배열로 바꿔야 할 때, 객체의 키만 필요할 때, 값만 필요할 때 등등 객체와 배열을 넘나들어야 하는 상황이 자주 생깁니다. 객체의 키 목록 추출하기 먼저 객체의 키 목록을 추출하는 경우입니다. 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의 계산 결과..

널 병합 연산자(nullish coalescing operator)는 null 또는 undefined 값을 처리하기 위해 ES6에서 새롭게 등장한 문법입니다. 사용 방법 // ??을 기준으로 왼쪽 값이 null 또는 undefined라면 오른쪽 값이 대신 할당됩니다. const value = null ?? "Default value"; 널 병합 연산자를 사용하면 변수에 대입되는 값이 null 또는 undefined일 경우에 대신 대입할 값을 지정할 수 있습니다. (※ 리액트를 경험해보신 분들이라면, 리액트의 defaultProps 와 동일한 역할을 한다고 생각하시면 편합니다!) 널 병합 연산자를 사용하지 않을 때를 예로 들어 보겠습니다. let student = null; setTimeout(() => ..

토스트 UI 팀의 "TDZ을 모른 채 자바스크립트 변수를 사용하지 말라" 글을 읽고, 오늘도 변수를 스스럼없이 사용한 것을 반성했습니다. TDZ(Temporal Dead Zone) 는 초기화되지 않은 변수가 저장되는 곳인데요, 오늘은 TDZ와 변수에 대한 얘기를 해보도록 하겠습니다. var, const, let과 호이스팅 console.log(Var); // undefined console.log(Let); // ReferenceError: Let is not defined var Var = 1; let Let = 2; TDZ를 소개하기 전, 잠깐 호이스팅의 개념을 되짚어보는 시간을 갖겠습니다. 초기화되지 않은 변수에 접근하려 하면 var 변수는 undefined를 출력하고 넘어가지만, let과 cons..

제너레이터를 활용하면 함수의 실행을 중간에 멈췄다가 재개할 수 있습니다. // 화살표 함수 형태로는 제너레이터를 생성할 수 없습니다. function* f1() { yield 10; yield 20; return "완료"; } const gen = f1(); 보시면 function 키워드 뒤에 * 이 붙어있는 것을 확인할 수 있는데요, function* 키워드는 제너레이터를 정의하는 문법입니다. (따라서 화살표 함수 형태로는 제너레이터 함수를 생성할 수 없습니다.) 함수 내에 존재하는 yield는 함수의 실행을 잠깐 멈출 수 있는 분기이며, 제너레이터 함수를 실행하면 제너레이터 객체를 반환합니다. yield 키워드 yield 키워드에 대해 조금 자세히 다루자면 yield는 제너레이터 내부의 값을 외부로 ..