반응형 JavaScript49 버블링(bubbling) vs 캡처링(capturing) eventListener() vs onclick()를 이해하기 위해 간단히 개념만 설명했다. 자세한 설명은 하단 출처 참고. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 3개의 요소 ( form > div > p )가 있다 form 안에 div 안에 p요소가 있는 형태. 직접 확인 : plnkr.co/plunk/FDfhm3tzwTz3B6Fb 가장 안쪽의 p요소를 클릭하면 다음과 같은 실행과정이 발생한다. 에 할당된onclick핸들러가 동작. 바깥의 에 할당된 핸들러가 동작. 그 바깥의에 할당된 핸들러가 동작. document객체(최상위 .. 2020. 10. 16. addEventListener() vs onclick() 사용법 document.getElementById('trigger').addEventListener('click',()=>{ alert('hello!'); },false); document.getElementById('trigger').onclick = () => { alert('hello!'); } addEventListener()를 사용하는 방법이 모던하다는 이유 1. 여러 개의 메서드를 동시에 등록할 수 있다. do1 함수는 바로 아랫줄에서 do2 함수로 덮어 씌워졌기 때문에 동작하지 않는다. 반면, 한 클릭이 일어났을 때 여러가지 일이 동작하게 하고 싶고, 함수가 분리되어 있다면 addEventListener로 작성하는 것이 .. 2020. 10. 16. Function.prototype.apply() 2020. 10. 16. Infinity 전역 속성 2020. 10. 16. Object vs Map Map Map 객체는 key-value 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 collection이다. 어떤 값(객체, primitive value 포함)이라도 key와 value로 사용할 수 있다. Map 객체는 요소의 삽입 순서대로 엘리먼트(내부 값)를 순회한다. for(let key of map) 반복문은 각 순회에서 [key, value]로 이루어진 배열을 반환한다. **for(let key "in" map) 반복문은 사용할 수 없다. Object vs Map Map은 key의 타입으로 "모든 타입"을 사용할 수 있다는 점을 잘 활용해야 할 것 같다. new Map()으로 인스턴스를 생성하고, .set()을 이용해서 값(value)을 삽입한다. .get()을 이용해서 값(value)에 접근 .. 2020. 10. 15. 메모이제이션 Memoization 메모이제이션이란 프로그래밍을 할 때 반복되는 결과를 메모리에 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법을 말한다. 클로저를 사용해서 유지되는 저장공간을 이용해 함수를 반복적으로 수행할 때 함수 내부의 실행횟수를 줄일 수 있다. 메모이제이션을 사용해서 팩토리얼 함수 구현 let factorial = (function() { let save = {}; let fact = function(number) { if (number > 0) { let saved = save[number - 1] || fact(number - 1); let result = number * saved; save[number] = result; console.log(saved, result); return result.. 2020. 10. 14. 클로저를 이용한 피보나치 수열을 리턴하는 메서드 출력할 때 마다 피보나치수열을 차례로 리턴해야 함 클로저의 정의나 특징은 알고 있었으나, 문제에서 파라미터가 정의되지 않았다는 점과 function을 리턴해야 한다는 점이 초기 접근자체를 어렵게 했다. 내가 여태 배운것 중 가장 이해도가 낮다고 생각하는 고차함수의 개념을 이용해야하기 때문에 더 힘들었던 것 같다. 실마리는 검색에서 찾았다. 클로저를 이용해서 함수를 리턴하며 실행하는 방법과 클로저 함수(내부함수)를 이용할 때 내부함수엔 얼마든 파라미터를 써도 된다는 점을 알게되자 조금씩 생각의 가닥이 잡히는 느낌이었다. 우선 몇번 풀어봤던 피보나치 수열의 값을 리턴하는 클로저 함수를 작성했다. let fibo = function(n){ if(n 2020. 10. 12. TIL 1011 복리계산 거듭제곱 아스키코드 repeat() 빈 배열, 객체의 타입 객체의 메서드 정의 배열에서 가장 긴 문자열 연이율을 알 때 복리계산 내코드 function interest(interestRate) { /* 원금*이자율/100 > 2 될 때 까지 year를 카운트 */ let year=1; while(true){ if((1+(interestRate/100))**year >= 2){ return year; } year++; } } 복리로 증가하는 원금 일반식 ( 원금 + (연이율 / 100) )^year(연수) 원금을 1로 두고 원금이 2배 이상되는 시점까지 걸리는 연수를 카운트했다. 참고 : www.mathsisfun.com/money/compound-interest.html 다른방법 function computeWhenDouble(interestRate) { let rate = 1 + interestRate .. 2020. 10. 12. TIL 1010 arr.slice() VS str.slice() arr.slice(begin, end) vs str.slice(begin, end) 전체적으로 동일한 동작이다. 문자열을 다룰 때 배열처럼 사용하기 때문인듯. 인자를 입력하지 않으면 배열(문자열) 전체를 얕은복사해서 리턴. 음수가 인자로 들어오면 배열(문자열)의 끝에서부터의 길이를 나타냅니다. ex) arr.slice(-2)하면 배열 마지막 두개의 요소를 리턴 ex) str.slice(-2)하면 문자열 마지막 두글자를 문자열로 리턴 arr[begin]부터 arr[end-1]까지의 요소를 가진 새로운 배열 리턴 end가 없으면 arr[begin]부터 arr[length-1]까지 str[begin]부터 str[end-1]까지의 문자를 가진 새로운 문자열 리턴 end가 없으면 str[begin]부터 str[l.. 2020. 10. 12. 이전 1 2 3 4 5 6 다음 반응형
