JavaScript
[JavaScript] map과 forEach 그리고 둘의 차이점
1. map map은 굉장히 많이 쓰이는 메소드로 배열을 하나하나 돌며 처리할 작업이 있을 경우 사용됩니다. 기본 구조는 다음과 같습니다. array.map((currentValue, index, array) => { // callback Function }, thisArg) currentValue : 현재 array내의 값 index : 현재 array 값의 인덱스 array : map이 돌고있는 array 자체 thisArg : 콜백함수 내에서의 this 예제 const array = [10, 20, 30, 40, 50] array.map((a, b, c) => { console.log(a) console.log(b) console.log(c) }) // 10 // 0 // [ 10, 20, 30, ..
JavaScript Scope 와 Closure
Scope란 변수에 접근할 수 있는 범위를 나타냅니다. 블록 레벨 스코프(Block-Level Scope)를 따르는 C계열 언어들과 다르게 자바스크립트는 함수 레벨 스코프(Functional-Level Scope)를 따릅니다. 다음을 보면 function num() { var x = 10 } console.log(x) // ReferenceError: x is not defined x는 num() 이라는 함수 안에 선언이 되었기에 ReferenceError가 납니다. 즉, 외부에서는 접근하지 못합니다. 반면 다음을 보면 if (true) { var x = 10 } console.log(x) // 10 x는 if문 안에 선언이 되었습니다. C계열의 언어라면 블록안에 선언되어 접근하지 못했겠지만 자바스크립트..
Debug JavaScript in Chrome
크롬 브라우저의 DevTools에서 JavaScript 문제를 디버깅하기 위한 기본 WorkFlow를 설명합니다. Step 1: Reproduce the bug 버그를 일관되게 재현하는 일련의 작업을 찾는 것은 항상 디버깅의 첫 번째 단계입니다. 1. 데모페이지를 위해 아래 링크를 누르십시오. 링크가 새 탭에서 열립니다. Open Demo 2. Number 1 에 5 를 입력하세요. 3. Number 2 에 1 을 입력하세요. 4. Add Number 1 and Number 2 버튼을 클릭하세요. 결과가 6이어야 하지만 51이 나옵니다. 이것이 우리가 디버그 해야할 점입니다. Step 2: Get familiar with the Sources panel UI DevTools는 CSS 변경, 페이지 로드 ..