Frontend/Javascript 4

알면 유용하게 쓸 수 있는 객체 함수 모음

○ sort() .배열에서 쓰인다. .ex) const a = ['a', 'c', 'b', 'd']; a.sort(); => ['a', 'b', 'c', 'd']; .ex) const b = ["10000", "4", "3", "6", "1"]; ○ localeCompare() .문자열 비교 .class형이나 함수의 여러 필드와 비교할 때 문자열을 비교해야하는 경우가 있는데 그 때 크기를 비교할 수도 있겠지만 () b.sort((a, b) => a.localeCompare(b)); => ["1", "10000", "3", "4", "6"] 여기는 그냥 sort로 해도 같은 결과가 나온다. 문자열 sort이기 때문에. ○ reverse() .배열에서 쓰인다. .순서를 반대로 바꿔준다. ○ split(pat..

Frontend/Javascript 2021.03.13

Event Bubbling/Capturing

쉽게 말해 이벤트에 전파이다. browser가 이벤트를 어떻게 인식할까를 생각한다면 조금 더 와닿게 쉽다. html element들은 트리구조로 되어있고 body가 최상위 구조라고 한다면 그 밑에 자식들을 두는 그런 형태이다. t tes test function handleClick(event) { console.log(event.currentTarget.className); } const one = document.querySelector(".one"); one.addEventListener("click", handleClick); 예를 들어 이 상태에서 three를 클릭하면 one이 console에 찍힌다. three를 클릭했는데도 one이 찍힌 이유는 click event가 상위element인 on..

Frontend/Javascript 2021.03.09

Promise란?

한 마디로 비동기 통신에서 사용하는 객체라고 할 수 있다. 전에는 call back함수로 데이터를 받았다면 ex) // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌 function getData(callbackFunc) { $.get('url 주소/products/1', function(response) { callbackFunc(response); }); } // $.get()의 response 값이 tableData에 전달됨 getData(function(tableData) { console.log(tableData); }); 이렇게 되면 흔히들 말하는 call back지옥에 빠지기도 쉽고 개인적으로 한 눈에 와닿기가 쉽지않다. 이후에 나온게 Promise객체인데 ..

Frontend/Javascript 2021.03.09