본문 바로가기

JS

 (14)
[JS] 웹 스토리지 - localStorage 다루기 Window.localStorage 브라우저 상에서 데이터를 보관할 수 있는 데이터 저장소 특징 (key - value) 형태로 저장된다. value로 저장된 값은 String 형태로만 저장된다. 페이지가 닫혀도 저장된 데이터는 영구적으로 보관된다. 사용하기 데이터 쓰기(Create) // 형태 localStorage.setItem(key, value); // 예제 localStorage.setItem('myPet', 'Tom'); setItem - key, value 쌍을 이루어 데이터를 저장하는 메서드 setItem 메서드 인수의 첫번째 위치에는 고유한 key 값을 두번째 위치에는 저장할 데이터를 작성한다. 해당 예제에서는 key는 myPet, value는 Tom이 쌍을 이루어 저장되어 있다. 데이터..
[JS] Date(표준 빌트인 객체)의 프로퍼티와 메서드 Date 객체 날짜와 시간(Year, Month, Day, Hour, Minute, seconds, millisecond)을 제공 UTC : 협정 세계시, 국제 표준시, GMT(그리니치 평균시) KST : 한국 표준시, UTC에서 9시간을 더한 시간(UTC 00:00 AM === KST 09:00 AM) 시간 값은 자바스크립트 내 시스템의 시계에서 결정 밀리초 환산 1초 === 1,000ms 1분 === 60초 * 1,000ms === 60,000ms 1시간 === 60분 * 60,000ms === 3,600,000ms 1일 === 24시간 * 3,600,000ms === 86,400,000ms Date 생성자 함수 new Date() asdf new Date(milliseconds) Date 메서드 D..
[JS] Array(표준 빌트인 객체) 정리 배열 여러 개의 값을 순차적으로 나열한 자료구조 배열은 객체 타입이기 때문에 값의 순서와 length 프로퍼티로 일반 객체와 구분한다. 배열의 요소는 (2^32 - 1)개까지 가질 수 있다. 배열 생성 배열 리터럴 0개 이상의 요소를 쉼표로 구분하여 대괄호([])로 묶는다. 요소를 생략하면 희소 배열이 생성된다. const arr = [1, 2, 3]; console.log(arr.length); // 3 const arr = []; console.log(arr.length); // 0 const arr = [1, , 3]; console.log(arr.length); // 3 console.log(arr); // [1, empty, 3] console.log(arr[1]); // undefined Ar..
[JS] Math(표준 빌트인 객체)의 프로퍼티와 메서드 Math 프로퍼티 Math.PI 원주율 PI 값 반환 Math.PI // → 3.141592653589793 Math 메서드 Math.abs(x) 절대값으로 바꿔주는 메서드 x 값으로 숫자, 숫자인 문자열을 받게 되면 해당 값의 절대값을 반환한다. x 값으로 0, null, 빈 문자열, 빈 배열을 받게 되면 0을 반환한다. x 값을 생략하거나 빈 객체, 둘 이상의 요소를 가진 배열, 숫자가 아닌 문자열, undefined를 받게 되면 NaN을 반환한다. Math.abs(11); // → 11 Math.abs(-11); // → 11 Math.abs('-11'); // → 11 // 0을 반환하는 경우 Math.abs(0); // → 0 Math.abs(null); // → 0 Math.abs(''); /..
[JS] Number(표준 빌트인 객체)의 프로퍼티와 메서드 Number 프로퍼티 Number.EPSILON 1과 1보다 큰 값 중에서 가장 작은 값의 차이 대략 2.2204460492503130808472633361816 * 10^-16 이다. 부동소수점으로 인해 발생하는 오차를 해결하기 위해서 사용한다. // 부동소수점 오류 0.1 + 0.2; // → 0.30000000000000004 0.1 + 0.2 === 0.3; // → false // Number.EPSILON을 활용하여 부동소수점 오류해결 function isEqual(a, b) { return Math.abs(a - b) < Number.EPSILON; } isEqual(0.1 + 0.2, 0.3) // → true Number.MAX_VALUE 자바스크립트에서 표현할 수 있는 가장 큰 양수 값..
[JS] String(표준 빌트인 객체)의 프로퍼티와 메서드 length 프로퍼티 문자열의 문자 개수를 반환하는 프로퍼티 String 메서드 String 객체의 메서드는 원본 String 래퍼 객체를 직접 변경하지 않고, 새로운 문자열을 반환한다. ※ 사용 빈도가 높은 메서드 위주로 정리 String.prototype.indexOf(searchValue, *fromIndex) 대상 문자열에서 searchValue를 검색하여 위치를 알려주는 메서드 searchValue가 여러개 존재할 경우에 첫번째 위치한 인덱스를 반환한다. 대상 문자열에 searchValue가 없으면 -1을 반환한다. searchValue의 길이는 상관없다. fromIndex는 검색을 시작할 인덱스를 전달한다.(옵션) 특정 문자열이 존재하는지 확인하는 용도로 많이 사용된다.(includes 메서드..
[JS] 객체 리터럴 객체 리터럴 - 배열이나 함수가 아님. 특정 모형을 가진 상태 const 객체 = { 속성1 이름 : 속성1 값, 속성2 이름 : 속성2 값, 속성3 이름 : 속성3 값, } 배열과 객체의 차이 : 객체는 고유 속성들을 갖고 있으나, 배열은 인덱스로만 구분 객체 접근 객체.속성 객체['속성'] 객체 속성 수정 객체 속성 삭제 delete를 활용한다. 속성 'gender'가 삭제되었다.(undefined) 배열과 함수가 객체인 이유 함수와 배열은 특수한 객체 객체 아래에 배열, 함수, 객체 리터럴 개념(목적대로 사용) 객체의 비교 객체 내부의 속성들이 같더라도 저장된 위치가 다르기 때문에 제각각 고유의 값으로 인식된다.(원시값과 차이) array[2]는 array 내부의 인덱스 2 값인 a이기 때문에 tr..
[JS] 함수 함수 형태 3가지 표현방식이 있다. function a() {} // 함수 선언문(function declaration statement) const b = function() {}; // 함수 표현식(function expression) const c = () => {}; // 화살표 함수 함수 호출(call) function a() {} // 함수 선언 a(); // 함수 호출 반환 값(return value) 함수를 처음 선언하게 되면 'undefined' a 함수 선언 시, '반환값'이 반환된다. 함수 b 선언 시, return에서 종료되기 때문에 console 창에 'Hi'가 출력되지 않는다. 함수 c 선언 시, if 조건이 false이기 때문에 return이 실행되지 않고, console로 넘..

티스토리툴바