mirabo01 님의 블로그

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 등 메모리 주소를 참조함 💬 기본형은 값 자체를 복사하고,참..

프로그래밍에서 변수(variable) 는 데이터를 저장하는 상자다.하지만 자바스크립트에서는 변수 선언 방식이 세 가지나 있다.👉 var, let, const단순히 “새로운 문법이니까 let, const 쓰면 된다” 수준이 아니다.이 세 가지는 스코프(Scope) 와 호이스팅(Hoisting),그리고 값 변경 가능성까지 다르게 작동한다.이번 편에서는 그 차이를 한눈에, 완벽히 정리해보자.💡 1. 변수란 무엇인가?“변수는 데이터를 저장하기 위한 이름 있는 공간이다.”let name = "기범"; let age = 25; name, age는 각각 “변수 이름(식별자)”이고,"기범", 25는 그 안에 담긴 값(Value) 이다.📦 2. var, let, const의 기본 차이 요약구분 var let con..

자바스크립트(JavaScript)는웹 페이지에 생명과 상호작용을 부여하는 언어다.HTML이 ‘뼈대’, CSS가 ‘옷’이라면, 자바스크립트는 ‘행동과 뇌’라고 할 수 있다.단순히 버튼을 클릭했을 때 문구를 바꾸거나,입력값을 검증하는 정도가 아니라이제는 전체 웹 애플리케이션을 움직이는 중심축이다.💡 1. 자바스크립트의 역할구분 설명🧱 HTML구조(Structure)🎨 CSS디자인(Style)⚙️ JavaScript동작(Behavior)즉, HTML + CSS + JS 세 가지가 함께 작동해우리가 보는 모든 웹사이트를 만든다.🌍 2. 어디에서 동작할까?과거엔 브라우저 전용 언어였다.하지만 지금은 서버, 데스크톱, 모바일, 심지어 IoT까지 영역이 확장됐다.환경 설명💻 브라우저Chrome, Edge, ..