본문 바로가기

Front-end/Javacript

(28)
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, ..
localeCompare()란? localeCompare 메서드는 참조 문자열이 정렬 순서에서 앞 또는 뒤에 오는지 또는 주어진 문자열과 같은지를 숫자로 반환 referenceStr.localeCompare(compareString[, locales[, options]]) referenceStr이 compareString보다 앞에 있으면 -1, 뒤에 있으면 1, 같으면 0 반환 'a'.localeCompare('b') // -1 , 'b'.localeCompare('a') // 1 'c'.localeCompare('c') // 0
sort() 란? arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다. sortFunction 인수에 함수를 지정하면 아래의 값 중 하나가 반환된다. 첫 번째 인수가 두 번째 인수보다 작을 경우 - 값 두 인수가 같을 경우 0 첫 번째 인수가 두 번째 인수보다 클 경우 + 값 문자 정렬 let fruit = ['orange', 'apple', 'banana']; /* 일반적인 방법 */ fruit.sort(); // apple, banana, orange 숫자 정렬 let score = [4, 11, 2, 10, 3, 1]; /* 오류 */ score..
.substring() 설명 .substring() .substring()은 문자열에서 특정 부분만 골라낼 때 사용하는 메서드입니다. 문법 string.substring( start, end ) start와 end로 문자열에서 골라낼 부분의 처음과 끝을 지정합니다. 예를 들어 var str = '123456789'; document.write( str.substring( 1, 4 ) ); 는 234를 출력합니다. start 값은 필수이며, end 값이 지정되지 않으면 문자열의 끝까지를 의미합니다. 예제
Array.from() 사용하기 Array.from 을 이용하여 빈 배열을 초기화 하는 코드 Array.from( {length: 20}, () => Array(10).fill(0) ); 직관적으로 0 으로 초기환된 20x10 짜리 2차원 배열을 리턴한다는 것을 알 수 있었지만, 다소 생소한 표현법이어서 어떻게 동작하는지 한번 알아보았습니다. Array.from Array.from 은 유사 배열 객체를 배열로 바꾸는데 자주 사용했었는데요, MDN 에 나와있는 대표적인 사용 예는 다음과 같습니다. 1. Array.from('Tei'); //["T", "e", "i"] 2. Array.from([1, 2, 3], x => x + x); //[2, 4, 6] 먼저 1 의 예시는 문자열을 인자로 받아 이를 배열로 반환해 주고 있습니다. 오늘 ..
event.preventDefault() 설명 preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..
자바스크립트 최신 문법 (ES6, ES11) ES-6 /////////////////////////////////////////// // Shorthand property names /////////////////////////////////////////// // key와 value가 같으면 생략할 수 있다 { const ellie1 ={ name: 'Ellie', age: 18, } const name = 'Ellie'; const age = '18'; // Bad const ellie2 = { name: name, age: age } // Good const ellie3 = { name, age, } } /////////////////////////////////////////// // Destricturing Assignment //////..
자바스크립트 Tutorial By Ellie (11) 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs // async & await // clear style of using promise :) // 1. async async function fetchUser() { // do network request in 10 secs.... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await // await은 async가 붙은 함수 안에서만 사용한다. function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } asy..