모던자바스크립트 (4) 썸네일형 리스트형 <자바스크립트> 콜백 1. 콜백 * 소개 - 실무에서 비동기 동작처리를 할 때 생기는 문제를 먼저 살펴보자. - 대표적인 비동기 동작으로 스크립트나 모듈을 로딩하는 것이 있다. function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script); } - 위는 src에 있는 스크립트를 불러와서 다큐먼트에 추가하는 함수이다. 이 안에는 우리가 사용하고 싶은 harryFunc라는 함수가 들어있다고 가정하자. loadScript('/harry/script.js'); harryFunc(); - 위에서 정의한 함수를 사용하여 스크립트를 불러오고 함수를 실행했다. 그러나 안타깝게도 에러가 발.. <자바스크립트> 구조 분해 할당 * 배열 분해 - 개발을 하다보면 객체나 배열의 원소들을 변수로 받아야 할 상황이 있다. 이 때 유용하게 쓰이는 것이 구조 분해 할당이다. - 배열의 원소가 변수로 각각 할당되는 예시를 보자. let arr = ["Harry", "Yoon"] let [firstName, lastName] = arr; console.log(firstName) // Harry console.log(lastName) // Yoon - 배열의 원소가 각각 firstName과 lastName에 순서대로 할당되었음을 알 수 있다. - 이렇게 하면 배열의 요소를 인덱스로 이용해서 하나하나 할당하는 것보다 훨씬 효율적이다. - 위의 경우 배열 대신 "Harry Yoon".split(' ') 을 넣더라도 동일하게 동작할 것이다. - 배.. <자바스크립트> 숫자형 자료 이번 장에서는 자바스크립트에서 다루는 일반적인 숫자형 자료에 대해서 공부해보자. * toString - toString 메서드는 숫자를 원하는 진법으로 변환한다. let num = 21; console.log(num.toString(16)); // 15 console.log(num.toString(2)); // 10101 console.log(21..toString(36)); // 1 - 위는 21이라는 숫자를 각 16진법과 2진법으로 나타낸 것이다. - 숫자에 직접 toString을 사용하려면 소수부로 인식되지않도록 두 개의 점을 사용해야한다. * 수학 함수 - 자바스크립트 내장 객체인 Math에는 유용한 수학관련 함수들이 많다. 그 중 먼저 어림수를 구하는 함수들을 알아보자. - Math.floor .. <자바스크립트> 화살표 함수와 콜백 함수 * 함수 표현식 - 함수를 표현하는 방식에 대해서는 이미 예전에 다뤘다. 다시 살펴보자면 다음과 같다. function showHi() { alert("Hello"); } - 위는 함수 선언문 방식이다. let showHi = function() { alert("Hello"); }; - 위는 함수 표현식 방법이다. 변수에 함수를 할당하는 것처럼 사용하였다. - 함수 선언문 방식은 if {...}, for {...} 과 같이 중괄호로 만든 방식이므로 ;(세미콜론)이 없더라도 구문의 끝임이 내장되어 있다. 이와 달리 함수 표현식 방식은 변수를 사용했으므로 구문의 끝을 나타내야한다. 따라서 ; 를 사용하였다. - 함수 선언문과 함수 표현식의 가장 큰 차이는 호출이다. 선언문은 어디에 작성하더라도, 심지어 호출.. 이전 1 다음
