Language (13) 썸네일형 리스트형 Javascript 오브젝트를 배열로 바꾸기 Array.from() Array.from(arrayLike)Array.from(arrayLike, mapFn) 유사배열 객체 arrayLike란 이터러블한 객체를 말합니다. 즉 인덱스로 원소를 표현할 수 있고, length 속성을 가지고 있는 객체입니다. Array.from()의 기본 사용법은 다음과 같습니다.Array.from("foo");// [ "f", "o", "o" ] String인 foo는 유사배열 객체이므로 각 원소를 분리해 배열을 생성합니다.const set = new Set(["foo", "bar", "baz", "foo"]);Array.from(set);// [ "foo", "bar", "baz" ] 중복되는 원소를 가지고 있는 배열을 Set에 넣어 중복 값을 없앤 후 다시 from을 사용해 배열로 만들어 .. Javascript 문자열 쪼개기 String.substring() substringsubstring() 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.str.substring(indexStart[, indexEnd])만약 indexEnd 가 생략된 경우, substring() 문자열의 끝까지 모든 문자를 추출합니다.만약 indexStart 가 indexEnd와 같을 경우, substring() 빈 문자열을 반환합니다.만약 indexStart 가 indexEnd보다 큰 경우, substring() 메서드는 마치 두 개의 인자를 바꾼 듯 작동하게 됩니다.length 속성과 함께 사용하여 특정 문자열의 마지막 문자들을 얻을 수 있습니다.// Displays 'illa' the last 4 charactersvar an.. 구조분해할당을 이용한 배열 swap (Distructing assignment) - arr[1]과 arr[2]의 순서를 arr[2]와 arr[1]로 바꾼다 - arr의 0번째, 2번째, 3번째 원소를 집어 순서를 2, 0, 3으로 바꾼다. Array map과 filter 함수 map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; // Pass a function to map const map1 = array1.map((x) => x * 2); console.log(map1); // Expected output: Array [2, 8, 18, 32] JSX에서의 사용 예 {toDos.map((toDo, index) => ( {toDo} ✕ ))} ↑ array 요소들을 li element로 바꾸어 반환한다. (React는 li element 배열을 인식해 브라우저에 li들의 나열로 표시한다.) map 함수의 두 번째 인자는 index를 나타낸다. 배열의 각 li .. 비동기 처리 (2) - Promise 이후에 실행될 함수의 자리를 표시하는 Callback과 다르게 Promise는 생성자로 만든 Promise 객체 안의 내용을 바로 실행한다. 이 내용을 execute function이라 한다. const promise = new Promise((resolve, reject) => { // 비동기로 처리할 내용 resolve({ name: "SSS" }); reject(new Error("NETWORK ERROR")); }); console.log(promise); Promise의 state는 pending, fulfilled, rejected가 있으며 fulfilled인 경우 결과(data)를 resolve에, rejected인 경우 reject에 넣은 Promise 객체를 반환한다. setTimeOut.. 비동기 처리 (1) - Callback Javascript는 코드를 동기적으로 처리한다. 따라서 서버로부터 데이터를 받는 등 시간이 걸리는 코드는 뒤에 실행된다. 하지만 뒤에 실행되는 코드가 그 데이터와 관련이 있다면 적절하지 못한 결과가 나올 수 있다. function getData() { setTimeout(() => { console.log("Fetch API......"); return "213123121"; }, 2000); } let data = getData(); console.log(data); ↑ return이 늦게되고 data를 출력하는 코드가 먼저 실행되어 undefined가 출력된다. 이를 해결하기 위해 사용되는 것이 Callback Function이다. function getData(id, par, callback) {.. this 사용법 eventListner의 callback 함수 안에서 this를 사용하면 this는 eventListner가 부착된 element를 가리킨다. 하지만 callback 함수 안의 event인자를 사용해 event.target은 event를 trigger시킨 element를 가리키므로 둘은 다를 수 있다. /* Delete Button */ const div = document.createElement("div"); const span = document.createElement("span"); span.innerText = "✕"; div.appendChild(span); div.setAttribute("id", "delete-btn"); td2.appendChild(div); td2.style.displ.. append, appenChild와 remove, removeChild append vs appendChild append는 node object나 text에도 사용할 수 있고 여러 개 한번에 추가가 가능하다. appendchild는 node object에만 사용할 수 있고 한번에 한 개만 추가가 가능하다. 그리고 추가한 node를 반환한다. remove vs removeChild remove는 node.remove()로 사용하고 해당 노드를 메모리 상에서 삭제한다. removeChild는 parentNode.removeChild(node)로 사용하고 두 노드의 관계을 끊은 후 node를 반환한다. 이전 1 2 다음
