👩🏻‍💻 프로그래밍 언어/JavaScript

this는 함수를 호출한 객체를 가리키는 키워드일반적으로 사용하지 않고 함수 내부에서 사용합니다.객체의 메소드를 만들 때 중요한 역할을 합니다. ✅ 일반 함수와 화살표 함수에 대해서도 this를 다루는 방식이 다르다 !일반 함수에서 this화살표 함수에서 this함수를 호출하는 객체가 this에 담긴다호출한 대상에 따라 상대적으로 변하는게 아닌,arrow funtion이 선언되는 직전에 그때 유효한 this 값과 똑같은 값을 가지고 동한다. this가 필요할 때 ?외부에서 여러 객체에 공통적으로 사용되는 메소드를 만들 때객체 내부에서 메소드를 만들 때 메소드가 속해 있는 객체의 프로퍼티가 필요한 상황일 때

함수 스코프함수 내부에서 선언된 변수는 함수 내에서만 접근 가능하며, 함수 외부에서는 접근할 수 없습니다. 자바스크립트의 var 키워드로 선언된 변수는 함수 스코프를 따릅니다.function example() { var x = 10; console.log(x); // 10}console.log(x); // ReferenceError: x is not defined  블록 스코프블록({}) 내부에서 선언된 변수는 해당 블록 내에서만 접근 가능하며, 블록 외부에서는 접근할 수 없습니다. 자바스크립트의 let과 const 키워드로 선언된 변수는 블록 스코프를 따릅니다.{ let y = 20; const z = 30; console.log(y); // 20 console.log(z); // 30}co..

즉시 실행 함수함수선언 부분을 소괄호로 감싼 다음에 바로 뒤에 함수를 실행하는 소괄호를 한 번 더 붙여주는 방식// 함수가 선언된 순간 바로 실행(function () { console.log('Hi!');})();일반 함수처럼 파라미터를 작성하고, 함수를 호출할 때 아규먼트를 전달할 수도 있다.(function (x, y) { console.log(x + y);})(3, 5);주의사항💡즉시 실행 함수는 함수에 이름을 지어주더라도 외부에서 재사용할 수 없다(function sayHi() { console.log('Hi!');})();sayHi(); // ReferenceError즉시 실행 함수의 활용즉시 실행 함수는 말 그대로 선언과 동시에 실행이 이뤄지기 때문에 일반적으로 프로그램 초기화 기능에..

1. 함수 선언식💡function 키워드를 사용하여 함수 이름과 본문을 명시적으로 정의하는 방식// 1. 함수 선언식function 함수이름(파라미터) { 동작 return 리턴값}// 2. 호이스팅printHi();funtion printHi() { console.log('Hi');}2. 함수 표현식💡함수 선언을 값처럼 활용하는 방식// 1. 함수 표현식 - 함수 선언을 변수에 할당const printHello = function (파라미터) { console.log('Hello');}printHello();// 2. 함수 표현식 - 값처럼 사용const myBtn = document.querySelector('myBtn');myBtn.addEventListener('click', funtio..

표준 DOM 이벤트 에서 정의한 이벤트 흐름의 3가지 단계캡쳐링 단계 : 이벤트가 하위 요소로 전파되는 단계타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계버블링 단계 : 이벤트가 상위 요소로 전파되는 단계이벤트가 발생하면 가장 먼저 window 객체에서부터 target 까지 이벤트 전파가 일어납니다. (캡쳐링 단계)도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계)이후 다시 window 객체로 이벤트가 전파됩니다. (버블링 단계) 타깃 단계타깃 단계에서 이벤트 객체의 target 프로퍼티는 이벤트가 발생한 실제 요소를 가리킵니다.캡쳐링부모 요소에서 발생한 이벤트가 자식 요소로 전파되는 과정을 의미합니다. 오늘 할 일 자바스크립트 공부 ..

0 - + " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스🔖 .html 파일 0 - +  🔖 .js 파일// css 선택자로 태그 선택하기const myTag = document.querySelector('#myNumber');console.log(myTag);const myTag2 = document.getElementById('myNumber');console.log(myTag2);cons..