dev_H dev_H

버블링, 캡쳐링, 이벤트 위임 버블링 버블링이란? 안쪽에 있는 자식 요소에서 시작해 부모 요소로 거슬러 올라가며 이벤트가 발생하는 것을 버블링이라고 함. 모든 이벤트는 버블링 됨(default) focus와 같이 버블링 되지 않는 몇몇의 이벤트를 제외하고는 대부분의 이벤트는 버블링이 됨 버블링 예시 FORM DIV P 가장 안쪽에 위치한 p 태그를 클릭하면 아래와 같이 작동함 p 태그의 onClick 핸들러가 동작함 바깥 태그인 div의 onClick 핸들러가 동작함 그 위의 태그인 form에 할당된 onClick 핸들러가 동작함 document 객체(DOM tree의 가장 최상위 노드(객체))를 만날 때까지 각 요소에 할당된 onClick 핸들러가 동작함 => 따라서 p만 눌렀을 뿐인데 3개의 aler..

얕은 복사, 깊은 복사 얕은 복사와 깊은 복사에 대해서 이해하기 전 알아야 할 것들 데이터 타입, 메모리 할당 데이터 타입에는 기본형 데이터와 참조형 데이터가 있음 기본형 데이터 타입(원시 데이터) string number boolean null undefined symbol 기본형 데이터들은 모두 불변값임. 예시 // 예시1 var a = 'abc'; a += 'def'; ---- // 예시2 var b = 5; var c = 5 b = 7 첫 번째 변수 a에 문자열 'abc'를 할당했다가 'def'를 추가하면 기존의 'abc'가 'abcdef'로 바뀌는 게 아니라 새로운 문자열을 데이터 영역에 만들고 그 주소를 변수 a에 저장함 -> 'abc'와 'abcdef'는 완전히 다른 별개의 데이터임 두 번째..

콜백함수, 비동기 콜백함수 const example = (cb) => { setTimeout(() => { console.log("비동기 함수 완료"); }, 2000); }; console.log("비동기함수 호출"); example(() => { console.log("콜백함수 실행"); }); console.log("비동기 함수 호출 후 코드"); 함수의 인자로 다른 함수를 전달하고 해당 함수의 실행이 끝나면 전달받은 함수를 실행하는 방식임 이를 통해 비동기적인 동작을 구현할 수 있음 하지만 콜백함수로 비동기 동작을 구현하다보면 콜백헬이 발생함 콜백헬이란? 비동기 처리 로직을 구현하기 위해 콜백 함수를 중첩하여 사용하게 되면서 발생하는 것 콜백 함수 내부에 다시 콜백 함수를 정의하고 그 안에 또 콜..

this, closure this this란? 자바스크립트에서의 this는 함수 호출 방식에 따라서 결정됨 함수의 호출방식 메소드로서의 호출 메소드로 호출 시(ex: obj1.addNums) 자신을 호출한 대상이 this 함수로서의 호출 함수를 독립적으로 호출 시 호출주체를 알 수 없으므로 this 지정 x -> 때문에 this는 전역 객체를 가리킴 또한 메소드의 내부라고 해도 함수로서 호출하면 this는 전역객체를 의미함 콜백함수로 호출될 때 그 함수 내부에서의 this 콜백함수도 함수이기 때문에 this는 전역객체를 참조하지만, 콜백함수를 넘겨받은 함수에서 별도로 this를 지정한 경우 예외적으로 그 대상을 참조함 생성자 함수 호출 this는 인스턴스를 가리킴 apply, call, bind 호출 a..

실행 컨텍스트 실행 컨텍스트란? 실행할 코드에 제공할 환경 정보를 모아놓은 객체를 말함. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜스택에 쌓아 올렸다가 가장 위에 있는 컨텍스트와 관련된 코드를 실행하는 식으로 전체 코드의 환경과 순서를 보장함 예시 var a = 1; function outer() { function inner() { console.log(a) // undefined var a = 3; } inner() console.log(a) // 1 } outer() console.log(1) 전역 컨텍스트 (Global Execution Context): 변수: a: 1 (전역 변수로 선언 및 할당) 함수: outer: 함수 선언문으로 정의된 ..

JavaScript - variables, hoisting Variables(var, let, const ) var 중복선언 O , 재할당 O var a = 1; var a = 10 a = 2 console.log(a) // 2 전역 변수로 선언한 경우 window 객체의 속성이 됨 var a = 'hi'; console.log(window.a) // 'hi'; 호이스팅될 때 초기화됨 console.log(x) // undefined var x = 1 console.log(x) // 1 함수 스코프를 가짐 (함수 내부에서 어디든 var로 선언한 변수에 접근할 수 있음) function example() { if (true) { var a = 1; } for (var i = 0; i < 5; i++) { ..