늘 겸손하게

자바스크립트 클래스의 매서드 작성법은 2가지가 있다. 첫 번째는 '프로토타입 메서드', 두 번째는 '정적 메서드' 이다. class Person { constructor(name) { this.name = name; // name 프로퍼티는 public하다 } // 프로토타입 메서드 sayHi() { console.log(`Hi! My name is ${this.name}`); } // 정적 메서드 static sayHello() { console.log("Hello!"); } } // 인스턴스 생성 const me = new Person('Lee'); // 인스턴스의 프로퍼티 참조 console.log(me.name); // Lee // 프로토타입 메서드 호출 me.sayHi(); // Hi! My n..

함수 호이스팅 호이스팅이란 선언문이 코드 최상단에 끌어올려진 듯한 자바스크립트만의 현상을 의미한다. 함수 또한 호이스팅이 발생할 수 있는데 함수 선언문과, 함수 표현식 어떤 방식을 사용하여 함수를 선언했느냐에 따라 호이스팅이 발생할 수도, 발생하지 않을 수 있다. 차이점을 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 함수 참조 console.dir(add); // f add(x, y) - 호이스팅 발생 console.dir(sub); // undefined // 함수 호출 console.log(add(2, 5)); // 7 - 호이스팅 발생 console.log(sub(2, 5)); // TypeError: sub is not a function // 함수 ..

JavaScript에서 루프를 효율적으로 돌리는데 사용되는 메소드로 setInterval()이 존재합니다. 이 메소드로 애니메이션을 출력하는데 사용하기 하지만 requestAnimationFrame() 메소드 이용이 더 좋습니다. 왜 더 좋나요? 1. 브라우저가 최적화시켜 애니메이션이 부드러워진다 2. 비활성화 탭의 애니메이션은 중지되어 cpu 부담을 줄인다 3. 배터리 소모가 덜 하다 사용법 function repeat() { // 작업 requestAnimationFrame(repeat); } requestAnimationFrame(repeat); 시작, 중단 requestAnimationFrame 메소드에 반복할 메소드를 인자로 주고 호출하면 시작 requestAnimationFrame가 반환하는 ..

this this는 object를 가리킨다. 어떠한 object를 가리키는지는 호출되는 상황에 따라 다르다. 상황에 따라 this가 가리키는 object 1. 객체의 메소드 안 this -> 객체를 가리킴 2. this 혼자 사용됨 -> 전역 객체를 가리킴 3. 함수 내부에서 this -> 전역 객체를 가리킴 4. 'strict mode'일때 함수 내부 this -> this는 undefined 5. 이벤트 내부에서 this -> 이벤트를 받은 요소(element) 6. call(), apply(), bind() -> this는 어떤 객체든 가리킬 수 있음 하나씩 알아보자 const person = { firstName : "John", lastName : "Doe", id : 5500, fullName..