자바스크립트 (9) 썸네일형 리스트형 클래스 보호되어 있는 글입니다. 프로토타입(prototype) 프로토타입프로토타입은 객체가 가진 기본 속성과 메서드를 정의하는 객체로써 객체간의 상속을 구현하는데 사용된다.모든 자바스크립트 객체는 다른 객체로부터 속성과 메서드를 상속받을 수 있는 숨겨진 링크(프로토타입 체인)를 가지고 있다. 프로토타입의 구조와 개념어떤 생성자 함수(constructor)를 new 연산자와 함께 호출하면 constructor에서 정의된 내용을 바탕으로 새로운 instance가 생성된다.이때 instance에는 __proto__라는 constructor의 prototype 프로퍼티를 참조하는 프로퍼티가 자동으로 부여된다.// Constructor : 함수 객체이며, prototype 프로퍼티를 가짐function Person(name) { this.name = name;}// p.. 클로저 클로저함수가 자신이 생성될 때의 환경(스코프)을 기억하고 그 환경의 변수 함수 등에 접근할 수 있게 해주는 특성내부 함수에서 외부 함수의 변수에 접근할 수 있다.외부 함수의 실행이 끝난 후에도 내부 함수는 외부 함수의 변수를 기억한다.function outerFunction() { let outerVariable = '외부 변수'; function innerFunction() { console.log(outerVariable); // 외부 함수의 변수에 접근 가능 } return innerFunction;}const closure = outerFunction();closure(); // '외부 변수' 출력 내부함수를 외부로 전달하는 방법1. 함수 반환.. 콜백함수 콜백함수다른 함수에 인자로 전달되어 특정 시점에 호출되는 함수함수 호출, 인자, 실행 시점에 대한 제어권을 다른 함수에게 위임한다.비동기적인 작업을 처리하는데 주로 사용된다.Ajax 요청 : 웹 애플리케이션에서 서버로부터 데이터를 비동기적으로 가져올 때 사용타이머 : setTimeout이나 setInterval과 같은 타이머 함수에서 지정된 시간 후에 실행될 코드를 콜백함수로 전달이벤트 핸들링 : DOM 요소의 이벤트 처리파일 읽기 / 쓰기 : Node.js에서 파일 시스템 작업을 수행할 때 사용함수의 동작을 동적으로 변경 제어권 위임1. 호출시점콜백함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다.function setTimer(callback) { setTimeout(.. this this자바스크립트에서의 this 는 현재 실행중인 컨텍스트(객체)를 참조하는 키워드로 함수나 메서드가 호출되는 방식에 따라 그 참조값이 달라진다. this 의 동작 방식1. 전역 범위에서의 thisconsole.log(this === window); // 브라우저 환경 - true전역 범위에서 this 는 전역 객체를 가리킨다.브라우저 - window / Node.js - global 2. 일반 함수 호출function showThis() { console.log(this);}showThis(); // window or global일반함수에서 this 는 기본적으로 전역 객체를 참조한다.메서드의 내부함수에서도 동일함strict 모드에서는 undefined 3. 메서드 호출const obj = {.. 실행컨텍스트(Execution Context) 실행 컨텍스트(Execution Context)자바스크립트 코드가 실행되는 환경코드가 실행될 때 필요한 모든 정보를 담고 있는 추상적인 컨테이너 실행 컨텍스트의 구성 요소JavaScript 를 실행하려면 컴파일과 실행이라는 두 단계가 필요하다.JS 코드가 컴파일되면 실행 컨텍스트가 생성되고, 실행 컨텍스트가 준비되면 실행 단계가 시작된다.컴파일 단계 (Compile)실행 단계 (Excution)변수와 함수 선언실행 컨텍스트 생성변수 환경 초기화호이스팅변수 할당함수 실행코드를 줄 단위로 실행변수 환경 업데이트 ⚠︎ 주의할 점같은 이름의 함수와 변수가 있을 경우 함수가 우선된다.조건문 내부의 변수 선언도 컴파일 단계에서 처리된다. 실행컨텍스트의 주요 4가지 구성요소Variable environmentLexi.. 얕은복사와 깊은복사, structuredClone() 보통 객체를 복사할때 내부의 모든 값 까지 복사될거라 생각하지만 실제로는 얕은 복사가 수행되어 사본을 바꾸면 원본도 바뀌고, 원본을 바꾸면 사본도 바뀌는 불상사가 발생할 수 있다.이런 현상이 발생하지 않으려면 ? → 불변 객체로 복사하자객체를 복사하는 방법에 대해 찾아보면서 얕은 복사와 깊은 복사를 좀 더 자세하게 정리하고자 한다.얕은 복사(Shallow Copy)바로 아래 단계의 값만 복사하는 방법(객체의 1차원 수준의 값) 얕은 복사 방법 ① Object.assign() 메서드const original = { a: 1, b: { c: 2 } };const shallowCopy = Object.assign({}, original);shallowCopy.b.c = 3;console.log(origina.. 스택(Stack)과 힙(Heap) 스택과 힙 스택(Stack)정적으로 할당되는 메모리 영역기본형의 데이터와 참조 변수의 주소값이 저장됨순서대로 메모리가 쌓이는 구조로 LIFO(Last In First Out)크기가 고정되어 있어 메모리 관리가 빠르고 효율적 힙(Heap)동적으로 할당되는 메모리 영역참조형의 데이터가 저장되는 공간(객체, 배열 등)크기가 동적으로 변할 수 있어 큰 데이터를 저장하기에 적합 스택과 힙의 주요 차이점 스택(Stack)힙(Heap)메모리 관리 방식자동 메모리 관리, LIFO(Last In First Out) 구조수동/자동(가비지 컬렉션) 메모리 관리, 비순차적 할당성능매우 빠른 메모리 할당과 접근상대적으로 느린 메모리 할당과 접근생명주기함수 호출과 함께 생성, 종료와 함께 제거프로그래머가 명시적으로 해제하거나 가.. 이전 1 2 다음
