Call & Bind & Apply함수 안에서 this를 사용하면 Window 객체를 참조하게 된다. 하지만 다른 객체를 참조하길 원할 때 우리는 어떻게 해야할까? 💡 Tip이 내용을 이해하기 전에, 먼저 this 키워드에 대해 알고 있어야 합니다. 만약 잘모르신다면 아래의 링크를 통해 공부하고 오시는 것을 추천드립니다. [ JS ] 자바스크립트 this 키워드 정복하기this 작동 범위let audio = { title: 'a', title2 : this.title, play() { console.log('play this: ', this.title); }};console.log(audio.title2); //undefinedaudio.play(); // play this: a 위 코드에서 함수 블록..

this 작동 범위let audio = { title: 'a', title2 : this.title, play() { console.log('play this: ', this.title); }};console.log(audio.title2); //undefinedaudio.play(); // play this: a 위 코드에서 함수 블록 스코프 내에 선언되지 않은 this는 undefined가 되어 제대로 작동하지 않는다. 따라서 this는 반드시 함수 블록 스코프 내에서 선언되어야 올바르게 작동한다.  함수 호출 방식과 this 바인딩자바스크립트에서는 함수 호출 방식에 따라 this가 어떤 객체에 바인딩될지 동적으로 결정된다. 즉, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정..

자바스크립트 타입자바스크립트는 원시 타입과 참조 타입으로 나누어진다. 원시 타입 ( Primitive type )BooleanStringNumbernullundefinedSymbol 참조 타입 ( Object type )ObjectArray 원시 타입 ( Primitive type )NameDescriptionstring 문자열을 나타낸다.number 숫자 값을 나타낸다.boolean true 와 false 값을 가지고 있다.null 하나의 값을 가진다 : null의도적으로 '값이 없음'을 나타내기 위해서 사용된다.undefined하나의 값을 가진다 : undefined초기화되지 않은 변수의 기본값이다.symbol 변경 불가능한 유일한 값을 생성할 때 사용하며,값 자체의 확인이 불가하여 외부로 노출되지 ..

자바스크립트 var, let, const자바스크립트에서 변수를 선언할 때는 var, let, const를 사용한다.  변수 선언 방식 ( 중복 선언과 재할당 )var중복 선언 O, 재할당 Ovar greeting = 'hello';console.log(greeting); //hellovar greeting = 'hi'; //중복 선언console.log(greeting); //higreeting = 'how are you?'; //재할당console.log(greeting); //how are you? 위의 코드와 같이 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 저장된다. 이런 특징으로 인해 자율성은 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재 할당을 해서 ..

이벤트 버블링 ( Event Bubbling )이벤트 버블링이란 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말한다. 왼쪽 그림에서처럼 가장 깊게 중첩된 요소 (3)에 이벤트가 발생했을 때 이벤트가 위로 (bubble up) 전파되어버린다.그래서 3번 요소, 2번 요소, 1번요소에 그 이벤트에 대한 핸들러가 있다면 3번 요소에 핸들러가 실행되고 2번 요소에 핸들러, 1번요소에 핸들러 순으로 실행된다. 코드를 통해 살펴보면, 아래 3개가 중첩된 박스 영역에서 가장 자식 엘리먼트인 박스를 클릭하면 onclick 이벤트 스크립트가 뿐만 아니라 그의 부모인 와 엘리먼트도 발생함을 볼 수 있다. FORM DIV P  See t..