본문 바로가기

IT/JavaScript17

[자바스크립트] 2차원 배열 1차원으로 바꾸기 코드 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에 넣는다. 출력결과 2021. 3. 18.
[자바스크립트] Array.from() - 배열 초기화 한번에 하기 정말 간단한 한줄짜리 코드이다. 일일히 반복문을 돌리며 초기화를 했는데, 이 방법을 사용하면 그렇게 할 필요가 없다! 자바스크립트 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.. 2021. 3. 17.
[자바스크립트] flat() 함수-중첩된 배열 구조 하나로 합치기 정의 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, .. 2021. 2. 1.
[자바스크립트] 배열에서 최댓값/최솟값 구하기 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.. 2021. 1. 18.
[자바스크립트] 콜 스택(Call stack), 블로킹(Blocking) 개념 이해 이벤트 루프에 대해 어려움을 겪던 중 이 영상을 보게 되었다. ​ 우선, 자바스크립트는 싱글 스레드(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.. 2021. 1. 8.
[자바스크립트] localStorage 데이터 저장/삭제 해결 방법 이전에 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 .. 2021. 1. 7.