What reduce()에 대한 정의는 사실 간단하다. 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다고 MDN에 정의되어 있다. 사용하는 방법도 간단하다. 콜백 함수를 사용하므로, 콜백 함수의 매개 변수에 순서대로 누산기(acc), 현재 값(cur), 현재 인덱스(idx), 원본 배열(src)을 집어 넣으면 된다. 주로 사용되는 게 누산기와 현재 값인데, 여기서 누산기를 그냥 reduce()가 가지고 있는 작은 저장소 정도로 이해하면 쉽다. reduce() 메서드는 이러한 reducer 덕분에 웬만한 다른 배열 메서드를 대신하여 사용할 수 있다. 즉 메서드를 함수처럼 사용할 수 있는 것이다. 때문에 많은 개발자들이 reduce()를 좋아한다. 단순히 배열 원소..

들어가기 전 이 글은 자바스크립트의 비동기식 처리에 대해서 간단히 이해하는 정도의 내용만 담고 있다. 그중에서도 Promise와 async-await 문법에 대해서만 다룰 예정이며, 이것 또한 맛보기 수준의 지식만을 전달하려 한다. 비동기 처리는 아무래도 초보 개발자들 입장에서는 이해하기 어려운 부분이다. 나 역시 그렇다. 때문에, 만약 A-Z까지 제대로 된 비동기식 처리를 공부하고자 한다면 '뒤로 가기'를 누르는 것도 조심스레 추천드린다. 하지만, 필자처럼 이제 개발을 막 공부하는 입장이라면 생각하는 수준이 고만고만(?)하고 사고하는 과정이 비슷해서 오히려 도움이 될 수도 있다. (최대한 이해하기 쉽게 비유를 이용하여 설명하였다.) 나도 비동기를 이해하는 데 오래 걸린 만큼 이 글에서는 쉽게 풀어서 설..

for~in const arr = [1, 2, 3, 4, 5]; for (let value in arr){ console.log(value); // 0, 1, 2, 3, 4 (인덱스 반환) } 배열에서 for~in문을 사용하면 각 배열 원소의 인덱스를 반환한다. 초기값은 인덱스를 나타내며, indexOf() 메서드를 사용한 것처럼 배열 전체 원소의 인덱스를 반환해준다. const obj = {name: "Shawn", age: 29, sex: "Male"}; for (let value in obj){ console.log(value) // name, age, sex (key 반환) console.log(obj[value]) // Shawn, 29, Male (value 반환) } 객체에서 for~in문을..

arr.map(callback) let arr = [1, 2, 3, 4, 5]; let arrMap = arr.map(el => el * 2) console.log(arrMap); // [2, 4, 6, 8, 10] map()은 배열의 각 요소 모두에게 한 번씩 접근하는 순회 메서드로, 연산자를 이용하여 요소의 값을 바꿔줄 수 있다. 콜백함수로 파라미터 값에 배열의 인덱스 요소(el)를 넣고 return 값으로 배열의 인덱스 값에 접근한다. 위의 코드는 배열의 모든 요소에 곱하기 2를 해주었고, 그 결과 배열 전체가 곱하기 2가 된 모습을 볼 수 있다. map()의 가장 큰 특징으로는 새로운 배열을 반환한다는 것과 식 안에서 return이 가능하다는 점이다. arr.forEach(callback) let..

개념 특정 모달창을 띄우거나 유저들이 그냥 지나치면 안 되는 내용의 페이지를 표시하기 위해 개발자는 웹사이트의 스크롤을 제어할 수 있다. Jquery를 이용하여 간단하게 제어하는 방법을 알아보자. 방법 스크롤 제어하기 $(window).on('scroll touchmove mousewheel, function(e){ e.preventDefault(); }'); // 스크롤 제어 document.documentElement.style.overflowY = "hidden"; // 스크롤 숨김 window에 스크롤과 터치, 마우스 휠 동작을 e.preventDefault()를 통하여 제어해주었다. (window 대신 html 혹은 특정 엘리먼트(부모 단위)의 id/class를 입력해줘도 된다.) e.preve..