오늘도 디벅잉

🎯 { reduce() 메서드 } 무엇인가요? 배열의 각 요소에 대해 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 배열 고차 함수입니다. 어떻게 사용하나요? const array1 = [1, 2, 3, 4]; const reducer = (previousValue, currentValue) => previousValue + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // 15 reduce 메서드 구성: reduce(reducer, initialValue); reducer 함수 구성: re..

🎯 addEventListener 메서드 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다. 대상으로는 Element, Document, Window 등이 있다. 대상.addEventListener(type, function () {}); type은 반응할 이벤트 유형이다. 주요 이벤트 유형 "click", "focus", "resize", "scroll", "wheel", "mousemove" 등이 있다. addEventListener 함수의 콜백 함수의 this addEventListener 함수의 콜백 함수에 화살표 함수를 정의하면 화살표 함수 내부의 this가 Window를 가리킨다. 콜백 함수 내에서 대상과 관련한 프로그래밍을 위해 this를 사용할 경우, funciton 키워드를 사..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 3. 문자열(String) 3-1. length 프로퍼티 'Hello'.length; // -> 5 '안녕하세요!'.length; // -> 6 3-2. chartAt 메서드 const str = 'Hello!'; for (let i = 0; i < str.length; i++) { console.log(str.charAt[i]); // H e l l o } 3-3. slice 메서드 - 대상 문자열 변경 X const str = 'hello world'; // 0번째 인덱스부터 5번째 인덱스까지 반환 (5번째 인덱스는 미포함) str.slice(0, 5);..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 2. 정규표현식(RegExp) *정규표현식의 표현 방법 - /정규표현식/플래그 (ex. /[a-z]/g) 2-1. 플래그 i(Ignore case) - 대소문자를 구별하지 않고 한 번만 검색 (전체 검색시 g와 같이 사용 - /ig) g(Global) - 대소문자를 구별하여 전체를 검색 (대소문자 구별하지 않으려면 i와 같이 사용 - /ig) 2-2. 반복검색 - {} const target = 'A AA BB Aa Bb AAA'; // 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다. const regExp = /A{1,2}/g; // 매칭..

🎯 일정에 당장 급한 코딩테스트가 생겨 빠르게 정리해보는 JS 핵심 문법 📌 참고자료 - 모던 자바스크립트 Deep Dive (이웅모 / 위키북스) 1. 배열(Array) 1-1. 순회 for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } 1-2. 삭제 const arr1 = [1, 2]; let result = arr1.pop(); console.log(result); // 2 console.log(arr1); // [1] // pop 메서드는 원본 배열을 변경함 const arr2 = [1, 2, 3, 4, 5]; arr2.splice(1, 2); console.log(arr2); // [1, 4, 5] console.log(arr2.lengt..

목차 객체란? 객체 리터럴에 의한 객체 생성 Object 생성자 함수에 의한 객체 생성 생성자 함수에 의한 객체 생성 Object.create 메서드에 의한 객체 생성 객체(Object)란? 자바스크립트의 객체는 키(key)와 값(value)으로 구성된 프로퍼티(Property)들의 집합 프로퍼티(property) - 데이터 값 메소드(method) - 데이터를 참조하고 조작하는 동작(behavior), 프로퍼티 값이 함수인 경우 프로퍼티 ⊃ 메소드 객체 리터럴에 의한 객체 생성 ※ 리터럴 - 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법 var person = { name: 'Park', sayHello: function() { console.log(`Hello! My ..

강의 내용 (무료) 바닐라 JS로 크롬 앱 만들기 (Momentum) 바닐라 JS로 그림판 만들기 한줄 요약 JS 입문자들에게 강추! 추천 대상 1. HTML, CSS를 학습한 프로그래밍 입문자 2. 인터넷 강의를 집중해서 들을 수 있는 사람 3. 과제가 주어지면 더욱 열심히 하게 되는 사람 (챌린지 참여시) 총평 드디어 자바스크립트! 자바스크립트를 통해 HTML, CSS를 조작하고, 데이터를 다루고, API를 활용하는 작업이 흥미로웠다. 우리가 많이 사용하는 Momentum 이라는 크롬 앱을 카피해 봄으로써 앞으로의 학습에 대한 자신감이 붙는다. 코코아 클론 챌린지에 이어 JS 챌린지도 아자아자@🐱‍🏍