'얕은 비교(shallow comparison)'와 '깊은 비교(deep comparison)'는 프로그래밍에서 두 값(특히 객체나 배열과 같은 복잡한 자료형)이 같은지 비교하는 방식의 차이를 나타낸다.1. 얕은 비교 (Shallow Comparison)정의: 두 값의 메모리 주소를 비교한다.동작 방식:원시 자료형(숫자, 문자열, 불리언 등)의 경우, 실제 값을 비교한다.객체나 배열과 같은 참조 자료형의 경우, 메모리 주소(참조)가 같은지 비교한다. 즉, 두 변수가 같은 객체를 가리키는지 확인한다.특징:비교 속도가 빠르다.객체나 배열의 내부 값은 비교하지 않는다.두 객체의 내부 값이 같더라도 메모리 주소가 다르면 다르다고 판단한다.사용 예시: JavaScript에서 '===' 연산자나 Object.is(..

자바스크립트에서 undefined와 null은 둘 다 값이 없음을 나타낸다. undefined: 변수가 선언되었지만 값이 할당되지 않아 '값이 정의되지 않음'을 의미한다.null: 변수에 '값이 없음'을 명시적으로 할당하여 '값이 없는 상태'를 나타낸다.'undefined'는 시스템이 자동으로 할당하고, 'null'은 개발자가 의도적으로 할당한다.

숫자, 문자열 같은 원시타입의 데이터와 다르게 배열이나 객체같은 경우엔 하나의 변수에 많은 데이터가 담기다 보니까 코드가 길어지며 지저분해 질 수 있다. 그럴 때엔 깔끔한 코드, 즉 클린 코드를 만들어서 사용해야 하는데 이미 변수를 참조하는 코드가 있거나 하는 경우엔 코드 자체를 수정하는 것은 어려운 일이다.때문에 그런 경우에도 문제 없이 클린  클린 코드(Clean Code)를 만들기 위해 사용하는 방법 중 하나가 구조 분해 할당이다.구조 분해 할당(Destructuring Assignment)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.분해 할당이라는 말 때문에 원본은 찢어서 재배열 하는 것처럼 보일 수 있다. 하지만 사실 분해보다는 추출에 가깝..

내부 함수가 외부 함수의 변수 환경(스코프)을 기억하고, 외부 함수가 종료된 후에도 해당 변수를 사용할 수 있도록 한 기능이다. closure라는 단어에서 처럼 폐쇄 환경에 대한 개념이다.기본적으로 함수는 외부의 변수를 받아서 실행되지만 함수 내부에 또다른 함수를 정의하는 경우가 있다.이런 함수를 중첩 함수(nested function)라고 하는데 구조는 대강 다음과 같다.function outerFunction(x) { function innerFunction(y) { }}이렇게 내부 함수 입장에선 외부 함수의 스코프{}로 인해서 폐쇄된 환경이 되기 때문에 클로저라 부른다. 뭐 그렇다고 저런 모양 자체를 클로저라고 하는 것은 아니고 클로저란 저런 폐쇄 환경에서 내부 함수에 사용되는 기능에 대한 정의..

이벤트 루프는 자바스크립트와 같은 단일 스레드 환경에서 비동기 작업을 효율적으로 처리하기 위한 핵심 메커니즘이다. 쉽게 말해, 마치 교통 정리와 같이 작업들이 순서대로 처리될 수 있도록 관리하는 역할을 한다. 동기 vs 비동기동기와 비동기를 나누는 핵심 기준은 '작업의 완료와 대기'이다. 동기는 특정 작업이 있다면 무조건 순서대로 진행한다. 작업 A와 B가 있다면 무조건 작업 A가 완료되야 작업 B를 진행한다. A가 오래걸리거나 아예 작업이 멈춰있어도 B를 진행할 수 없다. A가 완료 될때까지 무조건 기다린다.하지만비동기는 작업 A의 완료를 기다리지 않고 작업 B를 진행할 수 있다. 작업 A가 오래걸리든 멈춰있든, 아주 빠르든 아무런 관계 없이 작업 B를 진행할 수 있다. 때문에 동기는 파일을 다운로드 ..

변수는 데이터 그 자체가 아니다.변수는 메모리 상의 특정 위치를 가리키는 이름표와 같다.이 이름표는 데이터가 저장된 메모리 주소를 담고 있으며, 이 주소를 통해 데이터에 접근할 수 있다.  변수와 데이터의 관계:원시 타입 (Primitive Types):string, number, boolean, null, undefined, symbol, bigint과 같은 원시 타입의 경우, 변수는 값 자체를 저장하는 것처럼 보일 수 있습니다.하지만 실제로는 변수가 값의 메모리 주소를 저장하고, 이 주소를 통해 값에 접근합니다.객체 타입 (Object Types):object, array, function과 같은 객체 타입의 경우, 변수는 객체 자체를 저장하는 것이 아니라 객체가 저장된 메모리 주소를 저장합니다.변수..

data- 속성 (Data Attribute)HTML 요소에 사용자 정의 데이터를 저장하기 위한 속성입니다.data- 접두사로 시작하며, 브라우저는 이 접두사를 통해 사용자 정의 속성임을 인식합니다.HTML 요소와 데이터를 연결하거나, JavaScript 코드의 복잡성을 줄이는 데 사용됩니다.CSS 속성 선택자를 사용하여 스타일을 적용할 수 있습니다.data-target-id와 같이 하이픈(-)으로 구분된 속성 이름은 JavaScript에서 dataset 속성을 통해 접근할 때 카멜 케이스로 변환됩니다. (예: element.dataset.targetId)dataset 속성HTML 요소의 모든 data-* 속성을 키-값 쌍으로 갖는 DOMStringMap 객체를 반환하는 JavaScript 속성입니다.d..

자바스크립트 이벤트 위임(Event Delegation)은 하위 요소들에 각각 이벤트 핸들러를 할당하는 대신, 상위 요소에 하나의 이벤트 핸들러를 할당하여 하위 요소들의 이벤트를 처리하는 방식이다. 예를 들어 매니저와 직원들이 있는 식당이 있다면 기존에는 직원들이 각각 주문을 받고 서빙까지 했다면 이제는 매니저가 주문을 받고 직원들에게 서빙을 지시하는 상황이라고 할 수 있다. 이벤트 위임의 개념상위 요소에서 하위 요소의 이벤트를 처리각 요소에 개별적인 이벤트 핸들러를 할당하는 대신, 상위 요소에 하나의 이벤트 핸들러를 할당하여 하위 요소의 이벤트를 처리한다.이벤트 버블링 활용이벤트 위임은 이벤트 버블링 현상을 이용하여 상위 요소에서 하위 요소의 이벤트를 감지하고 처리한다.2. 이벤트 위임의 작동 방식상위..

메모리란 무엇인가?메모리는 우리가 흔히 말하는 램 카드 (RAM)의 용량이라고 할 수 있다. 8기가(GB) 렘, 16기가 렘 하는 것들은 해당 렘 카드가 가지는 최대 메모리의 용량이다.작업관리자를 열면 보이는 메모리가 램 카드의 사용량이다.프로그램은 램이라는 임시 기억장치에 프로그램 구동에 필요한 메모리를 할당하는데 자바 스크립트도 마찬가지로 프로그램이다 보니까 메모리에 데이터를 할당하게 된다. 자바 스크립트의 메모리 구조는 대강 다음과 같다. 여기서 낮은 주소와 높은 주소가 정해져있는데 실제로 메모리를 할당할 수 있는 공간이 물리적인 형태로 정해져 있는 것은 아니고 전체 메모리 용량을 가상의 주소로 나눠둔 것이다.예를 들어 1번지와 10번지라고 한다면 1번지가 낮은 주소, 10번지가 높은 주소가 된다...

이벤트 버블링은 웹 개발에서 이벤트가 발생하는 방식 중 하나이다. 특정 요소에서 이벤트가 발생했을 때, 그 이벤트가 해당 요소의 상위 요소들로 차례대로 전달되는 현상을 말한다. 마치 물방울이 아래에서 위로 올라가는 모습과 비슷하다고 하여 '버블링(bubbling)'이라는 이름이 붙었다.이벤트 버블링의 작동 방식이벤트 발생: 가장 안쪽 요소에서 이벤트가 발생한다. 예를 들어, 버튼을 클릭하면 버튼 요소에서 클릭 이벤트가 발생한다.이벤트 전파: 발생한 이벤트는 해당 요소의 부모 요소로 전달됩니다. 부모 요소에도 동일한 이벤트에 대한 이벤트 핸들러가 있다면 실행됩니다.핸들러 있음: 핸들러를 실행하고 다음 상위 요소로 이벤트를 전달합니다.들러 없음: 아무런 반응 없이 다음 상위 요소로 이벤트를 전달합니다.상위 ..