본문 바로가기

Javascript

(101)
콜백함수_인자 & this 바인딩 인자 map 함수: 배열을 하나하나 순회하면서 각 배열 요소를 변환하여 새로운 배열을 반환합니다. 기존 배열을 변경하지 않고, 새로운 배열을 생성한다는 것을 알고 계시죠? 👍👍 // map 함수에 의해 새로운 배열을 생성해서 newArr에 담고 있네요! var newArr = [10, 20, 30].map(function (currentValue, index) { console.log(currentValue, index); return currentValue + 5; }); console.log(newArr); // -- 실행 결과 -- // 10 0 // 20 1 // 30 2 // [ 15, 25, 35 ] 자, 그렇다면 콜백함수에서 여러분이 넣으신 currentValue, index 이 변수의 순서..
콜백함수_제어권 어떠한 제어권을 콜백함수를 넘겨받은 코드는 갖게될까요? 호출 시점 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가져요! 위 설명처럼, 아래 예시에서는 콜백 함수의 제어권을 넘겨받은 코드(=setInterval)가 언제 콜백함수를 호출할지에 대한 제어권을 가지게 돼요! 0.3초라는 적절한 시점을 본인의 함수에 적어놓은대로 실행하는 거죠. var count = 0; // timer : 콜백 내부에서 사용할 수 있는 '어떤 게 돌고있는지' // 알려주는 id값 var timer = setInterval(function() { console.log(count); if(++count > 4) clearInterval(timer); }, 300); var count = 0; var c..
콜백함수 현명하게 사용하기 이번 시간엔 콜백 함수에 대해 배울거에요. 앞 시간에 수 차례 우리는 콜백 함수를 이미 사용해 왔습니다. 가령 예를 들면, setTimeout, 배열에 대한 forEach 등에서요. // setTimeout setTimeout(function() { console.log("Hello, world!"); }, 1000); // forEach const numbers = [1, 2, 3, 4, 5]; numbers.forEach(function(number) { console.log(number); }); 이처럼 다른 코드의 인자로 넘겨주는 함수인 콜백함수의 여러가지 특징과 바람직하지 않은 상황(콜백 지옥)hell을 만났을 때 어떻게 대처해야 할지 등에 대한 내용을 배워봅시다. 이러한 과정에서 자연스럽게 동..
call & apply & bind보다 편리한 방법은?_v3.11 var func = function (a, b, c, d) { console.log(this, a, b, c, d); }; var bindFunc = func.bind({ x:1 }, 4, 5); // func와 bindFunc의 name 프로퍼티의 차이를 살펴보세요! console.log(func.name); // func console.log(bindFunc.name); // bound func ✅ 생성자 내부에서 다른 생성자를 호출(공통된 내용의 반복 제거) Student, Employee 모두 Person입니다. name과 gender 속성 모두 필요하죠. 그러니 Student와 Employee 인스턴스를 만들 때 마다 세 가지 속성을 모두 각 생성자 함수에 넣기 보다는 Person이라는 생성자 ..
명시적 this 바인딩 & 유사배열객체_v3.10 명시적 this 바인딩 자동으로 부여되는 상황별 this의 규칙을 깨고 this에 별도의 값을 저장하는 방법입니다. 크게, **call / apply / bind**에 대해 알아보겠습니다. call 메서드 호출 주체인 함수를 즉시 실행하는 명령어에요. call명령어를 사용하여, 첫 번째 매개변수에 this로 binding할 객체를 넣어주면 명시적으로 binding할 수 있어요. 쉽죠? 예시를 통해 확인해봅시다. var func = function (a, b, c) { console.log(this, a, b, c); }; // no binding func(1, 2, 3); // Window{ ... } 1 2 3 // 명시적 binding // func 안에 this에는 {x: 1}이 binding돼요 ..
this 콜백함수 & 생성자 함수_v3.9 ✅ this(정의, 활용방법, 바인딩, call, apply, bind) 이번 시간에는 this에 대해 다루게 됩니다. 다른 객체지향 언어에서의 this는 곧 클래스로 생성한 인스턴스를 말합니다. 그러나 자바스크립트에서는 this가 어디에서나 사용될 수 있어요. this가 상황별로 어떻게 달라지는지, 이유는 뭔지, this를 추적하는 방법 등을 알아 볼 예정입니다. (1) 상황에 따라 달라지는 this 잊지 않으셨겠죠? 또 리마인드!! -실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. - 그 객체 안에는 3가지가 존재한다. ✓ VariableEnvironment ✓ LexicalEnvironment ✓ ThisBindings this는 실행 컨텍스트가 생성될 때 결정돼요. 이 말을..
함수선언문 < 함수표현식_v3.8 ✅ 함수 선언문, 함수 표현식(*익명 함수 표현식) 함수 정의의 3가지 방식 // 함수 선언문. 함수명 a가 곧 변수명 // function 정의부만 존재, 할당 명령이 없는 경우 function a () { /* ... */ } a(); // 실행 ok // 함수 표현식. 정의한 function을 별도 변수에 할당하는 경우 // (1) 익명함수표현식 : 변수명 b가 곧 변수명(일반적 case에요) var b = function () { /* ... */ } b(); // 실행 ok // (2) 기명 함수 표현식 : 변수명은 c, 함수명은 d // d()는 c() 안에서 재귀적으로 호출될 때만 사용 가능하므로 사용성에 대한 의문 var c = function d () { /* ... */ } c(); /..
record & 호이스팅_v3.7 ✅ 실행 컨텍스트 객체의 실체(=담기는 정보) VariableEnvironment(VE : record & outer ) 현재 컨텍스트 내의 식별자 정보(=record)를 갖고있어요. var a = 3 위의 경우, **var a**를 의미 외부 환경 정보(=outer)를 갖고있어요. 선언 시점 LexicalEnvironment의 snapshot LexicalEnvironment(LE : 실시간 반영)** VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영해요. ThisBinding this 식별자가 바라봐야할 객체 (2) VariableEnvironment, LexicalEnvironment의 개요 VE vs LE VE : 스냅샷을 유지해요. LE : 스냅샷을 유지하지 않아요. ..
실행컨텍스트(스코프, 변수, 객체, 호이스팅)_v3.6 ✅실행컨텍스트(스코프, 변수, 객체, 호이스팅) 자바스크립트의 **실행 컨텍스트**는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 합니다. 선언된 변수를 위로 끌어올리구요 = 호이스팅(hoisting) 외부 환경 정보를 구성하구요. this 값을 설정해요. 이런 현상들 때문에 JS에서는 다른 언어랑은 다른 특징들이 나타난답니다. (1) 실행 컨텍스트란? 실행 컨텍스트를 이해하기 위해서는, **콜 스택**에 대한 이해가 반드시 필요합니다. 자, 그 전에 **“스택”**이라는 개념에 대해서 먼저 이해를 해야겠네요. 스택(Stack) vs 큐(Queue) 콜 스택(call stack) 컨텍스트의 구성 구성방법(여러가지가 있지만..
undefined vs null_v3.5 (6) undefined와 null 둘 다 없음을 나타내는 값이에요. 하지만 미세하게 다르고, 그 목적 또한 다르답니다. 아래에서 한번 살펴보도록 할께요! undefined 사용자(=개발자)가 직접 지정할 수도 있지만 일반적으로는 자바스크립트 엔진에서 값이 있어야 할 것 같은데 없는 경우, 자동으로 부여합니다. 다음 케이스를 생각해 주시면 될 것 같아요. 변수에 값이 지정되지 않은 경우, 데이터 영역의 메모리 주소를 지정하지 않은 식별자에 접근할 때 .이나 []로 접근하려 할 때, 해당 데이터가 존재하지 않는 경우 return 문이 없거나 호출되지 않는 함수의 실행 결과 var a; console.log(a); // (1) 값을 대입하지 않은 변수에 접근 var obj = { a: 1 }; console..