이 글에서는 JavaScript의 프로토타입 기반 객체 생성과 상속 구조에 대해 배운 내용을 공유합니다.Prototype상속: Prototype Chain회고Prototype객체 생성 시 기본적으로 상속받는 속성과 메서드의 집합Java 클래스는 new 키워드로 인스턴스화를 수행할 때, 실제 객체가 생성됩니다.반면 JS 엔진은 클래스 선언 시, 객체 간 공통 기능 재사용을 위한 프로토타입 객체를 생성합니다.function Member(name) { // 클래스 선언 시 프로토타입 객체 생성! this.name = name;}console.log(Member.prototype) // 객체를 생성하지 않아도 프로토타입 객체는 호출 가능/*{ constructor: f Member(name), ..

이 글에서는 JavaScript의 Scope를 중심으로 전역 / 함수 / 블록 스코프의 차이를 살펴보고, var와 let/const 키워드가 스코프를 어떻게 결정하는 지 학습하고, 서로 다른 스코프에서 발생하는 오류를 해결하는 방법을 공유합니다.Scope전역 스코프 (Global Scope)함수 스코프 (Function Scope)블록 스코프 (Block Scope)스코프 문제 코드 예시회고Scope변수/함수에 접근할 수 있는 범위JS 엔진은 어떤 변수를 찾을 때, 전체 코드를 탐색하는 것이 아닌 정해진 규칙(ex: 스코프)에 따라 탐색합니다.[ Scope 사용 이유 ]변수 충돌 방지 : 서로 다른 스코프에서 동일한 이름의 변수를 독립적으로 사용할 수 있습니다.메모리 효율성 : 유효하지 않은 스코프가 메..

이 글에서는 JavaScript의 Execution Context(실행 컨텍스트)를 중심으로, 전역 / 함수 / 블록 단위 코드가 실행될 때 JS 엔진이 어떤 환경을 생성하고, 변수·함수·this 값을 관리하는지 학습한 내용을 공유합니다.Execution Context생성 규칙 및 구조동작 방식 + 코드 예시블록 스코프에서의 함수 선언회고Execution Context“코드 실행에 필요한 환경 정보”를 모아둔 “객체”JS에서는 코드 실행에 필요한 환경 정보(스코프, 변수, this 등)를 저장하는 내부 객체를 생성합니다.생성된 실행 컨텍스트는 코드의 환경과 순서를 보장하기 위해 CallStack에 쌓아 올린 후 실행됩니다.예측 가능한 코드를 작성, 디버깅 능력 향상, 무분별한 전역 변수 사용 방지를 위해..

이 글에서는 JavaScript의 Callback함수의 Callback Hell문제를 해결하기 위한 방법과, 더욱 명확한 예외 처리 방법은 없는지 알아보고자 Promise에 대해 학습하고 정리한 내용을 공유합니다. Promise사용 방법Promise의 상태Promise ChainPromise CombinatorsPromise Hell / Nested Promise회고Promise비동기 작업의 결과를 명확하게 처리할 수 있도록 도와주는 객체여러 비동기 작업을 체이닝(Chaining)으로 구성해 콜백 지옥(CallBack Hell)을 방지하고 유지보수성을 높일 수 있습니다.Promise.all() 로 병렬 비동기 처리를 할 수 있습니다..then(), .catch() 등을 통해 비동기 작업 결과를 명확히 처..

이 글에서는 JavaScript의 비동기 작업 처리를 위한 방법 중 CallBack 함수에 대해 알아보고, 사용 방법과 특징들에 대해 정리한 내용을 공유합니다.비동기 작업 처리 방법CallBack FunctionCallback Hell / Pyramid of Doom회고비동기 작업 처리 방법JS에서 논블로킹 + 비동기 처리를 위해서는 아래 3가지 방법을 사용할 수 있습니다.CallBackPromiseAsync / AwaitCallBack Function다른 함수의 인자로 전달되어 실행되는 함수콜백 함수는 함수의 정의 방식이 아닌, 실행 시점에 따라 동기/비동기 콜백으로 분류되며, 일반적으로 비동기 콜백을 많이 사용합니다. [ 동기 콜백 ]msg_list = ["hello", "world"]function..

이번 글에서는 JavaScript의 외부 작업 수행 간 작업 위임 및 결과 처리 방식, 싱글스레드 JS엔진이 논블로킹+비동기 작업을 처리하는 방법 및 작업의 우선순위 결정 방식에 대해 학습하고 정리한 글을 공유합니다.입출력 모델작업 완료 처리 모델JS의 기반 모델싱글스레드 JS 엔진이 비동기를 처리하는 방법TaskQueue, MicrotaskQueue의 실행 우선 순위회고입출력 모델[ 블로킹(Blocking) ]작업 위임과 함께 제어권을 넘겨, 작업이 끝날 때 까지 스레드가 멈춰 대기하는 방식현재 스레드의 제어권을 넘김으로써 작업의 순차적 실행이 보장되며, 제어권을 위임받은 스레드의 작업 종료까지 현재 스레드는 멈춘 상태로 대기합니다.프로그램 실행 흐름 이해와 디버깅이 용이합니다. [ 논블로킹(Non-B..

이 글에서는 JavaScript의 일급 함수(First-Class Function)와 고차 함수 생성 및 동작 원리 등에 대해 학습한 내용을 정리하고 공유합니다.일급 함수(First-Class Function)일급 시민(First class citizen)사용 방법정리회고일급 함수(First-Class Function)일급 시민(First-Class Citizen)으로 취급되어, 변수처럼 사용할 수 있는 함수JS의 함수는 일급 시민으로 취급되며 변수처럼 사용할 수 있습니다.const run = () => console.log("run!"); // 함수를 값으로 할당run(); // 값으로 할당된 함수 실행이는 아래와 같은 이점이 있습니다.재사용성 향상 & 유연한 함수 처리: 함수를 변수에 저장하며, 중복..

이 글에서는 JavaScript의 순수 함수(Pure Function)의 결정적 특성(Deterministic)과 참조 투명성, 부수 효과의 문제점 등을 학습 후 정리한 내용을 공유합니다.순수 함수참조 투명성부수 효과(Side-Effects)의 문제점정리회고순수 함수 (Pure Function)동일 입력에 동일 결과를 반환하며, 부수 효과가 없는 함수예측 가능하도록 동작하는 결정적(Deterministic)함수로, 구성요소들이명확한 구성 요소 : 파라미터(입력), 로직(처리), 반환(출력)이 명확하게 정의되어 있어야 합니다.부수 효과 없음(No Side-Effects) : 함수 외부의 상태를 변경하지도, 외부에 의존하지도 않아야 합니다.일반적으로 외부 상태에 의존하지 않는 결정적 동작 보장을 위해 순수함..

이번 글에서는 이전에 학습했던 함수형 프로그래밍 패러다임에 대한 탐구를 바탕으로 정리한 자바스크립트에서 함수를 정의하고 다루는 여러 방법을 공유합니다.Function함수 선언문(Functional Declearation)함수 표현식(Functional Expression)화살표 함수(Arrow Function)구조 분해 할당(Destructuring Assignment)Function재사용하기 위한 코드 집합JS에서는 여러 명령을 함수라는 단위로 묶고 이름을 부여할 수 있습니다.코드의 재사용성이 높아지며, 중복되는 코드를 줄일 수 있어 유지 보수성이 증가합니다.[ JS의 함수 작성 방법 ]아래의 함수 작성 방식은 문법적 차이 뿐 아니라 내부 동작에도 차이를 가지고 있습니다.함수 선언문(Functional..

이 글에서는 JavaScript의 Namespace에 대한 개요와 구현 방식과 은닉 방안을 정리한 글 입니다.Namespace구현 방법모듈 패턴과 IIFE을 활용한 네임스페이스 은닉Namespace식별자(변수/함수 명 등)가 충돌하지 않도록 그룹화 하는 방법식별자가 중복될 경우 추가적인 식별자가 필요하며, 네임스페이스는 식별자들을 그룹화해 문제를 해결할 수 있습니다. 관련된 기능과 데이터를 그룹화 할 수 있으며, 유지보수성을 향상시킬 수 있습니다.구현 방법JS에는 C++의 namepsace와 같은 키워드가 없으며, 주로 객체를 이용해 네임스페이스를 구현합니다.엔티티를 전체를 포함하는 객체를 선언함으로써, 네임스페이스 처럼 사용할 수 있습니다.const 네임스페이스명 = { 전역데이터: 값, 메서드명:..