본문 바로가기

JavaScript

 (36)
[#. JavaScript] Date()를 YYYY-mm-ddT, 2021-06-04T00:47:25.919Z 형식으로 변환하기 보통 new Date()를 통해 현재 시간을 가져오면 Mon Jun 07 2021 08:59:03 GMT+0900 (대한민국 표준시) 위와 같은 형식으로 가져온다 근데 YYYY-mm-ddT~ 형식으로 변환하고 싶다 2021-06-06T23:59:03.927Z 단순화한 확장 ISO 형식(ISO 8601)의 문자열을 반환하는 toISOString()을 이용하면 된다 var date = new Date() console.log(date)// Mon Jun 07 2021 09:25:35 GMT+0900 (대한민국 표준시) date.toISOString()// 2021-06-07T00:25:35.128Z 이렇게 잘 뜬다
[#. JavaScript] 기존 배열에 새로운 배열 추가하기 react redux에서 장바구니에 데이터를 추가할 때 장바구니에 추가 버튼을 클릭할 때마다 기존 데이터는 유지하고 새로운 데이터를 추가하고 싶다 Object.assign()에 이것저것 찾아봤지만 사실 비구조화 할당(구조 분해)을 이용해서 간단하게 사용할 수 있다 developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment 구조 분해 할당 - JavaScript | MDN 구조 분해 할당 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. var a, b, rest; [a, b] = [10, 20]; console.log(a);..
[#. JavaScript] 동등 연산자 '=='와 일치 연산자 '==='의 차이점 ① == '=='는 동등 연산자로 비교하는 두 개의 값(피연산자)이 서로 다른 타입이면 강제로 같은 타입으로 변환한 후 비교한다 두 값의 타입이 다르더라도 형 변환된 값이 같다면 true를 리턴한다 ② === '==='는 일치 연산자로 비교하는 두 값의 타입과 값이 모두 같을 경우에만 true를 리턴한다 console.log(0 == '0');// true console.log(0 === '0');// false console.log(false == '0');// true console.log(true == '1');// true console.log(null == undefined);// true console.log(null === undefined); // false * React에서는 === 사용..
[#. JavaScript] 숫자 금액 세 자리 콤마 , 표시하기 숫자를 세 자리씩 끊어서 콤마 표시 하고 싶을 때 toLocaleString() 사용한다 number.toLocaleString(locales, options) toLocaleString() 함수는 숫자를 로컬의 language format에 맞는 문자열로 변경해 준다 number.toLocalString() 처럼 파라미터로 아무것도 전달되지 않으면 사용자 로컬 환경의 locale을 default로 사용한다 en-US 1,234,567 ko-KR 1,234,567 let total = 230000 total.toLocaleString()// 230,000
[#. JavaScript] slice() vs splice() 차이점을 알아보자 slice() vs splice() 배열을 다룰 때 자주 사용하는 함수 slice(), splice()에 대해 알아보자 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; ① slice() =조각(명사) begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다 원본 배열은 수정되지 않는다 ex) var arr1 = arr.slice(3, 5); // [4, 5] var arr2 = arr.slice(undefined, 5); // [1, 2, 3, 4, 5] var arr3 = arr.slice(-3); // [8, 9, 10] var arr4 = arr.slice(-3, 9); // [8, 9] var arr5 = arr.slice(10); // [] var arr6..
[#. JavaScript] 배열 array에 특정 값이 포함되어 있는지 여부 체크하기 쇼핑몰 상세 페이지 Select에서 값을 선택했을 때 아래 영역에 값이 추가되도록 하려고 한다 const onChange = (input, option) => { setOptionValue([...OptionValue, option.value]) } 위 코드에서처럼 state에 데이터를 넣어서 가져오면 이렇게 데이터가 계속해서 추가되기 때문에 배열에 이미 특정 데이터가 포함되어 있는지 여부를 확인하고 없을 경우에만 추가하도록 해보자 ① includes() includes() 함수는 배열이 특정값을 포함하고 있는지 여부를 boolean 값으로 반환한다 See the Pen 배열에서 특정값 포함 여부를 반환하는 includes 함수 by shab8 (@shab8) on CodePen. includes() 함..
[#. JavaScript] Date() 날짜 함수 YYYY-mm-dd HH:mm:ss format 형식으로 표기하기 현재 시각을 YY-mm-dd HH:mm:ss 형식으로 표기하고 싶다 Date.now() 로 가져오면 1611535990490 => 가져오고 싶어하는 형식과는 거리가 먼 숫자가 나온다 let date = new Date() let year = date.getFullYear() let month = date.getMonth() + 1 month = month >= 10 ? month : '0' + month let day = date.getDate() day = day >= 10 ? day : '0' + day let hour = date.getHours() hour = hour >= 10 ? hour : '0' + hour let min = date.getMinutes() let sec = date.get..
[#. JavaScript] forEach와 map의 차이점을 알아보자 forEach vs map forEach를 쓸 때와 map을 쓸 때가 있다 차이점을 알아보자 ① forEach() Array 요소를 제공된 함수로 한 번 실행 아무 값도 반환하지 않는다 기존 배열 변경 가능 const arr = [1, 2, 3] aarrrray.forEach((item, index) => { arr[index] = item * 2 }) console.log(arr)// [2, 4, 6] ② map() 모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성 기존의 배열을 가공하여 새로운 배열을 생성할 때 사용 => 기존 배열은 값이 바뀌지 않고 유지 const arr = [1, 2, 3] const newArray = arr.map(item => { return item..

티스토리툴바