코드/JavaScript 13

var, let, const 차이점과 일시적 사각지대(TDZ)

JavaScript에서 변수 호이스팅은 중요한 개념이며, 이때 var와 let/const는 서로 다르게 동작합니다.var의 호이스팅: undefined로 초기화var로 선언된 변수는 호이스팅되며, 실행 컨텍스트가 생성될 때 해당 변수는 메모리의 최상단으로 끌어올려져 (hoisting) undefined로 초기화됩니다. 이는 변수 선언이 코드 어디에 있든 간에 자바스크립트 엔진이 실행 컨텍스트의 생성 단계에서 미리 메모리에 할당하고 undefined 값을 부여하기 때문입니다.예시console.log(x); // undefinedvar x = 5;console.log(x); // 5실행 순서자바스크립트는 코드 실행 전 var x를 호이스팅하여 메모리에 등록하지만, 그 값은 할당되지 않고 undefined로 ..

코드/JavaScript 2024.10.15

실행컨텍스트와 호이스팅

실행 컨텍스트(Execution Context)란?실행 컨텍스트는 JavaScript 코드가 실행되는 환경입니다.코드가 실행될 때 변수, 함수, 객체가 어떻게 메모리에 할당되고, 그 순서는 어떻게 되는지를 결정하는 것이 실행 컨텍스트입니다.실행 컨텍스트의 종류JavaScript에는 두 가지 주요 실행 컨텍스트가 있습니다.글로벌 실행 컨텍스트(Global Execution Context): 자바스크립트가 처음 시작될 때 생성되는 전역 컨텍스트입니다. 브라우저에서는 window 객체가 글로벌 실행 컨텍스트의 일부입니다.함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성되며, 각 함수는 고유한 실행 컨텍스트를 가집니다.실행 컨텍스트 생성 단계실행 컨텍스트는 코드가..

코드/JavaScript 2024.10.15

RESTful API란?

RESTful API는 REST(Representational State Transfer) 아키텍처 스타일을 따르는 API를 의미한다.REST는 웹 서비스 디자인을 위한 아키텍처 원칙 및 패턴으로, 클라이언트와 서버 간의 상호 작용을 구조화된 방식으로 정의한다.RESTful API는 HTTP를 통해 데이터를 전송하며, 다음과 같은 특성을 가진다. REST의 핵심 개념자원(Resource)모든 것은 자원으로 표현된다.자원은 URI(Uniform Resource Identifier)로 식별된다.예: '/users', '/posts/1'HTTP 메서드자원에 대한 동작은 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 정의된다.'GET': 자원의 조회'POST': 자원의 생성'PUT':..

코드/JavaScript 2024.06.20

Promise와 Async

Promise와 Async자바스크립트에서 비동기 처리를 다루기 위한 두 가지 주요 패턴인 'Promise'와 'async/await'는 각각 고유한 특징과 사용 방법을 가지고 있다.이 두 패턴은 비동기 작업을 더 쉽게 관리할 수 있도록 도와주지만, 사용 방식과 코드의 가독성 측면에서 차이가 있다.Promise'Promise'는 비동기 작업의 완료 또는 실패를 처리하기 위한 객체이다.'Promise'는 비동기 작업이 완료된 후의 결과를 약속(promise)하고, 그 결과에 따라 'then' 또는 'catch' 메서드를 통해 처리할 수 있다.// Promise를 사용하는 예제function fetchData() { return new Promise((resolve, reject) => { set..

코드/JavaScript 2024.06.20

화살표 함수와 일반 함수의 차이점

화살표 함수와 일반 함수의 차이점자바스크립트에서 화살표 함수(Arrow Function)와 일반 함수(Regular Function)은 몇 가지의 차이점을 가지고 있다. 문법적 차이화살표 함수화살표 함수는 더 간결한 문법을 사용한다.const add = (a, b) => a + b; 일반 함수일반 함수는 'function' 키워드를 사용하여 정의한다.function add(a, b) { return a + b;} this 바인딩화살표 함수화살표 함수는 자신만의 this 바인딩을 가지지 않는다.대신, 화살표 함수는 자신이 정의된 위치의 'this' 값을 상속받는다.이를 렉시컬 스코핑(lexical scoping)이라고 한다.const obj = { value: 42, arrowFunctio..

코드/JavaScript 2024.06.19

호이스팅과 스코프

호이스팅과 스코프호이스팅(Hoisting)과 스코프(Scope)는 자바스크립트에서 중요한 개념으로 변수와 함수의 선언과 접근 가능성을 이해하는데 필수적이다. 이 두 개념은 서로 관련이 있지만, 각각 다르다. 스코프(Scope)스코프는 변수와 함수가 접근 가능한 범위를 정의한다.스코프는 크게 세 가지로 나눌 수 있다.전역 스코프(Global Scope)코드 어디서나 접근할 수 있는 변수와 함수이다.전역 스코프에 선언된 변수는 'window' 객체의 속성이 된다.var globalVar = "I am a global variable";function globalFunction() { console.log(globalVar); // I am a global variable} 함수 스코프(Function Sc..

코드/JavaScript 2024.06.19

let, var, const 기초

let, var, const 차이점변수를 선언하는데 사용되는 키워드이다.이들 간의 주요 차이점은 변수의 스코프, 재할당 가능성 그리고 호이스팅 방식에 있다.* 스코프(scope): 사전적 의미는 범위이고, 프로그래밍에서의 의미도 비슷한 개념으로 변수에 접근할 수 있는 범위로 재해석 하면 된다.* 호이스팅(hoisting): 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상  호이스팅과 스코프호이스팅과 스코프호이스팅(Hoisting)과 스코프(Scope)는 자바스크립트에서 중요한 개념으로 변수와 함수의 선언과 접근 가능성을 이해하는데 필수적이다. 이 두 개념은 서로 관련이 있지만, 각각jundev717.tistory.com va..

코드/JavaScript 2024.06.18

자바스크립트 클래스

들어가며자바스크립트는 프로토타입 기반 언어라서 '상속' 개념이 존재하지 않습니다.*본 블로그에 자바스크립트의 프로토타입을 정리한 게시글이 있습니다.이는 클래스 기반의 다른 언어에 익숙한 많은 개발자들을 혼란스럽게 했고, 자바스크립트에서는 클래스와 비슷하게 동작하게끔 흉내 내는 여러 기법들이 탄생했습니다. 이러한 니즈에 따라 결국 ES6에는 클래스 문법이 추가되었습니다. 클래스와 인스턴스의 개념 이해객체지향 프로그래밍에서 거의 반드시 등장하는 제1요소인 클래스라는 단어의 의미는 일반적으로 쓰이는 의미와 거의 흡사합니다.영어 사전에서 class는 "계급, 집단, 집합" 등으로 번역하는데, 프로그래밍 언어적으로도 이와 동일한 개념에서 접근하면 된다는 말입니다. 클래스의 개념을 이해하는건 정말 쉽습니다.* 객체..

코드/JavaScript 2024.05.29

자바스크립트 프로토타입

자바스크립트는 프로토타입 기반 언어입니다. 우리와 친숙한 클래스 기반 언어에서는 '상속'이라는 개념을 사용하지만 프로토타입 기반 언어에서는 어떤 객체를 원형(prototype)으로 삼고 이를 참조함으로써 상속과 비슷한 기능을 수행합니다. 유명한 프로그래밍 언어의 상당수가 클래스 기반인 것에 비교하면 프로토타입은 꽤나 독특한 개념이라 할 수 있습니다. 클래스 기반 언어에 익숙한 개발자라면 자바스크립트를 배척하는 이유로 프로토타입이 복잡하고 어렵다는 점을 들지만, 오히려 자바스크립트는 프로토타입이라는 개념을 제대로 이해하는 것만으로도 이미 숙련자 레벨에 도달할 수 있는 시야를 확보할 수 있는 셈이라고 합니다. 본 포스팅에서는 프로토타입에 대한 이해를 중점으로 글을 작성하고자 합니다. 프로토타입의 개념 이해c..

코드/JavaScript 2024.05.24

클로저

간혹 코딩을 하다 클로저(Closure)라는 단어를 보긴 했다만 직접적으로 이게 무엇을 위해서 어떤 원리로 작동하는지 공부해 본 건 처음이었습니다... 한 번 정독해서는 음,,, 이게 클로저구나,, 정도였고, 두 번째 정독할 때에는 아,, 이럴 때 이렇게 사용하면 되겠구나,, 라는 정도로 이해했습니다.완벽한 이해를 하고싶지만 뭐든 내가 직접 문제를 해결하고자 사용한 코드가 아니라면 개념 잡기가 힘들기 때문에 최소한의 이해를 했습니다. 클로저의 의미 및 원리 이해클로저(Closure)는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성이라고 합니다. 자바스크립트가 가지는 고유한 개념이 아니라서, 다양한 문헌에서 클로저를 다르게 정의하고 설명합니다.  다양한 문헌에서 클로저를 한 문장으로 요약해서 설명..

코드/JavaScript 2024.05.22