목록모든 글 (126)
코딩쌀롱
콜백 함수 내부에서 외부 데이터를 사용하고자 할 때 1) 콜백함수를 내부함수로 선언, 외부 변수 직접 참조 const fruits = ['apple', 'banana', 'peach']; const $ul = document.createElement('ul'); // (공통 코드) fruits.forEach(function (fruit) { // (A) forEach 콜백 const $li = document.createElement('li'); $li.innerText = fruit; $li.addEventListener('click', function() { // (B) 클릭e 핸들러 alert('your choice is ' + fruit); // fruit 외부 변수 참조 }); $ul.appen..
이해 못한 문제 let funcArr = []; for(let i = 0; i console.log(c) ); } funcArr.forEach( fn => fn() ) 출력 결과를 예상해보자. 반복문이 모두 돌면 var가 함수 레벨 스코프이기 때문에 c = 8이 된다. 그리고 funcArr에는 함수 다섯 개가 들어가 있다. forEach로 funcArr에 있는 함수를 모두 실행시키면 console.log(c)를 다섯 번 실행한다. c의 값은 var로 전역변수로 선언돼있고, 마지막 값인 8이다. 따라서 8 8 8 8 8이 출력된다. 위의 예시에서 var를 let으로만 바꿨다. 출력 결과를 예상해보자. let funcArr =..
5-1 클로저의 의미 및 원리 이해 const outer = function () { let a = 1; const inner = function() { console.log(++a); }; inner(); }; outer(); (1) inner 함수 내부에서는 a를 선언하지 않았기 때문에 environmentRecord에서 값을 찾지 못하므로 outerEnvironmentReference에 지정된 상위 컨텍스트인 outer의 LexicalEnvironment(L.E)에 접근해서 다시 a를 찾는다. (2) 그리고 2가 출력된다. (3) outer 함수의 실행 컨텍스트가 종료되면 L.E에 저장된 식별자들(a, inner)에 대한 참조를 지운다. 그러면 각 주소에 저장돼 있던 값들은 자신을 참조하는 변수가 ..
4-1 콜백 함수란? 'callback'은 되돌아 호출해달라는 명령이다. 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보낸 것이다. 함수 X는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출한다. 이처럼 콜백 함수는 함수 또는 메서드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수다. 4-2 제어권 호출 시점 let count = 0; const timer = setInterval(function () { console.log(count); if (++count > 4) clearInterval(timer); }, 300); 이 코드를 실행하면 콘솔창에는 0.3초에 한 번씩 숫자가 0부터 1씩 증가하며 출력되다가 4가 출력된 이후 종..
문제 프로그래머스 12981 영어 끝말잇기 문제 게임을 하는 사람 수 n, 순서대로 말한 단어들을 넣은 배열 words를 매개변수로 받는다. 단어의 첫 글자를 맞게 말했는지, 앞에 이미 나온 단어인지를 확인하고 틀린 사람의 번호와 몇 번째 차례일 때 그 단어를 이야기 했는지를 반환한다.[사람 번호, 차례] 아무도 틀리지 않았다면 [0, 0]을 반환한다. 나의 풀이 data = [ [ 사람1 ], [ 사람2 ], ...[ 사람n ] ] 2차원 배열로 만들어서 words의 단어들을 차례대로 사람들의 배열에 넣어가면서 체크. 1. 사람 수(n)만큼 data에 속배열을 만든다. 2. 속배열에 돌아가면서 단어 넣기 2-1 앞글자를 맞게 했는지 체크 (전 배열의 마지막 글자, 제일 앞 글자 비교) 2-2 이전에 안..
call 메서드 Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) call 메서드는 호출 주체인 함수를 즉시 호출하고, this 바인딩한다. 첫 번째 인자를 this로 바인딩하고, 이후의 인자들을 호출할 함수의 매개변수로 한다. apply 메서드 Function.prototype.apply(thisArg[, argsArray]) apply 메서드는 call 메서드와 기능적으로 완전히 동일하다. 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다. call과의 차이는 호출 함수의 매개변수를 전달하는 방식에서만 있다. call / apply 메서드의 활용 call, apply 메서드는 명시적으로 별도의 this를 바인딩하면서 함..
문제 발생 [프로그래머스 소수만들기 문제] 얕은 복사를 한 arr에 push로 값을 넣고, 결과값(배열)을 newArr에 할당하려고 했다. 당연히 push()의 반환값이 실행 후 바뀐 배열일 거라고 생각하고.... 문제 원인 push() 메서드의 반환값은 바뀐 배열의 길이다!! 그래서 console.log(newArr)를 했을 때 type이 number인 2가 반환됐던 것. 그와중에 나는 하필 숫자 2를 push를 해서 newArr값(길이)인 2랑 무슨 연관이 있는 줄 알았는데.. 하필 문자열도 해본다는 것을 '2'라고 했다😅 마찬가지로 unshift() 메서드도 바뀐 배열의 길이를 반환한다. shift(), pop()은 제거한 원소를 반환한다. 해결 방법 위 사진의 마지막 예시처럼 push의 반환값을 ..
전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 전역 컨텍스트를 생성하는 주체가 전역 객체이기 때문. 브라우저에서 전역 객체는 'window', Node.js에서는 'global'이다. 전역 변수를 선언하면 자바스크립트 엔진은 전역 객체의 프로퍼티로 할당한다. 변수이면서 객체의 프로퍼티인 것. let a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); // 1 자바스크립트의 모든 변수는 특정 객체의 프로퍼티로서 동작한다. [변수 선언] 실행컨텍스트: 변수 수집 → Lexical Environment 프로퍼티로 저장 [변수 호출] 실행컨텍스트: L.E 조회 → 프로퍼티 값 반환 전역 공간에서 va..
문제 발생 [코드스쿼드 마스터즈 문제 - 3단계. 루빅스 큐브 구현] 큐브의 완전한 면을 3x3의 2차원 배열로 먼저 만들기 위해 arr1의 방식으로 6면을 만들었다. 그리고 큐브를 돌린 후 결과값을 다시 넣어줄 때 forEach 반복문을 돌리는데.. 문제가 발생했다. 3x3배열에서 오른쪽 열 값들을 바꾸기 위해 위의 forEach식을 사용했다.(오른쪽열이건 왼쪽열이건 똑같은 문제 발생함) 내가 예상했던 실행 과정 forEach 1번째 실행 [['O', 'O', 1], ['O', 'O', 'O'], ['O', 'O', 'O']] forEach 2번째 실행 [['O', 'O', 1], ['O', 'O', 2], ['O', 'O', 'O']] forEach 3번째 실행 [['O', 'O', 1], ['O',..
2-1 실행 컨텍스트란? - 실행 컨텍스트: 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 - 구성 방법: 전역공간(자동생성), eval함수(악마), 함수 실행 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련있는 코드들을 실행하고, 코드 실행이 종료되면 실행컨텍스트가 콜 스택에서 제거되고, 이전 컨텍스트를 다시 실행. 마지막으로는 전역 컨텍스트가 남고, 제거되고, 모든 코드 실행 종료. 전역 컨텍 → 컨텍1쌓임 → 컨텍2쌓임 → 컨텍3쌓임 → 3코드끝, 컨텍3 콜스택에서 제거 → 2코드끝, 컨텍2 콜스택에서 제거 → 1코드끝, 컨텍1 콜스택에서 제거 → 전역 컨텍 제거 → 빈 콜 스택, 종료 * ..