javascript
-
비동기처리 작동 원리, Microtask Queue & Task Queue개발 2022. 4. 2. 14:29
Q: JS에서의 비동기처리의 작동 원리를 알고있나? A JS의 런타임에 메모리 할당을 담당하는 메모리 힙과 코드가 호출될 때 스택으로 쌓이는 콜스택이 있고, 콜스택은 후입선출 방식으로 실행됩니다. JS 작동 원리에서 비동기 함수일 경우를 설명해보자면 SetTimeOut이라는 함수가 콜백함수를 가지고 호출되어 콜스택에 쌓이면 이 함수는 Web API를 호출하는 함수라서 얘가 실행되는 순간 Web API의 타이머를 호출합니다. 그 후, 타이머가 SetTimeOut의 콜백함수를 가지고 Web API에 등록을 하고 콜스택에 있는 SetTimeOut 함수는 어찌됐든 실행완료가 되었기 때문에 콜스택에서 빠져나갑니다. 이어서 다음 줄의 코드들을 콜스택에 넣고 할일을 이어서 합니다. 그리고 타이머가 가지고 있는 콜백함..
-
call과 apply, bind 메서드를 이용한 명시적인 this 바인딩개발 2020. 4. 20. 22:47
이 전에 작성한 컨텐츠인 객체의 메서드를 호출할 때, 함수를 호출할 때, 생성자 함수를 호출할 때의 this 바인딩으로 각각의 상황에 따라 this가 정해진 객체에 자동으로 바인딩 된다는 것을 알아보았는데 자바스크립트는 이러한 내부적인 this 바인딩 이외에도 this를 특정 객체에 명시적으로 바인딩 시키는 방법도 제공합니다. 이를 가능하게 하는 것으로는 apply()와 call(), bind() 메서드 입니다. 이 메서드들은 모두 함수의 부모 객체인 Function.prototype 객체의 메서드이므로 다음과 같은 형식으로 호출하는 것이 가능합니다. func.apply( thisArg, argArr ) 여기서 기억해야 할 것은 apply() 메서드를 호출하는 주체가 함수고, apply() 메서드도 th..
-
생성자 함수를 호출할 때 this 바인딩개발 2020. 4. 20. 22:46
자바스크립트에서 객체를 생성하는 방법에는 생성자 함수를 이용하는 방법이 있습니다. 생성자 함수는 말 그대로 자바스크립트의 객체를 생성하는 역할을 하는데 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작합니다. 먼저 생성자 함수가 동작하는 방식에 대해서 알아보겠습니다. 1. 빈 객체 생성 및 this 바인딩 생성자 함수 코드가 실행되기 전 빈 객체가 생성됩니다. 바로 이 객체가 생성자 함수가 새로 생성하는 객체이고 이 객체는 this로 바인딩 됩니다. 즉, 이후 생성자 함수의 코드 내부에서 사용된 this는 이 빈 객체를 가리킵니다. 하지만 엄밀히 말하면 여기서 생성된 객체가 빈 객체는 아닙니다. 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체와 연결되어 있으며, 이를 ..
-
함수를 호출할 때의 this 바인딩개발 2020. 4. 19. 19:59
함수를 호출하면, 해당 함수 내부에서 사용된 this는 전역 객체인 window 객체에 바인딩 됩니다. 자바스크립트의 모든 전역 변수는 실제로 전역 객체의 프로퍼티들 입니다. 전역 변수 foo 를 정의하고 출력하는 예제를 통해 정말 전역 객체의 프로퍼티인지 확인해 보겠습니다. !!! 아래의 예시와 다음에 나온 예시에서 let을 쓰지 않고 var를 사용했는데 만약 foo 변수에 let 키워드를 사용했다면 window.foo 는 undefined가 나올 것입니다. 왜냐하면 let 키워드로 선언된 변수를 전역 변수로 사용하는 경우 let 전역 변수는 전역 객체의 프로퍼티가 아니기 때문입니다. 즉, let 전역 변수는 보이지 않는 개념적인 블록 내에 존재하기 때문에 window.foo와 같이 접근할 수 없습니다..
-
객체의 메서드를 호출할 때 this 바인딩개발 2020. 4. 16. 21:37
객체의 프로퍼티가 함수일 경우, 이 함수를 메서드라고 부릅니다. 이러한 메서드를 호출할 때, 메서드 내부에서 사용된 this는 해당 메서드를 호출한 객체로 바인딩 됩니다. 다음 예제를 통해서 객체의 메서드 호출 사용시의 this 바인딩 과정을 보겠습니다. // obj 객체 생성 let obj1 = { name: 'foo', sayName: function(){ console.log(this.name); } }; // obj2 객체 생성 let obj2 = { name: 'bar' }; // obj2 객체에 sayName() 메서드를 만들고 이 메서드에 obj.sayName()을 할당하여 참조하기 obj2.sayName = obj1.sayName; obj1.sayName(); // foo obj2.sayN..
-
함수의 인수 (rest와 arguments 객체)개발 2020. 4. 14. 23:49
자바스크립트에서는 함수를 호출할 때 인수를 생략할 수 있습니다. 반대로 함수의 매개변수에 작성된 인자 개수보다 더 많은 개수의 인수를 넘겨서 함수를 실행할 수 있습니다. 첫번 째 방법으로는 arguments객체이고, 두번 째 방법으로는 rest 파라미터(spread operator) 가 있습니다. 1. arguments 객체 arguments 객체는 매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로 다른 처리를 해줘야 하는 함수에 유용하게 사용할 수 있습니다. 또한 매개 변수가 명시적으로 선언되지 않은 경우에도 사용할 수 있습니다. 모든 함수에서 사용할 수 있는 지역 변수로 argument 변수가 있고, arguments변수의 값은 Arguments 객체입니다. ..
-
prototype과 prototype Chain개발 2020. 4. 14. 23:46
prototype 이란 생성자 함수를 생성하면 prototype이라는 빈 객체가 어딘가에 존재하고, 생성자 함수( 부모객체 )로부터 생성된 객체( 자식객체 )들은 이 prototype이라는 객체에 들어있는 값을 모두 공유할 수 있습니다. 즉, 상속 개념과 마찬가지로 자식 객체는 부모 객체가 가진 속성이나 메서드를 상속받는 것이 가능합니다. 이 전에 블로깅했던 생성자와 new 컨텐츠에서 다뤘던 생성자 함수 Person() 을 사용하여 더 자세히 설명해보도록 하겠습니다. function Person(name, age, country){ this.name = name; this.age = age; this.country = country; this.introduce = function(){ return 'my..
-
생성자와 new개발 2020. 4. 12. 21:55
생성자( cunstructor )는 객체를 만드는 일을 하는 함수입니다. 이 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 볼 수 있습니다. 함수를 호출할 때 new를 붙이면 새로운 객체를 만든 후에 이를 리턴합니다. 객체를 만드는 주체는 함수입니다. 이 전에 작성한 객체지향 프로그래밍 컨텐츠에서 유저의 정보를 담고있는 객체를 해당 유저가 새로 생길 때마다 새로운 객체를 만들어줘야 했고, 그 객체안에는 유저의 정보를 담고있는데, 중복되는 정보들이 있었던 것을 보았습니다. 그 중복을 줄이기 위해서 다음과 같은 코드로 작성할 수 있겠습니다. 생성자와 new를 사용하기 전 써주었던 코드는 아래와 같고 let person1 = { name: 'hyojin', age: 25, country:..