자바스크립트
[JavaScript] 프로퍼티 키를 동적으로 생성하기
프로퍼티 키로 사용할 표현식을 대괄호로 묶어야 합니다. var obj = {}; var key = 'hello'; // ES5: 프로퍼티 키 동적 생성 obj[key] = 'world'; // ES6: 계산된 프로퍼티 이름 // var obj = { [key]: 'world' } console.log(obj); 프로퍼티에 접근하기 var person = { name: 'Lee' } // 마침표 표기법에 의한 프로퍼티 접근 console.log(person.name); // Lee // 대괄호 표기법에 의한 프로퍼티 접근 console.log(person['name']); // Lee 여기서 아래와 같은 실수를 하기 쉬운데 var person = { name: 'Lee' } console.log(perso..
[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 변경, 페이지 로드 ..