코드 let arr = [10, 13, 10, 11, 15, 12, 32, 30, 23, 11, 11, 25, 50, 33, 15, 29, 27, 21, 37, 27, 18, 13, 30, 13, 16]; let newArr = []; while(arr.length) newArr.push(arr.splice(0,5)); console.log(newArr); arr.length가 0이 되기 전까지 1줄씩 splice하여 newArr에 넣는다. 출력결과

정말 간단한 한줄짜리 코드이다. 일일히 반복문을 돌리며 초기화를 했는데, 이 방법을 사용하면 그렇게 할 필요가 없다! 자바스크립트 Array 객체에는 Array.from() 이라는 함수가 존재하는데 길이 객체와 값을 반환하는 콜백함수를 매개변수로 넘겨주면 된다. let answer = Array.from({length:5}, ()=>1); console.log(answer); // 결과 : [1, 1, 1, 1, 1] answer = Array.from({length:5}, (v, i)=> i); console.log(answer); // 결과 : [0, 1, 2, 3, 4] Array.from() 함수의 특징은 얕은 복사(shallow-copied) 된 새로운 객체를 생성한다는 것이다. Array.fr..

정의 flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다. 구문 const newArr = arr.flat([depth]) 예시 const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; arr4.flat(Infinity); // [1, 2, 3, 4, ..

MDN에 따르면 Math.max() 함수는 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환한다. 인수 중 하나라도 숫자로 변환하지 못한다면 NaN을 반환한다. 아무 요소도 주어지지 않았다면 -Infinity를 반환한다. 문법 형태는 이러하다. Math.max([value1[, value2[, ...]]]) [예시] 다섯 개의 수 중에 최댓값을 구하는 예시이다. Math.max(1, 2, 3, 4, 5); 결과는 5가 나온다. 이번에는 배열을 하나 선언하고 이 배열의 원소들 중 최댓값을 구하려 한다. const numbers = [1,2,3,4,5]; Math.max(numbers); 결과는 NaN이 뜬다. [해결방법] apply() 메서드를 사용하면 된다. const numbers = [1,2..

이벤트 루프에 대해 어려움을 겪던 중 이 영상을 보게 되었다. ​ 우선, 자바스크립트는 싱글 스레드(single threaded) 프로그래밍 언어이다. 싱글 스레드라는 건, 한 번에 하나의 call stack을 갖고 있고, 그 말은 다시 말해 한 번에 하나씩만 일 처리를 할 수 있다는 말 ​ Call stack A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what function..

이전에 TO DO LIST와 유사한 쇼핑목록 웹사이트를 만들었다. 입력, 삭제가 가능하지만 페이지를 새로고침 하면 사라졌다. ​ [JavaScript] (해결) 동적으로 font awesome 아이콘 추가하기 나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스트이다. 현재 문제점 : appendChild, innerHTML 등을 이용하여 font awesome icon을 추가하려한다. 이런식으로. 다만 x 표시(빨간색 breathtaking-life.tistory.com 이제는 더 나아가 페이지를 새로 고침해도 데이터가 남아 있게 만들고 싶었다. 구글링 해보니 localStorage가 있었다. 참고: Window.localStorage - Web APIs | MDN The ..

​ innerText의 Syntax const renderedText = htmlElement.innerText htmlElement.innerText = string textContent의 Syntax let text = someNode.textContent someOtherNode.textContent = string MDN에 innerText와 textContent 비교한게 있다. (출처 게시글 밑 참고) ​ HTML: Source element: #source { color: red; } Take a look athow this textis interpreted below. HIDDEN TEXT Result of textContent: ... Result of innerText: ... 자바스크립..

JSON ( JavaScript Object Notation) - 자바스크립트의 객체 표기법을 제한하여 만든 문자 기반의 데이터 교환 포맷 - JSON은 객체, 배열, 숫자, 문자열, 불리언과 null을 직렬화하기 위한 구문 - JavaScript 구문에 기반을 두고 있지만 분명한 차이점 존재 즉, 어떤 JavaScript는 JSON이 아니다. JSON.stringify() - 인수로 전달받은 자바스크립트 객체 -> 문자열로 변환 ​ - Syntax JSON.stringify(value[, replacer[, space]]) value에 JSON 문자열로 변환할 자바스크립트 객체가 오면 된다. 반환 값으로 주어진 값과 대응하는 JSON 문자열이 온다. JSON.parse() - 인수로 전달받은 문자열 -..

캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 body * { margin: 10px; border: 1px solid blue; } FORM DIV P 가장 안쪽의 를 클릭하면 순서대로 다음과 같은 일이 벌어집니다. 에 할당된 onclick 핸들러가 동작합니다. 바깥의 에 할당된 핸들러가 동작합니다. 그 바깥의 에 할당된 핸들러가 동작합니다. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다. ​ ​ 즉 p->div->form 순서로 창이 열린다. 이러한 흐름을 '이벤트 버블링'이라고 한다. (거의 모든 이벤트들은 버블링이 일어난다. focus()같은 이벤트를 제외하면.) ​ Introduction to e..

문제: [JavaScript] (해결) 동적으로 font awesome 아이콘 추가하기 나는 쇼핑목록 앱을 만들고있다. TO DO LIST처럼 쇼핑할 물건들을 적는 리스트이다. 현재 문제점 : appendChild, innerHTML 등을 이용하여 font awesome icon을 추가하려한다. 이런식으로. 다만 x 표시(빨간색 breathtaking-life.tistory.com Event binding on dynamically created elements? I have a bit of code where I am looping through all the select boxes on a page and binding a .hover event to them to do a bit of twiddli..