🍌 자바스크립트
-
실행 컨텍스트🍌 자바스크립트 2025. 9. 22. 22:29
🔍 실행 컨텍스트📖 코드가 실행되는 환경을 구성 🎯 역할식별자를 관리하는 스코프를 관리렉시컬 환경을 이용실행 순서를 관리하고 실행 순서를 보장실행 컨텍스트 스택을 이용실행컨텍스트는 언제 생성되는지 알기 위해서는 소스 코드의 종류를 알아야 합니다. 😶 4가지 타입의 소스코드와 이에 따라 생성되는 실행 컨텍스트전역 코드전역 실행 컨텍스트함수 코드함수 실행 컨텍스트eval 코드eval 실행 컨텍스트모듈 코드모듈 실행 컨텍스트 💡 실행 컨텍스트 생성 1️⃣ 작성한 소스코드는 자바스크립트 엔진의 생성 과정을 통해 실행 컨텍스트를 생성변수 선언, 함수 선언등을 위한 메모리 공간이 해당 컨텍스트 내에서 설정생성단계에서 호이스팅 발생 2️⃣ 자바스크립트 엔진의 실행 과정을 통해서 결과를 도출실행 컨텍스트가 ..
-
모듈 프로그래밍의 역사와 ESM🍌 자바스크립트 2025. 9. 13. 17:35
🔍 모듈(Module)?프로젝트 규모가 커지면서 Javascript 코드를 여러 파일과 폴더에 나누고 서로가 불러와 사용할 수 있도록 해주는 시스템의 필요성이 커졌습니다.JavaScript에서는 각 파일을 서로 다른 모듈로 생각해 각 모듈에서 변수나 함수를 공유하기 위해 이를 내보내고 불러올 수 있어야 합니다.사용하고 있는 모듈 시스템과 사용하려는 모듈이 어떤 시스템을 따르고 있는지에 따라 사용 방식이 달라집니다. 👍 모듈 장점1️⃣ 유지보수 용이모듈화가 잘 되어 있다면 의존성을 줄여 기능 개선이나 수정에 용이 2️⃣ 네임스페이스화전역스코프에 존재하는 변수명이 겹치는 경우가 있을 수 있다.모듈로 분리하면 모듈만의 네임스페이스를 가지기 때문에 이런 문제를 해결할 수 있습니다. 3️⃣ 재사용성같은 코드를..
-
자바스크립트 비동기와 이벤트 루프🍌 자바스크립트 2025. 7. 29. 00:43
🔍 동기와 비동기동기와 비동기는 작업의 실행 방식을 설명하는 개념요청한 작업에 대해 완료 여부 동기: 한 작업이 끝나야 다음 작업이 시작(순차적 처리)이전 작업이 끝날 때까지 다음 작업은 대기상태 비동기: 한 작업이 끝나기를 기다리지 않고 다음 작업을 실행할 수 있음이전 작업이 끝날 때까지 대기하지 않음 🏃 자바스크립트 런타임 환경 - 웹 브라우저 (Chrome) 구성 요소역할Call Stack함수 실행 순서를 저장하는 스택 (동기 코드 실행)Web APIs타이머, DOM, AJAX 등 브라우저 혹은 Node.js가 제공하는 비동기 기능Task QueueWeb API 완료 후 콜백이 대기하는 곳 (→ Call Stack이 비면 실행됨)Event LoopCall Stack이 비었는지 계속 확인하고 Ta..
-
🔍 함수와 클로저🍌 자바스크립트 2025. 7. 27. 22:31
⭐ 함수와 클로저항목함수클로저정의특정 작업을 수행하도록 정의된 코드의 묶음선언시 렉시컬 스코프을 기억하는 함수역할코드 재사용, 모듈화, 추상화 등외부 함수의 변수를 기억하고 유지할 수 있음형태function foo() { ... } 또는 () => { ... }외부 함수 내에서 선언된 함수이며 외부 변수에 접근할 수 있는 함수사용 예add(a, b) { return a + b; }function outer() { let x = 1; return function() { return x; }; } 📕 클로저(Closure)란?💡 클로저는 함수가 외부 스코프의 변수에 접근할 수 있는 기능즉, 함수가 선언될 당시의 스코프를 기억하고 있는 함수. 👍 장점👊 장점1. 데이터를 보존할 수 있다.클로저 함수는 ..
-
📒 Map, Set🍌 자바스크립트 2024. 5. 29. 00:49
🧩 Map메서드설명new Map()맵 생성map.set(key, value)key를 이용해 value 저장map.get(key)key에 해당하는 값 반환, key가 없다면 undefined 반환map.has(key)key가 존재하면 true, 존재하지 않는다면 false 반환map.delete(key)key에 해당하는 값을 삭제map.clear()맵 안의 모든 요소 제거map.size요소의 개수를 반환 let map = new Map();map.set('1', 'value1');map.set(1, 'value2');map.set(true, 'value3');console.log(map.get('1')); // value1console.log(map.get(1)); // value2console.log(..
-
📂 배열🍌 자바스크립트 2024. 5. 28. 21:11
💡 배열 만들기📍 배열 리터럴var arr = ["e1", "e2", "e3"]; 다양한 데이터 타입을 배열에 저장할 수 있다.var arr = ["beomsic", 26, [0, 1, 2]]; 📍 배열 생성자var arr = new Array(1, 2, 3);console.log(arr) // [ 1, 2, 3 ]var arr2 = new Array(10);console.log(arr2); // [ ]console.log(arr2.length); // 10배열 생성자에 인수를 하나만 넘겨주는 경우에는 그 인수의 값이 배열의 길이가 된다. 배열 길이length 속성을 이용해 배열의 길이를 알아낼 수 있다.var arr = ["test1", "test2"]arr.length; // 2 📒 배열 ..
-
자료형🍌 자바스크립트 2024. 5. 28. 13:48
🧩 선언JavaScript의 선언 방법은 3가지 이다. 키워드설명var변수를 선언, 동시에 값을 초기화let블록 스코프 지역 변수를 선언, 동시에 값을 초기화const블록 스코프 읽기 전용 상수를 선언 1️⃣ Var (function scope) var 문에서 변수에 초기 값을 지정하지 않는다면, 변수는 값이 설정될 때 까지 undefined 값을 가진다. 👀 함수 유효 범위어떤 함수 안에서 선언된 모든 변수는 그 함수 전체에 걸쳐 유효하다.변수가 선언되기 전에도 유효 Hoisting자바스크립트 코드는 함수 안에 모든 변수를 함수의 맨 위로 끌어올린 것처럼 동작한다.var foo = "boo";function test() { console.log(foo); // boo가 아닌 undefined을 ..