js18 Javascript - 얕은 복사, 깊은 복사 JS의 얕은 복사, 깊은 복사를 이해하기 위해선 우선 자바스크립트의 값에 대해 알아야한다.자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값NumberStringBooleanNullUndefined 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2 참조값ObjectSymbol 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다const a = {number: 1};let b = a;b.number = 2console.log(a); // {number: 2}console... 2025. 1. 14. Javascript - 이벤트 루프 Event Loop란? 단일 스레드에서 실행되는 비동기 작업을 처리하는 메커니즘이벤트 루프는 Call stack, Micro task queue, Macro task queue로 구성 JS Engine자바스크립트 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다.(그림의 왼쪽 영역)가장 유명한 것이 구글의 V8 Engine이다.자바스크립트는 단일 스레드 프로그래밍 언어인데, 이는 Call Stack이 하나 라는 의미이다.(멀티가 되지 않고, 하나씩 하나씩 처리한다는 의미!)Memory Heap : 메모리 할당이 일어나는 곳(ex, 우리가 프로그램에 선언한 변수, 함수 등이 담겨져 있음)Call Stack : 코드가 실행될 때 쌓이는 곳. stack 형태로 쌓임Stack(스택) : .. 2025. 1. 13. Javascript - Operator 암묵적 타입변환(= 타입 강제 변환)개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되는 현상// number + string 연산 경우"1" + 2; // '12'1 + "2"; // '12'// boolean + number 연산 경우1 + true; // 21 + false; // 1// number + null 연산 경우1 + null; // 1// number + undefined 연산 경우1 + undefined; // NaN ( 연산 불가능 )이 외에도 자바스크립트 연산을 하다보면, 예측하지 못하고 넘어갈 수 있는 암묵적 타입변환 케이스가 많다. 동등비교 vs 일치비교동등비교(loose equailty)와 일치비교(strict equality) 연산자는 엄현히 다.. 2025. 1. 4. Javascript - 데이터 타입 원시타입과 객체타입원시타입숫자타입(number): 숫자. 정수와 실수 구분없이 하나의 숫자타입만 존재문자열타입(string): 문자열불리언타입(boolean): 논리적 참, 거짓undefined타입: var키워드로 선언된 변수에 암묵적으로 할당되는 값null타입: 값이 없다는 것을 의도적으로 명시할 때 사용하는 값심벌타입(symbol): ES6에서 추가된 7번째 타입(다른 값과 중복되지 않는 유일무이한 값)객체타입: 원시타입을 제외한 모든 것 Symbol타입주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용심벌은 Symbol 함수를 호출해 생성한다.이 때 생성된 심벌 값은 외부에 노출되지 않는다.또한, 다른 값과 절대 중복되지 않는 유일무이한 값var key = Symbol(.. 2025. 1. 2. Javascript - Scope, Closure 클로저를 배우기 전에 스코프에 대한 개념부터 알아야 한다. Scope스코프는 사전적 의미로 ‘범위’를 뜻한다.JavaScript로 함수 작성 시, 중괄호 {}를 이용하여 함수의 범위를 작성한다.즉 여기서 말하는 스코프는 ‘코드가 영향을 미치는 범위’, ‘변수의 유효 범위’ 등으로 정의할 수 있다. 1. 스코프의 개념선언된 변수에 대해서 접근할 수 있는 유효한 범위를 의미한다. 만약, 변수가 해당 스코프에 존재하지 않다면 사용할 수 없다.계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만, 상위 스코프는 하위 스코프에 접근할 수 없다. 2. 스코프의 동작에 따른 구분스코프의 동작 별 구분은 스코프를 결정하는 방식에 따라서, 정적 스코프(혹은 렉시컬 스코프), 동적 스코프로 나뉜다.. 2024. 12. 23. Javascript - 이벤트 버블링, 캡쳐링 이벤트 버블링(Event Bubbling)이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말한다.즉, 한 요소에 이벤트가 발생되면 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파방식 버블링 예제 코드를 보자. DIV1 DIV2 DIV3 const divs = document.querySelectorAll("div");const clickEvent = (e) => { console.log(e.currentTarget.className);};divs.forEach((div) => {.. 2024. 12. 23. 이전 1 2 3 다음
