mirabo01 님의 블로그

1. 왜 모듈이 필요한가프로젝트가 커질수록, 한 파일 안의 코드 길이는 기하급수적으로 늘어난다.예전에는 이런 식이었다.// script.jsfunction add(a, b) { return a + b; }function multiply(a, b) { return a * b; }console.log(add(2, 3));그런데 만약 다른 파일에서 add()를 쓰고 싶다면 어떻게 해야 할까?이전 자바스크립트(ES5)까지는 이런 “모듈화” 기능이 없어서,모든 스크립트를 전역(global)으로 불러오는 방식을 썼다.결과적으로 전역 네임스페이스 충돌이 발생하고,파일 간 의존성이 꼬이기 시작했다.이 문제를 해결하기 위해 등장한 것이 바로 모듈 시스템(Module System) 이다.2. 모듈이란 무엇인가모듈(Modu..

1. 자바스크립트는 ‘단일 스레드(single-thread)’ 언어다먼저 전제부터 잡고 가자.자바스크립트는 기본적으로 한 번에 하나의 작업만 처리한다.즉, CPU가 한 줄씩 순서대로 실행하는 “단일 스레드” 모델이다.그렇다면 이런 의문이 생긴다.“단일 스레드인데, 어떻게 동시에 여러 작업을 처리하지?”예를 들어, 브라우저에서 이런 코드를 실행하면 어떻게 될까?console.log("A");setTimeout(() => console.log("B"), 1000);console.log("C");출력 결과는ACB가 된다.즉, 1초를 기다리지 않고 다음 코드가 바로 실행된다.이게 바로 비동기 처리(asynchronous execution) 의 핵심이다.2. 동기(Synchronous) vs 비동기(Asynchr..

1. 들어가며자바스크립트에서 함수는 단순히 “코드 묶음”이 아니라,자신이 선언된 환경(스코프)을 기억하는 살아 있는 객체다.이 특성을 가능하게 하는 것이 바로 클로저(Closure) 다.한마디로 정리하면 이렇다.“클로저란 함수가 선언될 때의 환경을 기억하는 기능이다.”이제 이 문장이 무슨 뜻인지 예제를 통해 하나씩 풀어보자.2. 함수는 함수를 반환할 수 있다자바스크립트의 함수는 일급 객체이므로, 다른 함수 안에서 생성하고 반환할 수 있다.function outer() { const name = "기범"; function inner() { console.log(`안녕하세요, ${name}`); } return inner;}const greet = outer();greet(); // "안녕하세요..

1. 왜 map, filter, reduce가 중요한가프론트엔드에서 데이터를 다룰 때, 가장 흔한 패턴은 “리스트를 가공하는 것”이다.API에서 가져온 데이터를 정리하거나, 사용자 입력을 필터링하거나,차트나 테이블에 맞게 변환하는 모든 과정이 여기에 속한다.이 세 가지 메서드는 단순 반복이 아니라,데이터를 새롭게 변형하고 요약하는 사고 방식을 가능하게 한다.// 예시: 사용자 데이터const users = [ { name: "기범", age: 27 }, { name: "민수", age: 19 }, { name: "지현", age: 32 },];이 데이터를 이용해 여러 가지 처리를 해보자.2. map — 데이터를 변형하는 방법map은 배열의 각 요소를 순회하면서, 새로운 형태로 “변환된 결과”를 가진..

자바스크립트를 배우다 보면 결국 모든 데이터가 객체(Object) 로 통한다는 걸 깨닫게 된다.숫자, 문자열, 함수, 배열 — 전부 객체의 한 형태거나 객체에서 파생된 존재다.이 글에서는 객체와 배열을 단순히 “자료 구조”로 보지 않고,데이터를 표현하고 조작하는 철학적 도구로 접근해보자.1. 객체(Object)의 개념객체는 하나의 실체를 표현하기 위한 키(key)-값(value) 쌍의 집합이다.예를 들어 사람을 표현하려면 다음과 같이 쓸 수 있다.const person = { name: "기범", age: 27, job: "Frontend Developer",};여기서 name, age, job은 속성(property) 이며,이 속성들은 각각의 값과 연결되어 있다.이런 구조 덕분에 객체는 현실의 개..

자바스크립트를 배우면서 가장 많은 혼란을 주는 개념 중 하나가 바로스코프(Scope) 와 호이스팅(Hoisting) 이다.변수를 선언했는데 값이 예상과 다르게 나오거나,함수를 아래쪽에 적었는데도 실행되는 이유가 바로 이 두 개념 때문이다.이번 글에서는‘자바스크립트가 코드를 실행할 때 실제로 무슨 일이 일어나는지’를눈앞에 그리듯 차근히 설명해보자.1. 스코프(Scope)란 무엇인가스코프란 “변수와 함수가 유효한 범위”를 말한다.즉, 어떤 변수를 어디서 접근할 수 있고 어디서는 접근할 수 없는지를 결정하는 규칙이다.예를 들어, 아래 코드를 보자.let name = "기범"; // 전역 변수function greet() { let message = "안녕하세요"; // 지역 변수 console.log(me..

“자바스크립트 함수의 진짜 차이를 모르면, 코드가 왜 에러 나는지 절대 알 수 없다.”🚀 들어가며프로그래밍에서 함수는 단순히 코드를 묶는 도구가 아니다.“재사용성과 구조의 출발점” 이며, 자바스크립트에서는 특히 함수가 일급 객체(First-class Object) 로 취급된다.그런데 막상 코드를 짜다 보면 이런 혼란에 자주 빠진다.sayHello(); // ✅ 작동됨greet(); // ❌ ReferenceErrorfunction sayHello() { console.log("안녕하세요!");}const greet = function() { console.log("반가워요!");};둘 다 “함수 선언” 같아 보이는데, 왜 하나만 실행될까?이것이 바로 함수 선언문(Function Declarat..

모든 프로그램의 핵심은 “상황에 따라 다르게 행동하고,특정 동작을 반복하는 것”이다. 자바스크립트에서는 이 두 가지를조건문(Condition Statements) 과 반복문(Loops) 으로 제어한다. 이번 편에서는 if, switch, for, while, for...of, for...in 💡 1. 조건문의 기본 구조 “조건이 참일 때만 실행되는 코드 블록” if (조건식) { // 실행문 } else { // 조건이 거짓일 때 실행 } 예시 👇 let age = 20; if (age >= 19) { console.log("성인입니다."); } else { console.log("미성년자입니다."); } ✅ 조건식은 항상 true/false 로 평가된다.✅ 비교 연산자(>..

자바스크립트를 배우다 보면+, ==, ===, &&, ||, ? : 같은 기호들이 수도 없이 등장한다.이게 단순히 ‘계산하는 도구’가 아니라, 논리와 흐름을 제어하는 핵심 문법이다.이번 편에서는 모든 연산자의 구조와 작동 원리,그리고 실무에서 자주 마주치는 헷갈리는 비교 상황까지 한 번에 정리한다.💡 1. 연산자란?“연산자는 값을 계산하거나 비교하거나 논리를 제어하는 기호다.”let sum = 10 + 5; // 산술 let check = sum > 10; // 비교 let result = check && true; // 논리 자바스크립트에는 수십 가지 연산자가 있지만,핵심은 다음 5가지 그룹으로 정리할 수 있다 👇🔢 2. 산술 연산자 (Arithmetic)연산자 의미 예시 결과+더하기5 + 27-..

자바스크립트의 모든 데이터는 “자료형(Data Type)” 으로 구분된다.자료형을 정확히 알아야 변수를 올바르게 선언하고,비교·연산·함수 호출 시 예측 가능한 결과를 얻을 수 있다. 이번 글에서는 자바스크립트의 기본형(Primitive) 과 참조형(Reference) 을 완벽히 구분하고,각 자료형의 동작 원리를 예제 중심으로 이해해보자. 💡 1. 자바스크립트 자료형의 두 가지 분류 분류 자료형 특징 🧱 기본형 (Primitive) string, number, boolean, null, undefined, symbol, bigint 값 자체가 저장됨 📦 참조형 (Reference) object, array, function 등 메모리 주소를 참조함 💬 기본형은 값 자체를 복사하고,참..