Front End/Javascript (53) 썸네일형 리스트형 [JavaScript] 콜백(Callback) 함수 5(this 문제점) 이처럼 단순히 함수의 파라미터에 함수를 넘겨주면 끝이라 생각하기 쉽지만 자바스크립트의 콜백 함수 이용에는 몇가지 조심해야 할 주의점이 있습니다. 다음을 보겠습니다. 함수에서 this는 무엇일까요? function fn1() { console.log(`선억적 함수 this : ${this}`); console.log(this); } let fn2 = () => { console.log(`화살표 함수 this : ${this}`); console.log(this); } // 함수에서 this는 기본적으로 전역객체의 window로 정해져 있습니다. fn1().. [JavaScript] 콜백(Callback) 함수 4(활용 사례) 1. 이벤트 리스너로 사용로 사용 let button = document.querySelector("#btn1"); button.addEventListener('click', ()=>{ alert('눌렀냐!!!') }); document.querySelector("#btn2").addEventListener("click", function(){ alert(`${this.innerText}!!!` ); });2. 고차함수에 사용 고차 함수(Higher-Order Function) 라는 용어를 얼핏 들어본 적이 있을 것입니다. 고차 함수란, 함수를 파라미터.. [JavaScript] 콜백(Callback) 함수 3(인사하기) 콜백함수의 또다른 예제 입니다.하나의 함수가 환영인사와 마지막 인사를 모두 수행합니다. ex03.html 파일을 다음과 같이 만듭니다.12345678910111213141516171819202122232425262728293031323334353637!DOCTYPE html>html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>자바스크립트 콜백 함수 란?/title> script> function say_hello(name) { document.write(`"${name}"님 안녕하세요. 반갑.. [JavaScript] 콜백(Callback) 함수 2(계산기) 다음은 숫자 2개를 받고 원하는 계산을 해주는 함수를 콜백함수를 이용해서 만들어 보았습니다.계산식을 고정하면 한가지 기능만을 가지지만 계산식을 함수로 받으면 하나의 함수가 다양한 기능을 가지는 똑똑한 함수가 되어 더욱 효과적으로 사용이 가능해 집니다. 다음과 같은 게산식을 받는 함수를 만들어 봅시다, // 세번째 매개변수가 계산해 주는 함수이다. function calc(num1, num2, callback){ return callback(num1, num2); // 함수 호출!!! } 두 수의 덧셈을 하고 싶다면 다음과 같이 호출 합니다. calc(num1, num2, (a,b)=>a+b) 두 수의 곱셈을 하고 싶다면 다음과 같이 호출 합.. [JavaScript] 콜백(Callback) 함수 1 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말합니다. 콜백 함수 사용 다음과 같은 함수가 있다고 하면 다음과 같이 3가지 방법으로 실행이 가능합니다. // 두번째 매개변수가 함수 입니다. function greeting(name, callback){ let say = `안녕하세요!! ${name}님 반갑습니다.!!!`; callback(say); // 함수 호출!!! } 1. 익명의 함수 사용 greeting('한사람', function(message){ // 익명함수 전달 console.log(message); .. [JavaScript] 맵(Map) to string, string to Map Map -> String (Map to String)JSON.stringify(Array.from( map.entries())); let map = new Map(); map.set(1,'한사람').set(2, '두사람').set(3,'세사람'); let array = Array.from(map); let str = JSON.stringify(array);String -> Map (String to Map)new Map(JSON.parse(str)); let map = new Map(JSON.parse(str)); ex05.html 파일을 다음과 같이 만듭니다.123456789101112131415161718192021222324252627282930.. [JavaScript] 맵(Map) to Object, Object to Map Object.entreisobject를 map으로 변환합니다.let map = new Map(Object.entries(obj));Object.fromEntriesmap을 object로 변환합니다.자료가 map에 저장되어있는데, third-party code에서 자료를 object로 넘겨받길 원할 때 이 방법을 사용할 수 있습니다. let obj = Object.fromEntries(map); ex05.html 파일을 다음과 같이 만듭니다.1234567891011121314151617181920212223242526272829303132333435363738394041424344!DOCTYPE html>html lang="ko"> head> meta charset="UTF-8"> meta .. [JavaScript] 맵(Map) 객체의 메서드들 Methods(메서드들)new Map() – 맵을 만듬 map.set(key, value) – key를 이용해 value를 저장 map.get(key) – key에 해당하는 값을 반환함 (key가 존재하지 않으면 undefined를 반환) map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환. map.delete(key) – key에 해당하는 값을 삭제 map.clear() – 맵 안의 모든 요소를 제거 map.size – 요소의 개수를 반환 Iteration(반복자)map.keys() – key를 모은 iterable object를 반환 map.values() – value을 모은 iterable object를 반환 map.entries() – [key, value].. 이전 1 2 3 4 5 6 7 다음
