1. parseFloat() parseFloat()는 문자열을 실수로 바꾸는 함수이다. 수로 시작할 때 그 수를 실수로 바꾼다. 띄어 쓰기로 여러 개의 수가 있으면 첫번째 수만 바꾼다. 공백으로 시작하면 공백은 무시한다. 수가 아닌 문자로 시작하면 NaN을 반환한다. 구문 parseFloat( string ) 2. parseInt() parseInt()은 문자열을 정수로 바꾸는 함수이다. string을 n진법일 때의 값으로 바꾼다. n은 옵션으로 2부터 36까지 입력할 수 있다. 입력하지 않으면 10으로 처리한다. string의 처리는 parseFloat()와 거의 같다. 소수 부분은 버린다. 0x로 시작하면 16진법으로 처리한다. 구문 parseInt( string, n ) 3. isNaN() isNa..
Math.sqrt() : 제곱근 구할 때 Math.max() : 배열에서 최대 값 구할 때 Math.min() : 배열에서 최소값 구할 때 Math.PI() : 원주율 반환 Math.random() : 난수 생성 Math.abs() : 인자값에 대한 절대값을 반환하는 함수 Math.trunc() : 소수점 이하는 버림 Math.round() : 반올림 Math.floor() : 내림 floor => 바닥까지 내린다고 생각 3.5 -> 3 -3.5 -> -4 Math.ceil() : 올림 ceiling => 천장까지 올린다고 생각 3.5 -> 4 -3.5 -> -3 * 주의할 점 Math.trunc()는 소수점 이하는 다 버리기 때문에 숫자가 -23.3 음수인 경우에도 -23을 Return한다. Math...
1. include() includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. - MDN 구문 arr.includes(valueToFind[, fromIndex]) includes() 메서드는 문자열에 다른 문자열이 포함되어 있는지 여부를 확인해주는 용도로 사용된다. 문자열에서 valueToFind가 발견되면 true를 반환하고, 그렇지 않으면 false를 반환한다. 예제 includes() 메서드를 사용하여 문자열에 @이 들어있는지 확인해보면 @이 들어있는 경우 true를 반환한다. let email = 'ab123@example.com'; console.log(email.includes('@')); // true 또한 includes()는 대소문자를 구분하기 때문에 다음의 코드..
유사 객체 배열(array-like objects)란 무엇이고 배열과 어떤 차이가 있는지 간단하게 알아보겠다. 1. 유사 배열 객체 유사 배열 객체란 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. 2. 예시 HTML Hello World I'm Programmer JavaScript const texts = document.querySelectorAll('.text'); console.log(texts); 결과값 배열처럼 보이지만 풀어보면 아래와 같이된다. { 0: div.text, 1: div.text, 2: div.text..
1. setTimeout()어떤 코드를 일정 시간 기다린 후 실행해야 하는 경우 setTimeout() 함수를 사용하면 된다. setTimeout() 함수는 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 지연시간을 밀리초(ms) 단위로 받는다.setTimeout(() => console.log("2초 후에 실행됨"), 2000); // 2초 후에 실행됨 setTimeout() 함수는 세번째 인자부터는 가변 인자를 받는데 첫번째 인자로 넘어온 함수가 인자를 받는 경우, 이 함수에 넘길 인자를 명시해주기 위해서 사용한다. 예를 들어, 두 개의 수를 인자로 받아 더한 값을 출력해주는 add()라는 함수에 인자로 3과 4를 넘겨 2초를 기다린 후에 호출해보자.function add(x, y..
목차 1. sort() 2. 예제 1. sort() sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. 정렬은 stable sort 가 아닐 수 있습니다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다. - MDN 구문 arr.sort([compareFunction]) Javascript에서 배열을 정렬하기 위해서는 sort() 함수를 사용한다. 파라미터 compareFunction 값이 생략되면, 배열의 element들은 문자열로 취급되어 유니코드 값 순서대로 정렬된다. sort() 함수는 원본 배열을 변경하는 함수이며, 동시에 변경된 배열을 리턴한다. 예제 1. sort() 함수로 숫자 오름차순 정렬하기 const arr = [2, 1, 3, 10]; ar..
목차 1. every() 2. some() 3. 차이점 1. every() every() 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다. Boolean 값을 반환합니다. - MDN 구문 // 화살표 함수 every((element) => { ... } ) every((element, index) => { ... } ) every((element, index, array) => { ... } ) // 콜백 함수 every(callbackFn) every(callbackFn, thisArg) // 인라인 콜백 함수 every(function callbackFn(element) { ... }) every(function callbackFn(element, index) { ... }..
목차 1. indexOf() 2. findIndex() 3. 차이점 1. indexOf() indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. -MDN indexOf() 함수는 문자열에서 특정 문자의 위치를 찾기 위해서 사용한다. array와 string 둘다 사용 가능한 메소드이며 찾고자 하는 값이 문자열 혹은 배열에서 몇 번째에 오는지를 알려준다. 검색의 기본 시작점은 0번째이며, 왼쪽에서 오른쪽 방향으로 검색한다. 또 배열에서 해당값을 찾을 수 없는 경우 -1 값을 반환한다. 구문은 다음과 같다. string.indexOf(searchvalue, position) - searchvalue : 필수 입력값, 찾을 문자열 - p..
목차 1. find() 2. 예제 3. filter()와의 차이 1. find() ES5에서 배열의 요소를 찾으려면 indexOf() 또는 lastIndexOf() 메서드를 사용한다. 그러나 이러한 메서드는 일치하는 첫 번째 요소의 인덱스만 반환하기 때문에 매우 제한적이다. ES6에서는 Array.prototype 객체에 find()라는 새로운 메서드가 추가되었다. find() 메서드는 제공된 함수를 충족하는 배열의 첫 번째 요소를 반환한다. find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. -MDN 구문 find(callback(element[, index[, array]])[, thisArg]) 2. 예제 1. 숫자..
목차 1. Local Storage 2. localStorage 사용 방법 3. setItem(), getItem() 4. JSON.stringify() 5. JSON.parse() 1. Local Storage 한마디로 브라우저에서 작은 정보를 기억해 줄 수 있는 공간이다. 이 공간에 저장한 데이터는 브라우저 기능을 이용하거나 데이터를 직접 삭제하지 않는 이상, 새로고침을 하거나 창을 껐다가 키는 것으로는 삭제되지 않는다. 따라서 이 공간에 todo를 저장해서 활용할 수 있다. 2. localStorage 사용 방법 setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 ..
- Total
- Today
- Yesterday
- 리액트
- arguments
- 중급 프로젝트
- js
- 유사배열객체
- Git
- 코드잇 스프린트
- 제어 컴포넌트
- react
- html
- 스프린트프론트엔드6기
- 비제어 컴포넌트
- Target
- Next.js
- 객체
- javascript
- hydrationboundary
- GitHub
- innerhtml
- 동기
- 배열
- currentTarget
- tanstackquery
- CSS
- 취업까지달린다
- 코드잇스프린트
- 프론트엔드
- map
- rest parameter
- 비동기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |