본문 바로가기

Understanding JavaScript10

[JS] What Is this? _ 2 편 ( constructor, e.currentTarget 역할의 This) 3. Construntor로 생성되는 Object를 나타내는 this this의 세번째 용법에 앞서 construnctor가 무엇인지 알아보자. constructor란 클래스를 통해 객체가 생성되고 초기화될 때 자동으로 호출되는 메서드다. 즉, constructor는 클래스의 인스턴스를 생성하고 클래스 속성을 설정하는 역할을 힌다. class Car { constructor(brand) { this.carname = brand; } } let myCar = new Car("Kia"); console.log(myCar.carname); // "Kia" 위의 코드에서 constructor 메서드는 Car 클래스의 인스턴스를 생성할 때 호출되며, 이 메소드는 brand 인수를 받아 이를 사용하여 carname.. 2023. 6. 14.
[JS] What Is this? _ 1 편 (Window, Method에서의 This) JavaScript에서 this가 의미하는 것은 다양하다. JavaScript에서 this가 어떻게 작동하는지 알아보자. 1.window를 가리키는 this console.log(this) JavaScript에서 위와 같이 this를 호출하면 window가 출력된다. 그렇다면 여기서 window는 무엇을 의미할까? window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역 객체이다. 쉽게 생각해보면 우리가 JavaScript에서 사용하는 console.log(), alert() 등과 같은 메서드를 사용할 수 있는 것도 window라는 객체 내에 있기 때문이다. 여기에 window는 개발자가 생성한 전역 변수 또한 보관해준다. name이라는 변수를 최상단에 만들면 이 변수를 window 객체에 .. 2023. 6. 13.
[JS/Node] 동기와 비동기 그리고 Callback 함수에 대하여 동기(Synchronous) JavaScript에서 동기 처리란 '특정 코드의 실행이 완료될 때까지 기다린 후 그 실행을 완료한 이후 다음 코드를 수행하는 것'을 말한다. 예를 들어 카페에서 커피를 주문한다고 가정해보자. 이 카페는 앞에서 주문한 커피의 제조가 끝나야 다음 주문을 받는다. A라는 사람은 아메리카노를 주문했다. 그 뒤에 들어온 B라는 손님은 A가 커피를 받을 때까지 기다렸다가 핫초코를 주문했다. 다음 손님인 B가 주문한 핫초코가 나오고 나서 C는 딸기 라떼를 주문했다고 생각해보자. 이런 카페에서 한 손님이 커피를 주문하고 받는 데까지 걸리는 시간은 비교적 어떨까? 당연히도 시간이 많이 걸릴 것이다. 고작 3개의 음료를 만드는데도 주문을 소화하기 힘든데 주문이 더욱 많아진다면 엄청난 시간이 .. 2023. 3. 3.
What is Hoisting? Hoisting이란 무엇인가 JavaScript에서 Hoisting은 interpreter가 변수와 함수의 선언 위치를 이들이 선언되기 이전에 미리 할당하는 것을 의미한다. 즉 JavaScript에서 선언문을 해당 Scope의 최상위로 끌어 올리는 동작이다. 실제로 변수와 함수의 선언이 물리적으로 코드의 상단으로 옮겨지는 것은 아니다. Hoisting은 변수와 함수의 선언만 최상위로 올라오고 할당은 원래 위치에서 일어난다. console.log(name) // undefined let name = "Lee" console.log(name) // Lee 위 코드를 살펴 보자. 첫 번째 console.log(name)을 보면 결과 값이 undefined이다. JavaScript에 Hoisting이 없었다면 .. 2023. 2. 27.