JavaScript

이터러블 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현하거나 프로토타입 체인을 통해 상속받은 객체. - for ... of 문으로 순회할 수 있습니다. - 스프레드 문법, 배열 디스트럭처링 할당을 사용할 수 있습니다. const arr = [1, 2, 3]; // Symbol.iterator 메서드 console.log(Symbol.iterator in arr) // true; // for .. of 문 for (const val of arr) { console.log(val); } // 스프레드 문법 const arr2 = [...arr]; // 배열 구조분해 할당 const [val1, val2] = arr; 이터레이터 이터러블 객체의 Symbol.iterator 메소드를 호출하면..

정리하는 이유 실무에서 사용하거나 알고리즘 테스트를 볼 때, 매번 정규표현식 사용법을 까먹어서 다시 구글링을 하는 경우가 많습니다. 정규표현식 사용법을 찾기 위한 시간적인 비용을 줄이기 위해 자주 사용되는 패턴을 정리해보았습니다. 정규표현식의 정의 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어 (formal language). 위의 정의는 표현이 어렵게 되어 있는데, 쉽게 말해서 문자열에서 특정 패턴을 찾아서 검색, 치환 등의 작업을 처리할 수 있는 방법이라고 생각하면 될 것 같습니다. 정규표현식과 관련된 자바스크립트 Prototype 메서드 1. RegExp.prototype.xxx - exec : 패턴에 매칭되는 문자들을 배열로 반환, 매칭하지 않으면 null 반환 - test..

프론트엔드 개발을 하다 보면 정말 많이 들어본 개념일 것입니다. 무의미하게 무수하게 발생하는 이벤트를 막기 위한 기법들입니다. 타이머 함수, setTimeout을 통해서 간단하게 구현할 수 있습니다. 쓰로틀링(Throttle) throttle은 영어로 조르다, 목을 조르다라는 의미를 가지고 있습니다. 이벤트의 목을 조른다(?)라고 볼 수 있는데요. 이벤트가 무수하게 발생하더라도, 일정 시간 동안 이벤트가 1번만 발생하도록 처리하는 것을 의미합니다. 스크롤 이벤트에 쓰로틀링을 적용해서 이벤트 최적화를 해볼 수 있는데요. 스크롤을 할 때 최적화하지 않으면, 이벤트가 무수히 많이 발생하기 때문입니다. 한 개의 버튼이 있고, 이 버튼을 누르면 로그인 기능이 동작한다고 가정해볼까요? 클릭방지를 하지 않는다면 유저..

목차 1. 2차원 배열을 순회하는 함수 2. 초기값을 이용하기 3. Array 생성자 + 반복문 사용 4. Array 생성자 + forEach 사용 5. Array.from + Array 생성자 사용 1. 2차원 배열을 순회하는 함수 // 반복문 이용 function traverse2dArray(arr, ROW, COLUMN) { for (let i = 0; i { let row ..

목차 1. 스코프 체인 2. 정적 스코프 (렉시컬 스코프) 3. 참고 1. 스코프 체인 스코프 체인이란, 식별자(변수 또는 함수)를 검색하는 과정을 의미합니다. 검색하는 과정에서 식별자를 찾지 못하면, 상위 스코프(또는 외부 스코프)에서 해당 식별자를 찾으려고 합니다. 식별자를 찾지 못하면 에러를 발생시키는데요. 하위 스코프에서 상위 스코프로 이동하면서 식별자를 찾는 과정이 꼬리에 꼬리를 무는 형태이기 때문에 체인이란 용어를 사용하는 듯합니다. let sky = 'global sky'; function printSky1() { console.log(sky); } function printSky2() { let sky = 'local sky'; console.log(sky); } printSky1(); /..

목차 1. 함수 선언문 2. 함수 표현식 3. 함수 프로퍼티 4. 참고 1. 함수 선언문 function isHoliday(work) { if (work) { return false; } return true; } 많이 사용하는 함수 선언 방식 중 하나입니다. 주요 특징으로는 다음과 같은 것들이 있습니다. 함수를 참조하는 식별자가 생성됩니다. 함수 호이스팅이 발생합니다. 함수(함수 객체) 프로퍼티를 가지고 있다. 함수 호이스팅이란, 호이스팅(hoisting)이란 말처럼 함수가 위로 끌어 올려지는 것을 말하는데요. 자바스크립트에서 런타임 이전에 함수를 미리 생성하기 때문에, 함수가 선언된 스코프에서 언제든지 실행할 수 있습니다. 함수 선언 전에 함수를 실행할 수 있습니다. isHoliday(false); ..

const arr = [1, 2, 3, 4, 5]; // 1부터 5까지 출력 for(let idx=0; i { console.log(value); }); forEach 메소드는 콜백 함수를 받는데요. 첫번째 파라미터로부터 배열의 값을 차례대로 받아올 수 있습니다. const arr = [1, 2, 3, 4, 5]; // 배열의 값과 인덱스를 차례대로 출력 arr.forEach((value, index) => { console.log(value); // 배열의 값 console.log(index); // 배열의 인덱스 }); 콜백 함수는 여러 개의 파라미터를 받는데요. 두번째 파라미터로부터는 배열의 인덱스 값을 받아올 수 있습니다. const arr = [1, 2, 3, 4, 5]; // 배열의 값과 인덱..

나의 착각 실제 개발을 하다보면, 비동기 함수들을 많이 사용하게 됩니다. "Ajax"라던가, "타이머 API", "이벤트 리스너" 등.. 실무에서는 잘 사용하고 있지만, 그 개념에 대한 정립이 부족하다는 생각이 들었습니다. 비동기 함수의 동작 방식을 ... 시간이 오래 걸리는 작업을 백그라운드에서 처리하고, 해당 작업이 완료되면 처리되는 개념으로 이해했었습니다. 이것은 굉장히 모호한 생각이죠. 자바스크립트는 싱글 쓰레드이기 때문에, 한번에 한 가지 일만 수행할 수 있는데요. 동기적으로 작업이 오래 걸리면 다음 작업을 못하고 멈춰버리게 됩니다. function a() { for(let i=0; i b, 또는 b -> a 순서) setTimeout 예시 setTimeout에 0초를 주고 실행하면 이것은 비동..