피리부는 사나이 (pied piper)

이벤트 핸들러 : 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수. 1. 이벤트 핸들러 어트리뷰트 방식 : HTML 요소의 어트리뷰트 중에 이벤트에 대응하는 핸들러 어트리뷰트 값으로 함수 호출문 등의 statement를 할당하면 핸들러 등록 됨 CLick me! 하지만 HTML과 JS는 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음. 그러므로 이 1번 방식은 사용하지 않는 것이 더 좋음 2.이벤트 핸들러 프로퍼티 방식 : window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 핸들러 프로퍼티를 가지고 있음. 프로퍼티에 함수를 바인딩하면 이벤트 핸들러 등록 됨 const $button = document.querySelector('button');..

자바스크립트 언어내에서 비동기를 가능케하는 대표적 3가지 방법 콜백 : 자바스크립트에서는 함수의 인자 값으로 함수를 이용할 수 있다. 인자를 통해서 바깥에 있는 함수를 내부에서 실행시키는 것이다. 그러므로 콜백이라는 것은 다른 함수에 불러오는 함수다. 그리고 그것은 두 번째 함수를 실행 시킬 것이다. 콜백함수의 예시를 보자 function printString(){ console.log("Tom"); setTimeout(function() { console.log("Jacob"); }, 300); console.log("Mark") } printString(); 만약 이 코드가 일반적으로 동기적 코드라면 아래 순서대로 나와야할 것이다 Tom => Jacob => Mark (동기적 순서) 그러나 setTi..

배열의 비 구조화 할당 변수에 배열 요소 (인덱스)를 하나하나 할당하는 것을 간단화 시킬 수 있음 let arr = ["one", "two", "three"]; //1. 기존의 방식 let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); //2. 더 나은 방식 let [one, two, three] = arr; //배열안에 변수 할당 후 오른 쪽에 배열 할당하면 인덱스 순서대로 부여 //대괄호를 이용해서 배열을 변수에 할당하는 것은 비 구조화 할당이라고 함 객체의 비 구조화 할당 객체 프로퍼티 요소를 변수에 하나하나 ‘표기법'으로 할당하는 것을 간단화 시킬 수 있음 //기존 방식 let object = { ..

falsy, truthy 값을 활용해서 유용하게 조건문 처리하기 null과 undefined 예외 처리 간결하게 하는 방법 ⚠️ 1. 일반적인 방법 : 논리 연산자 이용하는 방법 ❗ 2. 더욱 유용한 방법 (Truthy & Falsy) "" false, NaN, undefined, null, 0 총 6가지 기본 데이터 타입는 false로 boolean 타입으로 변환해준다. 그 외에는 모두 true로 변환 thus, undefiend와 null을 걸러내는 예외처리를 조건문으로 구현하고자 할 때 ‘!’만 붙여주면 falsy 타입이 들어오면 NOT과 만나서 true로 반환되기 때문에 매우 유용하다. 삼항 연산자 삼항 연산자 중첩해서 사용하기 let score = 66; score >= 90 ? console...

자바 스크립트에서 정말 중요하고 많이 쓰이는 ‘배열' 그 배열을 다룰 때 사용할 때 매우 유용한 내장 함수들을 알아두는 것은 정말 정말 중요하다. 배열 내장함수를 왜 써야하는가? 안 써도 되잖아? 맞는 말이다. 하지만 더 빠르고 간편한 방식이 있는데 그걸 모르는 것은 비효율적이라고 생각한다. 간단히 예시를 들어보자 (예시) 배열 내장함수 없이 배열 순회하는 방법 for문과 length 프로퍼티를 이용하여 순회하기 for arr = [1, 2, 3, 4]; for (i = 0; i < arr.length; i++) { console.log(arr[i]); //1, 2, 3, 4 차례로 배출 나 역시 이 방법으로 배열을 순회해왔다. 하지만 배열 함수라는 것을 접하고 부터는 잘 안쓰게 되었다. 내장함수를 이용..

객체 객체 리터럴 객체란? : 객체 타입은 다양한 탕비의 값을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만, 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합, 키와 값으로 구성 함수도 값으로 취급할 수 있다. 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름 let person = { name: 'Son', age : 29 }; 객체는 프로퍼티와 메서드로 구성 Property : 객체의 상태를 나타내는 값 (데이터) +Method : 프로퍼티를 참조하고 조작할 수 있는 동작 💡 객체를 이해해야 함수를 제대로 이해할 수 있다. 반대도 성립 객체와 함수를 분리해서 설명하는 것은 옳지 않지만, 잘 이해..

객체 리터럴 객체란? : 객체 타입은 다양한 탕비의 값을 하나의 단위로 구성한 복합적인 자료구조다. 또한 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이지만, 객체 타입의 값, 즉 객체는 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성된 집합, 키와 값으로 구성 **함수도 값으로 취급할 수 있다. 함수일 경우 일반 함수와 구분하기 위해 메서드라고 부름** let person = { name: 'Son', age : 29 }; 객체는 프로퍼티와 메서드로 구성 +Property : 객체의 상태를 나타내는 값 (데이터) +Method : 프로퍼티를 참조하고 조작할 수 있는 동작 프로퍼티 : 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. let person = { name: 'Lee..