이걸 왜 비교하나요?배열은 우리가 자바스크립트를 사용하면서 굉장히 많이 쓰이는 구조 중 하나이다. 하지만, 배열에도 우리가 알고 있는 일반적인 배열이 있고 배열인 척하는 객체도 있고, 배열의 기능을 가진 객체도 있다. 우리가 배열을 자주 사용하는 이유에는 바로 반복문으로 요소를 순회 가능하기 때문이라는 점도 있을 텐데, 반복문을 사용할 때 어떤 건 for문이 되는 것도 있고 안 되는 것도 있고, 배열 메서드를 사용 못 하는 경우도 있기도 하고, 또 for~of문은 왜 되는 건지에 대해 모르고 넘어가는 경우 등 헷갈리는 경우가 많았을 것이다. 이번 기회에 배열 비스무리한 것들을 모두 정리하고, 또 그것들 사이에서 반복문은 어떤 게 사용 가능한 지 그리고 왜 그렇게 되는지에 대한 이유도 정리해보고자 한다. ..

이터러블 속성을 알아야 하는 이유자바스크립트 ES6가 나오면서 이터러블이라는 개념이 등장하였다. for~of문, Set, Map, 스프레드 연산자, 구조 분해 할당 등 ES6의 등장과 함께 나온 개념들 대다수가 이터러블 속성과 연관된 개념들이기 때문에 해당 기능들의 동작 원리를 이해하기 위해서는 이터러블 속성을 한번 짚고 넘어갈 필요는 있다. (예를 들어, Set과 Map 같은 경우는 배열도 아닌데 *어떻게 배열과 비슷하게 동작할 수 있는거지? 라고 질문하면, Set과 Map은 이터러블 객체이기 때문이라고 답변할 수 있다.) * Set과 Map이 배열과 비슷하게 동작하는 지에 대한 상세 설명1) Set과 Map은 배열과 달리 인덱스를 사용하지 않는데 for~of문으로 순회할 수 있음 ☞ 이터러블 객체이기..

객체 지향 프로그래밍과 클래스 문법class Person { constructor(name, age) { this.name = name; this.age = age; } sayHi() { console.log(`Hello! My Name is ${this.name}`); }}const kim = new Person('kim', 30); // {name: 'kim', age: 30}kim.sayHi(); // Hello! My Name is kim자바스크립트의 클래스 문법은 ES6에서 도입되어 객체 지향 프로그래밍을 더 쉽게 구현하도록 도와주는 역할을 한다. 여기서 객체 지향 프로그래밍이란 객체라는 독립적인 단위로 나누고, 이 객체들을 재활용하여 ..

쓰로틀링과 디바운싱이 뭘까?쓰로틀링과 디바운싱, 처음 들어보면 굉장히 낯선 단어일 수밖에 없다. 쓰로틀링과 디바운싱을 모르더라도 우리는 코딩 중에 이러한 개념을 이미 코드에 적용하고 있을 수도 있다. 특히, addEventListener를 사용했다면 말이다. 쓰로틀링과 디바운싱은 이벤트 핸들링에서 이벤트의 빈도를 제어하고, 너무 자주 발생하는 이벤트를 제한하는 목적으로 사용된다. 예를 들어서, 특정 함수를 실행하는 클릭 이벤트를 하나 구현했다고 해보자. 쓰로틀링과 디바운싱을 적용하지 않은 클릭 이벤트는 그냥 클릭할 때마다 특정 함수를 계속 실행하기만 할 것이다. 그런데, 클릭할 때마다 특정 함수를 실행하도록 만든 건데 이게 과연 잘못됐다고 할 수 있을까? (잘못됐다고 할 수 있다.) 만약, 세계에서 클릭..

Promise.all이란? 비동기 처리를 하는 Promise 객체가 여러 개일 경우에 이 비동기 객체들이 모두 처리되었는지를 확인하고 싶을 때가 있을 수 있다. 예를 들어, A, B, C라는 3개의 Promise 객체가 있다고 하자. 각각의 객체는 변수 data에 값을 넣어주는 기능을 갖고 있다. 나는 data에 모든 값들이 채워지면 "data 완성!"이라는 문구를 띄우고 싶다. 이때, 필요한 건 A, B, C라는 비동기 함수들이 모두 resolve 되었는 지를 확인하는 것이다. 이 역할을 해주는 게 바로 Promise.all이다. Promise.all()은 인자로 배열 혹은 순회할 수 있는 iterable한 객체를 받으며, 이 안에 들어간 Promise 객체들의 resolve 혹은 reject의 값을 ..