본문 바로가기
반응형

프로그래밍/JavaScript19

자바스크립트 핵심 개념 : call / apply / bind 메서드 이해하기 콜백함수에서 this를 바인딩할 때 "기본적으로는 함수와 동일, 즉 전역객체(window)이다."라는 정의가 있는데 아래 세가지 메서드는 그 사실을 벗어난다. 즉, call / apply / bind는 명시적인 this 바인딩이 가능하게 나온 메서드이다. 그런 의미에서 세 가지의 차이를 확인해보자. function a(x, y, z) { console.log(this, x, y, z); } var b = { c: 'eee'}; // call a.call(b, 1, 2 ,3); // apply a.apply(b, [1,2,3]); // bind var c = a.bind(b); c(1,2,3); 처음 볼때는 이게 뭔 코드야 싶겠지만, 어떤 인자값이 오는지 확인해보면 그리 복잡한 코드가 아니다. a.call.. 2020. 12. 18.
자바스크립트 핵심 개념 : 콜백 함수 1. 콜백 함수가 탄생한 배경 1-1. 자바스크립트의 비동기 처리방식 콜백함수를 이해하기 이전에 자바스크립트와 비동기 처리방식에 대해 생각해보자. 자바스크립트는 기본적으로 이벤트가 중심이 되는 언어이다. 이벤트는 즉각적이고, 동적이기 때문에 일일히 다른 코드를 기다려줄 수 없다. 그래서 자바스크립트에서는 비동기 처리방식을 채택하여 사용하고 있다. 동기처리는 코드가 1,2,3이 있을 때 1이 종료되면 2 실행, 2가 종료되면 3 실행 이런식으로 진행되는 반면, 비동기 처리는 1이 종료되지 않아도 2 실행, 2가 종료되지 않아도 3 실행되는 방식이다. 그럼 콜백 함수는 왜 나왔을까? 바로 비동기처리 방식의 문제점 때문이다. 1-2. 비동기 처리방식의 문제 비동기 처리의 문제는 뭘까? 아마 여러 코드가 예측하.. 2020. 12. 18.
자바스크립트 핵심 개념 : 메서드 메서드 쉽게 이해하기 var obj = { b: function bb() { console.log(this); } }; obj.b(); 이 코드의 모습처럼, 함수처럼 생겼는데 쩜이 붙으면 일단 다 메서드라고 생각하면 된다. 그러니까, b는 메서드고 bb는 함수라는 의미같다. (검색해보니 그리 중요하게 집착할 필요는 없는 것 같다.) 그런데 중요한 점은 함수와 달리 "메서드는 this를 바인딩한다."는 점이다. 이 말의 자세한 의미는 console.log(this)에서 this의 의미가 obj.b();에서 쩜 전까지, 그러니까 obj가 여기서의 this이다. 외우고 중요하게 생각할 부분은 메서드는 쩜이 찍힌다는 것이고, 그 메서드안에 this를 쓴다면 쩜이 찍히기 전까지를 의미하는 것이다. 2020. 12. 18.
자바스크립트 핵심 개념 : 함수스코프와 실행컨텍스트 1. 함수스코프와 실행컨텍스트 함수스코프가 무엇일까? scope는 범위, 영역정도로 해석되는데 즉,"변수의 유효범위"라고 할 수 있다. 변수는 전역변수, 지역변수로 나뉘는데 전체적인 변수, 지역적인 변수라고 의미만 대략알고 밑의 예제를 보면 확실하게 이해할 수 있다. 실행컨텍스트는 무엇일까? context는 문맥, 맥락이라는 의미로 즉, 실행이 되는 코드 덩어리(맥락)라고 할 수 있다. 그런데 뭘 구분한 코드 덩어리일까? 바로 함수이다. 즉, 다시 말해 "실행이 되는 함수 코드 덩어리"라고 표현해볼 수 있다. 실행컨텍스트의 특징은 "호이스팅이 일어나고, 함수가 실행될 때 열린다는 것"이다. (this 바인딩하는 것도 특징인데 이건 this를 끝내고 다시 보기로) 하지만 이 개념은 좀 추상적이라 다시 봐도.. 2020. 12. 18.
반응형