한 걸음씩

1. Array Callback Methods ► ForEach for ... of와 동일하고 요즘은 forEach 자주 쓰이지 않음 const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] // forEach numbers.forEach(function (el) { if (el % 2 === 0){ console.log(el) } }) // for ... of for (let el of numbers) { console.log(el) } // 2 4 6 8 10 14 ► Map ForEach와 동작 방식은 같지만 반환받은 값으로 새로운 배열을 생성함 const texts = ['sdf', 'are', 'seg', 'hre'] const ..

1. Scope & Block ► Scope 범위는 '변수 가시성'을 참조함 범위는 함수 // JS는 한정된 함수 안에 같은 이름으로 정의된 변수가 있을 경우 그 변수를 먼저 참조함 let bird = 'mandarin duck' function birdWatch(){ let bird = 'golden pheasant' console.log(bird); } birdWatch() // golden pheasant // 함수 안에 선언된 변수가 없다면 외부에 선언된 변수를 참조한다 let bird = 'mandarin duck' function birdWatch(){ console.log(bird); } birdWatch() // mandarin duck let deadlyAnimal = "Blue-Rin..

1. Functions 코드의 중복을 줄이는 데 유용 코드를 읽기 쉽게 만듦 ► Process 1. Define function funcName() { // do something } function singSong () { console.log('DO') console.log('RE') console.log('MI') } >> console창에 singSong입력하면 위와 같은 함수 출력 2. Run funcName(); // run once funcName(); // run again // console창에 다음과 같이 입력하면 singSong() // 다음과 같이 출력됨 >> Do >> RE >> MI - 함수 정의 전에 호출을 해도 작동은 되지만 함수 정의 후 호출하는 방식으로 진행할 것! ► ..

Todo List "new" - Add A Todo "list" - List All Todos "delete" - Remove Specific Todo "quit" - Quit App // 처음 시작할 때 let input = prompt('What would you like to do?') // todos 빈리스트 생성 const todos = [] // while문으로 'quit' or 'q'가 아닐경우 반복 시작 while (input !== 'quit' && input !== 'q') { // input 물음에서 list 입력 시 if (input === 'list') { // for문 돌려서 todos 리스트의 길이를 세서 인덱스와 목록을 출력 for (let i = 0; i < todos.le..

1. event ► event 무언가 일어났다는 신호, 사건 (모든 DOM 요소는 이러한 신호를 만들어 냄) 종류 : 마우스, 인풋, 키보드, 터치 등 DOM 요소는 event를 받고, 받은 event를 '처리'(이벤트 핸들러/처리기)할 수 있음 ► event handler 이벤트가 발생했을 때 실행되는 함수 (사용자의 행동에 어떻게 반응할지를 JS코드로 표현한 것) EventTarget.addEventListener(type, handler) EventTarget : DOM 요소 type : 특정 이벤트, 이벤트 이름 ('click') handler : 발생한 이벤트 객체를 수신하는 콜백 함수, 콜백 함수는 발생한 Event Object를 유일한 매개변수로 받음 .addEventListener(): 대..