전체 글54 자바스크립트 this 자바스크립트에서 this 키워드는 현재 실행 컨텍스트의 객체를 참조한다 그러나 this가 가리키는 값은 함수가 호출되는 방식에 따라 달라진다 1. 전역 컨텍스트 전역 실행 컨텍스트에서 this는 전역 객체를 참조한다 브라우저에서는 window 객체가 전역 객체이며, Node.js에서는 global 객체가 된다 console.log(this === window); // 브라우저에서 true 2. 함수 컨텍스트 함수 내부에서 this의 값은 함수가 어떻게 호출되었는지에 따라 달라진다 일반 함수 호출: 기본적으로, 일반 함수에서 this는 전역 객체를 참조한다 엄격 모드('use strict')에서는 undefined가 된다 function show() { console.log(this); } show(); .. 2024. 3. 5. 자바스크립트 불변성 유지하려면? 자바스크립트에서 데이터의 불변성(Immutability)을 유지하는 것은 프로그램의 복잡성을 관리하고 예상치 못한 부작용을 방지하는 데 중요하다 불변성을 유지하면 함수나 컴포넌트가 예측 가능해지며, 디버깅이 용이해진다 다음은 자바스크립트에서 불변성을 유지하는 몇 가지 방법이다 1. 원시 데이터 타입 사용 원시 데이터 타입(예: Number, String, Boolean)은 불변적이다 이들은 변수에 할당된 값을 직접 변경할 수 없으며, 변경을 시도하면 새로운 값을 가진 새로운 변수가 생성된다 따라서, 원시 타입을 사용하는 것 자체가 불변성을 유지하는 방법이다 2. 객체와 배열의 불변성 유지 객체와 배열은 변경 가능한(mutable) 데이터 타입이므로, 이들의 불변성을 유지하기 위해서는 주의가 필요하다 객체.. 2024. 3. 5. 자바스크립트 깊은 복사 & 얕은 복사 자바스크립트에서 깊은 복사(Deep Copy)와 얕은 복사(Shallow Copy)는 객체를 복사할 때 중요한 개념이다 이 두 방법은 복사되는 객체의 참조 타입 속성이 어떻게 처리되는지에 따라 차이가 있다 얕은 복사 (Shallow Copy) 얕은 복사는 객체의 최상위 수준의 속성만 복사하는 방법이다 만약 속성 값이 기본 데이터 타입(예: String, Number)이라면, 해당 값을 직접 복사한다 하지만 속성 값이 객체나 배열과 같은 참조 데이터 타입이라면, 참조(메모리 주소)만 복사한다 이로 인해, 원본 객체와 복사된 객체가 동일한 참조 값을 공유하게 되므로, 한 객체에서 참조 타입 속성을 수정하면 다른 객체에도 영향을 미친다 예시: const original = { a: 1, b: { c: 2 } .. 2024. 3. 5. 자바스크립트의 프로토타입(Prototype) 자바스크립트의 프로토타입(Prototype)은 객체 지향 프로그래밍의 핵심 개념 중 하나다 프로토타입은 객체가 다른 객체의 속성과 메소드를 상속할 수 있게 해주는 메커니즘이다 이를 통해 자바스크립트는 프로토타입 기반 상속을 구현하며, 이는 클래스 기반 언어의 전통적인 상속과는 다른 방식이다 프로토타입의 작동 원리 프로토타입 체인(Prototype Chain): 자바스크립트에서 객체의 속성이나 메소드에 접근하려고 할 때, 해당 객체에 해당 속성이나 메소드가 없다면 자바스크립트는 객체의 프로토타입(즉, 상속받은 객체)에서 해당 속성이나 메소드를 찾는다 이 과정은 프로토타입 체인을 따라 상속 계층을 거슬러 올라가며 반복된다 최상위에 도달할 때까지 계속되며, 최상위에서도 찾지 못하면 undefined를 반환한다.. 2024. 3. 5. 자바스크립트 데이터 타입 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. 이전 1 2 3 4 5 6 다음
