ORANGEE

## 자바스크립트에서 `this`란?this는 함수가 호출되는 방식에 따라 결정되는 컨텍스트 객체를 의미한다.즉, 누가 호출했느냐에 따라 this가 가리키는 대상이 달라진다.📌 전역 컨텍스트에서의 thisconsole.log(this); // 브라우저에서는 window, Node.js에선 global📌 객체 메서드에서의 thisconst person = { name: "Orangee", greet() { console.log(this.name); }};person.greet(); // "Orangee"객체에서 호출되었기 때문에 this는 person을 가리킴❌ 일반 함수에서의 this (주의!)function show() { console.log(this);}show(); // 브라우저에..

## 자바스크립트 배열 메서드 완전 정복자바스크립트를 배우다 보면 가장 많이 다루게 되는 게 바로 "배열"입니다. 그리고 배열을 다루기 위해 필수적으로 알아야 하는 것이 바로 배열 메서드들이죠. 이 포스팅에서는 대표적인 배열 메서드들을 예제와 함께 소개합니다.📌 forEach()배열을 순회하면서 각 요소에 대해 콜백 함수를 실행합니다.const fruits = ["🍎", "🍌", "🍇"];fruits.forEach((fruit, index) => { console.log(index, fruit);});🔄 map()배열의 각 요소를 변환하여 새로운 배열을 반환합니다.const numbers = [1, 2, 3];const doubled = numbers.map(num => num * 2);con..

## 자바스크립트 배열 메서드 완전 정복자바스크립트를 배우다 보면 가장 많이 다루게 되는 게 바로 "배열"입니다. 그리고 배열을 다루기 위해 필수적으로 알아야 하는 것이 바로 배열 메서드들이죠. 이 포스팅에서는 대표적인 배열 메서드들을 예제와 함께 소개합니다.📌 forEach()배열을 순회하면서 각 요소에 대해 콜백 함수를 실행합니다.const fruits = ["🍎", "🍌", "🍇"];fruits.forEach((fruit, index) => { console.log(index, fruit);});🔄 map()배열의 각 요소를 변환하여 새로운 배열을 반환합니다.const numbers = [1, 2, 3];const doubled = numbers.map(num => num * 2);con..

## 🔍 기본 개념: `sort()`란?자바스크립트에서 배열을 정렬할 때는 Array.prototype.sort() 메서드를 사용한다. 기본적으로는 문자열 기준의 정렬을 수행하며, 숫자 정렬을 위해서는 비교 함수(compare function)를 명시해야 한다.✨ 기본 정렬 예시const arr = [10, 5, 3, 8];arr.sort();console.log(arr); // [10, 3, 5, 8] - 문자열 기준 정렬기본 sort()는 배열 요소를 문자열로 변환한 뒤 유니코드 순서로 정렬하기 때문에 위처럼 예상과 다르게 정렬될 수 있다.🔧 숫자 정렬을 위한 compareFunctionconst arr = [10, 5, 3, 8];arr.sort((a, b) => a - b); // 오름차순co..

## 자바스크립트 배열 메서드 핵심 정리자바스크립트를 배우는 사람들이 가장 많이 검색하고 궁금해하는 주제 중 하나는 바로 배열 메서드이다. 그중에서도 map, filter, reduce는 자주 사용되지만 처음에는 헷갈리기 쉬운 함수들이다. 이번 포스팅에서는 이 세 가지 메서드를 깔끔하게 정리해본다.🔄 map - 배열의 각 요소를 변형const numbers = [1, 2, 3, 4];const doubled = numbers.map(num => num * 2);console.log(doubled); // [2, 4, 6, 8]설명: 원본 배열의 각 요소를 가공하여 새로운 배열을 반환함.주요 사용처: 숫자 계산, 객체 구조 변경, JSX 렌더링 등🚫 filter - 조건에 맞는 요소만 추출const n..

## 클로저(Closure)란?클로저는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하는 기능이다. 쉽게 말해, 함수 내부에서 외부 함수의 변수에 접근할 수 있는 기능을 의미한다.🧱 기본 구조 이해하기function outer() { let count = 0; return function inner() { count++; console.log(count); };}const counter = outer();counter(); // 1counter(); // 2inner 함수는 outer 함수의 count 변수에 계속 접근 가능하다.outer는 이미 실행이 끝났지만, count는 inner 함수 내부에서 살아있다.🎯 클로저의 주요 특징함수 선언 당시의 환경을..

## 클로저란 무엇인가?자바스크립트에서 클로저(Closure)는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다.간단히 말하면, 외부 함수의 변수에 접근할 수 있는 내부 함수를 의미한다.🔍 기본 예제function outer() { let count = 0; return function inner() { count++; console.log(count); };}const counter = outer();counter(); // 1counter(); // 2inner()는 outer()의 변수인 count에 접근 가능outer()는 이미 종료되었지만, count는 여전히 살아있음 → 이것이 클로저🧠 왜 클로저를 쓸까?데이터 은닉(캡슐화): 외부에서 직접 변수에 접근하지 못하게 막을 수 ..

## 이벤트 루프(Event Loop)란?자바스크립트는 단일 스레드(single-threaded) 언어이다. 이는 한 번에 한 작업만 실행할 수 있다는 뜻이다. 그럼에도 불구하고 우리가 자주 사용하는 setTimeout, fetch, addEventListener 같은 비동기 작업이 가능한 이유는 바로 이벤트 루프(Event Loop) 구조 덕분이다.📦 자바스크립트의 구성 요소Call Stack (호출 스택)Web APIs (브라우저 제공 기능)Callback Queue (콜백 큐)Event Loop (이벤트 루프)이 네 가지가 비동기 처리를 가능하게 만든다.🔁 이벤트 루프 동작 방식코드 실행 → Call Stack에 쌓여서 순차 실행됨비동기 함수 호출 → Web API로 전달됨 (예: setTime..