mirabo01 님의 블로그

자바스크립트를 배우면서 가장 많은 혼란을 주는 개념 중 하나가 바로스코프(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, ..

웹 개발을 시작하려면 반드시 마주하게 되는 언어, 자바스크립트(JavaScript).프로그래밍 초보자에게는 다소 낯설지만,이 언어는 오늘날 웹의 90% 이상을 움직이는 핵심 기술이다.이 글에서는 자바스크립트를 ‘쉽게, 직관적으로’ 배우는 방법을 정리했다.기초 개념부터 실전 예시까지, 웹 브라우저만 있으면 바로 실습 가능한 방식으로 안내한다.#자바스크립트입문 #코딩공부 #웹개발기초💡 1. 자바스크립트란 무엇인가?“HTML이 구조를 만들고, CSS가 꾸민다면, JavaScript는 움직이게 한다.”자바스크립트는 웹페이지를 동적으로 변화시키는 언어다.버튼을 클릭했을 때 팝업이 뜨거나, 입력창에서 실시간으로 글자가 바뀌는 등웹에서 ‘움직이는 모든 것’은 대부분 자바스크립트가 담당한다.🌱 2. 첫 코드 — 콘..