[JavaScript] this가 가리키는 것

Dynamic Binding 함수가 호출되는 상황은 4가지가 있다. 함수 호출 - 함수를 직접 호출 myFunc() 메서드 호출 - 객체의 메서드를 호출 o.method() 생성자 호출 - 생성자 함수를 호출 function Person() { this.name = 'Tom' } const p = new Person() 간접 호출 - call, apply 등으로 함수를 간접 호출 func.call(null, a) function myFunc() { console.log('myFunc called') } myFunc() // 함수를 직접 호출 const o = { name : 'Daniel', printName : function() { console.log(this.name) } } o.printName..

• format_list_bulleted Front-End
• · 2023. 3. 22.
• textsms

[JavaScript] 실행 컨텍스트 (Execution Context)

실행 컨텍스트 (Execution context) 실행 컨텍스트 혹은 실행 맥락은, 자바스크립트 코드가 실행되는 환경. 코드에서 참조하는 변수, 객체(함수 포함), this 등에 대한 레퍼런스가 있다. 실행 컨텍스트는 전역에서 시작해, 함수가 호출될 때 스택에 쌓이게 된다. 실행 컨텍스트 스택 let a = 10 function f1() { let b = 20 function print(v) { console.log(v) } function f2() { let c = 30 print(a + b + c) } f2() } f1() print 실행 컨텍스트 : v f2 실행 컨텍스트 : c f1 실행 컨텍스트 : b, print, f2 global 실행 컨텍스트 : a, console, f1 호출되는 순서대로..

• format_list_bulleted Front-End
• · 2023. 3. 22.
• textsms

[JavaScript] 자바스크립트 함수가 실행되는 과정

자바스크립트 코드의 실행 // 어떤 코드도 없는 경우 어떤 코드가 없어도, 세 가지 변수를 만들게 된다. 이 때 this의 경우는 코드가 실행되는 시점의 환경이 가리키는 객체, 즉 window 객체를 가리키게 된다. 어떤 변수도 선언되지 않았기 때문에 빈 객체이며, scope chain은 현재가 최상위의 스코프이므로 연결된 스코프가 없기 때문에 빈 객체이다. 정리 자바스크립트 엔진은 코드가 없어도 실행 환경(실행 컨텍스트)을 초기화한다. 스코프(scope)는 코드가 현재 실행되는 환경, 맥락(context)을 의미한다. this 포인터, 스코프에 저장된 변수들, 스코프 체인 등이 환경에 포함된다. this 포인터의 경우, 글로벌 스코프에서는 window를 가리킨다. 예시 function myFunc()..

• format_list_bulleted Front-End
• · 2023. 3. 21.
• textsms

[JavaScript] 내비게이션 기능, 이미지 슬라이드, 탭 버튼

내비게이션 기능 (스크롤) e.preventDefault(); // 특정 기능 정지 메서드 xxx.querySelector("#intro"); // 1개의 태그를 css 선택자 기반으로 가져온다. xxx.querySelectorAll("a"); // 여러 개의 태그를 css 선택자 기반으로 가져온다. xxx.getAttribute("href"); // 특정 태그가 갖고 있는 속성의 속성값을 가져온다. window.scrollTo({ // 특정 지점으로 스크롤링 'behavior': 'smooth', // 부드럽게 이동 'top': xxx.offsetTop // 특정 영역의 위에서의 좌표값 }); 이미지 슬라이드 (시간을 기준으로 자동 슬라이드) setinterval(function(){ ... }, 30..

• format_list_bulleted Front-End
• · 2023. 3. 10.
• textsms

[JavaScript] innerHTML, innerText, textContent 차이점

See the Pen Untitled by Sehui Jeong (@SayisMe) on CodePen. innerHTML innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나 설정한다. 위 예제에서 innerHTML 버튼을 클릭하면 div 안에 있는 HTML 의 전체 내용을 가져오게 된다. 보이는 텍스트 숨겨진 텍스트 innerText innerText는 'Element'의 속성으로, 해당 Element의 사용자에게 '보여지는' 텍스트 값을 읽어온다. 위 예제에서 innerText 버튼을 클릭하면 보여지는 텍스트를 가져온다. 보이는 텍스트 textContent textContent는 'Node'의 속성으로, 나 태그와 상관없이 해당 노드가 가지고 있는 텍..

• format_list_bulleted Front-End
• · 2023. 3. 10.
• textsms

[JavaScript] 자바스크립트 이벤트(Event)

이벤트(Event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 타입 // 마우스 클릭 이벤트 예시 여길 클릭하세요! 발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window객체 등) 이벤트 핸들러 // 이 함수는 HTML 문서가 로드될 때 실행됨. window.onload = function() { // 아이디가 "text"인 요소를 선택함. var text = document.getElementById("text"); text.innerHTML = "HTML 문서가 로드되었습니다."; } 이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록..

• format_list_bulleted Front-End
• · 2023. 3. 9.
• textsms