본문 바로가기

분류 전체보기54

자바스크립트 데이터 타입 JavaScript는 다양한 데이터 타입을 지원하며, 크게 원시 타입(Primitive types)과 객체 타입(Object types)으로 분류할 수 있다 이러한 데이터 타입들은 데이터를 저장하고 조작하는 방법을 결정한다 JavaScript의 주요 데이터 타입들은, 원시 타입 (Primitive Types) 원시 타입은 불변적(immutable)인 데이터 타입으로, 직접적으로 값을 변경할 수 없고, 새로운 값을 할당하려면 새로운 메모리 공간에 그 값을 저장하고 해당 변수의 참조를 변경해야 한다 원시 타입에는 다음과 같은 타입들이 있다: Number JavaScript에서 숫자를 표현하는 타입 정수 및 부동소수점 숫자를 포함 예를 들어, 42, 3.14 등 String 텍스트 데이터를 나타내며, 작은따옴.. 2024. 3. 5.
자바스크립트 형 변환 자바스크립트의 형 변환(Type Conversion)은 변수나 값을 한 데이터 타입에서 다른 데이터 타입으로 변경하는 과정을 말한다 자바스크립트는 동적 타입 언어이기 때문에, 때로는 자동으로(암시적 형 변환) 타입을 변환하고, 때로는 개발자가 명시적으로 타입을 변환해야 한다(명시적 형 변환) 암시적 형 변환 (Implicit Type Conversion) 암시적 형 변환, 또는 타입 강제 변환(Type Coercion)은 자바스크립트 엔진이 예상되는 데이터 타입이 아닌 경우 자동으로 값의 타입을 변환하는 것을 말한다 이러한 변환은 주로 연산자를 사용할 때 발생한다 예시: let result; // 숫자와 문자열의 덧셈 result = '3' + 2; // '32' 문자열이 됨 result = '3' - .. 2024. 3. 5.
실행 컨텍스트란 실행 컨텍스트(Execution Context)는 JavaScript 코드가 평가되고 실행되는 환경의 추상적인 개념이다 실행 컨텍스트는 코드가 실행되기 위해 필요한 모든 정보를 담고 있으며, JavaScript 엔진이 스크립트를 실행할 때 코드의 실행 순서를 관리하고 변수 및 함수의 스코프를 결정하는 데 사용된다 JavaScript에서 실행 컨텍스트는 크게 세 가지 유형으로 분류된다 전역 실행 컨텍스트(Global Execution Context) 코드가 실행되기 시작할 때 JavaScript 엔진에 의해 생성되는 기본 컨텍스트 이는 전역 변수와 함수를 포함하며, 스크립트가 로드될 때 단 하나만 생성된다 함수 실행 컨텍스트(Function Execution Context) 함수가 호출될 때마다 생성된다 .. 2024. 3. 4.
렉시컬 환경이란 렉시컬 환경(Lexical Environment)은 JavaScript에서 매우 중요한 개념 중 하나로, 변수나 함수를 어디서 어떻게 접근할 수 있는지를 결정한다 이 개념은 스코프(Scope), 클로저(Closure), 호이스팅(Hoisting) 등 JavaScript의 여러 중요한 동작 원리를 이해하는 데 필수다 렉시컬 환경의 구성 렉시컬 환경은 다음 두 가지 주요 구성 요소로 이루어져 있다 환경 레코드(Environment Record) 현재 컨텍스트(Context)에 있는 식별자(변수, 함수 선언 등)의 모든 선언을 저장하는 곳 이는 코드 내에서 선언된 변수나 함수에 대한 정보를 담고 있다 외부 렉시컬 환경 참조(Outer Lexical Environment Reference) 외부 환경, 즉 상위.. 2024. 3. 4.
함수 선언형과 함수 표현식의 차이 JavaScript에서 함수를 만들기 위해 사용할 수 있는 두 가지 주요 방법이 있다 함수 선언(Function Declarations)과 함수 표현식(Function Expressions) 이 두 방식은 비슷해 보일 수 있지만, 몇 가지 중요한 차이점이 있다 함수 선언(Function Declarations) 함수 선언은 function 키워드 다음에 함수의 이름이 오는 형태다 함수 선언은 호이스팅(Hoisting)되므로, 함수가 정의되기 전에도 호출할 수 있다 예시: // 함수 선언 function sayHello() { console.log("Hello!"); } // 함수 호출 sayHello(); // "Hello!" 출력 특징: 호이스팅 함수 선언은 코드의 실행 전에 JavaScript 엔진에.. 2024. 3. 4.
var, let, const 차이 JavaScript에서 변수를 선언하는 방법으로 var, let, const 세 가지 키워드가 있다 각 키워드는 변수의 유효 범위(scope), 재선언(redeclaration), 재할당(reassignment) 측면에서 서로 다른 특징을 가지고 있다 이들의 차이점을 이해하는 것은 안정적이고 예측 가능한 코드를 작성하는 데 중요하다 1. var 유효 범위 함수 레벨 스코프(function-level scope) var로 선언된 변수는 선언된 함수의 전체에서 유효하다 함수 외부에서 선언된 경우 전역 변수가 된다 재선언 가능 같은 스코프 내에서 var를 사용하여 변수를 여러 번 선언할 수 있다 재할당 가능 선언된 변수에 새로운 값을 할당할 수 있다 예시: var greeting = "Hello, world!.. 2024. 3. 4.
콜백 지옥 해결법 - Promise 와 async/await 콜백 지옥(Callback Hell)은 비동기 JavaScript 코드를 작성할 때 자주 발생하는 문제다 이는 여러 중첩된 콜백 함수가 가독성을 떨어뜨리고 코드 유지 관리를 어렵게 만든다 JavaScript에는 이 문제를 해결하는 두 가지 기능, Promise와 async/await가 있다 이들을 활용하면 코드를 훨씬 깔끔하게 유지할 수 있다 Promise를 사용한 비동기 통신 Promise는 비동기 작업을 위한 대표적인 해결책으로, 콜백 대신 사용할 수 있다 Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)를 처리하는 객체다 예시: 파일 읽기 작업 콜백 방식 fs.readFile('file1.txt', 'utf8', function(err, data) { if (err) { .. 2024. 3. 4.
Promise와 Callback 차이 JavaScript에서 비동기 작업을 처리하는 데 사용되는 두 가지 중요한 패턴은 콜백(Callback)과 프로미스(Promise)다 이 두 방식은 비동기 로직을 처리하는 방법과 관련된 개념적, 구현적 차이를 가지고 있다 cf) 비동기 작업을 처리한다라는 것은 프로그램의 실행 흐름을 멈추지 않고, 어떤 작업(보통 I/O 작업, 네트워크 요청 등)이 백그라운드에서 수행되는 동안 다른 코드의 실행을 계속 진행할 수 있도록 하는 것을 의미 즉, 특정 작업의 완료를 기다리는 동안 프로그램이 블로킹되지 않고 다른 작업을 수행할 수 있음 JavaScript에서 비동기 처리의 필요성은 주로 I/O 작업, 네트워크 요청, 타이머 설정 등 프로그램의 실행 흐름을 블록하지 않으면서도 특정 작업을 수행해야 할 때 발생한다 .. 2024. 3. 4.
비동기 함수 비동기 함수는 자바스크립트에만 있는 개념은 아니지만 특히 웹 개발에 쓰이는 자바스크립트에서 매우 중요한 역할을 한다 비동기 함수는 지금 당장 처리하지 않고 나중에 완료될 작업을 수행한다 그래서 함수의 실행이 끝난 후에도 그 결과가 바로 반환되지 않고 완료되는 데 시간이 걸릴 때 사용된다 예를 들어 파일 읽기, 네트워크 요청 등 만약 위와 같이 시간이 걸리는 작업을 동기적으로 처리한다면 작업이 완료될 때까지 프로그램은 멈추게 된다 이는 사용자 경험을 저하시키고, 특히 웹 애플리케이션에서 페이지가 멈춘 것처럼 보일 수 있다 비동기 함수를 사용하면 이런 지연이 발생하는 작업을 백그라운드에서 처리하고 작업이 완료되면 결과를 처리할 수 있게 된다 이를 통해 애플리케이션이 멈추지 않고 다른 작업을 계속 수행할 수 .. 2024. 3. 2.
자바스크립트 클로저 Closure 클로저 함수와 그 함수가 선언된 렉시컬 환경의 조합 어떤 함수가 선언된 당시의 환경을 기억하여, 함수가 실행될 때에도 그 환경에 접근할 수 있게 해준다 데이터를 은닉하고 캡슐화하는 데 유용하게 사용됨 function 외부함수(외부변수) { return function 내부함수() { console.log(외부변수); }; } const 예제 = 외부함수('안녕하세요!'); 예제(); // 콘솔에는 '안녕하세요!'가 출력됩니다. 예제 코드에서 외부함수는 내부함수를 생성하고 반환한다 내부함수는 외부함수의 매개변수인 외부변수에 접근할 수 있다 이처럼 내부함수가 자신이 생성될 때의 환경(여기서는 외부변수를 포함하는 환경)을 기억하는 것이 클로저의 핵심 개념이다 예제()를 호출하면 외부함수의 실행 컨텍스트가 이미.. 2024. 3. 2.