즐겁게, 코드

오늘은 자바스크립트의 AND(&&) 연산자의 동작 방식에 대해 간단히 정리해보려 합니다. 시작하기 전에, 한번 간단한 OX 퀴즈를 풀어 볼까요? "&& 연산자는 조건을 검사하고, 해당 조건이 참일 때 다음에 오는 식을 실행합니다." (O / X) 조건문 && (조건이 참일 경우) 실행할 식 이런걸 퀴즈로 냈다는건 분명 어딘가 틀렸다는 건데, 과연 어디서 틀린 걸까요? && 연산자와 조건부 렌더링 리액트에서는 컴포넌트의 조건부 렌더링을 위해 && 연산자를 사용할 때가 종종 있습니다. const menuList = ["홈", "주문 내역", "결제 정보"] const Menu = () => { return ( {/* menuList.length는 0이 아니므로 참이 됩니다. */} {menuList?.len..

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

요즘에는 아마 많은 분들이 프라미스의 동작 순서를 직관적으로 표현하기 위해 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의 계산 결과..

토스트 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는 제너레이터 내부의 값을 외부로 ..