[JavaScript] 화살표 함수 / 일반 함수 에서의 this

화살표 함수 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다 일반 함수 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다. const o = { method() { console.log("context : ", this) // o let f1 = function() { console.log("[f1] this : ", this) } let f2 = () => console.log("[f2] this : ", this) f1() // global f2() // o }, }; o.method() f1() 은 실행될 때 새로운 컨텍스트를 생성한다. 이때 f1에 바인딩된 컨텍스트가 없으므로 this는 global을 가리킨다. f2()는 함수 컨텍스트를 생성하며 this 변수는..

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

[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