자바스크립트 학습 29일차

# 자바스크립트 학습

# JSON 오브젝트

## JSON 오브젝트의 개요

• JavaScript Object Notation의 약어로, 빌트인 오브젝트이다.
• new 연산자로 인스턴스 생성 불가
• JSON의 주요 기능

데이터 소웃신의 변환 기준
텍스트이므로 전송 속도가 빠르다.
파일 확장자 : json, tzt도 사용 가능

• JS 데이터 타입을 지원, 다른 언어도 사용하지만, 완전히 같지 않을 수도 있다.

## stringify()

구분	데이터(값)
object	JSON 오브젝트
파라미터	변환 대상
	함수 또는 배열opt
	가독성을 위한 구분자opt
반환	반환 결과

• JS 타입을 JSON 타입의 문자열로 변환
• JSON.stringify() 형태로 호출한다.
• 첫 번째 파라미터

* 큰 따옴표("") 안에 작성됨
var value = {
	book: '책',
    title: 123
};
var result = JSON.stringify(value);
log(result);

=>
{"book":"첵", "title":123}

변환이란 큰 따옴표 안에 작성되도록 만든는 것을 의미!!
프로퍼티 이름인 book이 "book"으로 변환
'책'이 "책"으로 변환,
숫자는 변환하지 않는다.

* 배열 변환
var value = ['book', '책', 123];
var result = JSON.stringify(value);
log(result);

=>
["book", "책", 123]

* 특수한 값 변환
log(JSON.stringify([Infinity, NaN, null]));
log(JSPN.stringify([true, false]));

=>
[null, null, null]
[true, false]

Infinity, NaN, null은 null로 변환된다.
true, false는 변환하지 않는다.

* undefined 반환
log(JSON.stringify(undefined));
log(JSON.stringify([undefined]));
log(JSON.stringify({value: undefined}));

=>
undefined
[null]
{}

undefined는 작성한 곳에 따라 다르게 변환된다.
값 하나이면 그대로 변환
배열 안에 있으면 null로 변환
프로퍼티 값이면 프로퍼티를 제외시킨다.
(프로퍼티 이름도 없어지므로 주의해야 한다.)

• 두 번째 파라미터

* 두 번째 파라미터에 함수 작성
var data = {book: "책", point: 55};
function replace(key, value) {
	// point 값 55를 11로 변경
    return key == "point" ? 11 : value;
};

var result = JSON.stringify(data, replace);
log(result);

=>
{"book":"책", "point":11}

함수에서 return한 값을 변환 값으로 사용한다.
값을 return하지 않거나 undefined를 return하면 최종 데이터에서 제외시킨다.
즉, 데이터를 걸러 내게 된다.

* 두 번째 파라미터에 베열 작성
var data = {book: "책", point: 11, amount: 90};
var result = JSON.stringify(data, ['book', 'amount']);

log(result);

=>
{"book":"책", "amount": 90}

배열에 프로퍼티 이름을 작성
이름이 같은 것만 result에 설정
그래서 {point: 11}은 출력되지 않는다.

• 세 번째 파라미터

* 세 번째 파라미터에 줄 분리 작성
var data = {sports:'soccer', time: 90};
var result = JSON.stringify(data, "", '\n');

log(result);

=>
{
"sports":"soccer",
"time": 90
}

사람이 데이터를 보기 쉽게 하기 위한 것으로 줄을 분리하여 표시한다.

* 들여쓰기 숫자 작성
var data = {sports:'soccer', time: 90};
var result = JSON.stringify(data, "", 4);

log(result);

=>
{
	"sport":"soccer",
    "tome": 90
}

숫자는 들여쓰기 자릿수
숫자만큼 들여쓰기를 한다.

* 문자 앞에 삽입할 문자 작성
var data = {sports:'soccer', time: 90};
var result = JSON.stringify(data, "", "##");

log(result);

=>
{
##"sport":"soccer",
##"tome": 90
}

문자열(##)을 작성하면 데이터 앞에 ##을 표시한다.

 

# JSON 타입 파싱

## parse()

구분	데이터(값)
object	JSON 오브젝트
파라미터	변환 대상
	파싱 데이터로 실행할 함수obj
반환	변환 결과

• JSON 타입을 JS 타입으로 변환한다.
• 작성 시 주의사항

var value = "123";
try {
	var result = JSON.parse(value);
} catch (e) {
	console.log("JSON 파싱  에러");
};

log(result);
log(typeof result);

=>
123
number

JSON 형태는 기본적으로 큰 따옴표 사용
즉, string 타입이지만 JSON.parse()에서 JS 타입에 맞도록 변환
"123" 은 문자열이지만 값이 숫자이므로 Number 타입의 숫자로 변환
파싱 대상이 서버에서 받은 데이터일 때, try~catch 사용은 필수 

var value = "true";
var result = JSON.parse(value);
log(result);
log(typeof result);

=>
true
boolean

"true"도 숫자처럼 true로 변환
try~catch 사용은 필수

var value = '["ABC", "가나", "12"]';
var result = JSON.parse(value);
log(result);

=>
["ABC", "가나", "12"]

배열에 작성된 String 타입의 숫자는 숫자로 변환하지 않는다.

var Object = '{"point": "123"}';
var result = JSON.parse(value);

log(result);

=>
{point: "123"}

JS는 프로퍼티 이름에 큰 따옴표를 사용하지 않으므로 큰 따옴표가 표시되지 않는다.

"123."을 "123.0"으로 작성
"0123"처럼 첫 자리에 0 사용 불가
대문자 "NULL" 사용 불가, "null" 사용
10진수 사용

• 두 번째 파라미터 작성

var data = '{"book": "책", "movie": "영화"}';
var check = function(key, value) {
	return key === "book" ? "JS책" : value;
};

var result = JSON.parse(data, check);

log(result);

=>
{book: "JS책", movie: "영화"}

프로퍼티 이름이 "book"이면 "책"을 "JS책"으로 바꾼다.

첫 번째 파라미터의 JSON 문자열을 파싱하면, {book: "책", movie: "영화"} 형태가 된다.
파싱한 오브젝트를 하나씩 읽어가면서 두 번째 파라미터의 함수를 실행
함수에서 값을 반환하면 파싱 결과인 result 변수에 반영
값을 반환하지 않거나 undefined를 반환하면 프로퍼티가 제외되므로 반환해야 한다.

 

# Date 오브젝트

## Date 오브젝트의 개요

• 년월일, 시분초, 밀리초를 제공한다. 이것을 시간 값(Time Value)라고 부른다.
• 시간 값은 UTC (Universal Time Coordinated) 기준이다.

* UTC
1970년 1월 1일 기준으로 밀리초를 제공, 남는 초는 무시한다.
1970년 1월 1일 0시 기준으로 전후 100,000,000일 지원

• UTC, GMT (Greewich Mean Time) 중 JS는 UTC 기준이다.

## 시간 값 표시 기준

• 월은 0부터 시작

0: 1월
1: 2월
11: 12월

• 일은 1에서 31일까지 정수로 표시
• 요일은 0부터 시작

0: 일요일
1: 월요일
6: 토요일

var obj = new Date(1970, 1, 1, 1, 1, 1, 1);

log(obj.toLocaleString());

=>
1970. 2. 1. 오전 1:01:01

년월일, 시분초, 밀리초
두 번째가 월이며 1은 2월

 ## 시간의 문자열 형태

형태	개요
	2015-11-30T09:12:34.123
YYYY	그레고리력으로 0000 ~ 9999년의 10진수
-	하이픈
MM	월, 00에서 11까지
-	하이픈
DD	일, 01에서 31까지
T	시간을 나타내는 문자
HH	시, 오전 0시부터 경과 시간, 00에서 24까지 두 자리로 1시간 단위 값
:	콜론
mm	분, 00에서 59로 표시
:	콜론
ss	초, 00에서 59로 표시
.	초와 밀리초 구분
sss	밀리초, 3자리로 표시
Z	타임존 + 또는 - 로 연결하고 HH:mm 형태로도 표시

 

# Date 오브젝트 프로퍼티

## 프로퍼티 리스트

이름	개요
new Date()	인스턴스 생성
Date 함수
Date()	현재 시각 반환
Date.parse()	문자열 값을 밀리초로 변환
Date.UTC()	UTC 기준 밀리초로 변환
Date.now()	현재 시각을 밀리초로 반환
Date.prototype
constructor	생성자
toString()	일자와 시간을 변환해서 문자열로 반환
toUTCString()	UTC 일자와 시간 반환
toISOString()	"ISO 8601 확장 형식의 간소화 버전" 형태로 일자와 시간 반환
toDateString()	연월일과 요일을 사람이 읽기 쉬운 형태로 반환
toTimeString()	시분초와 타임존을 사람이 읽기 쉬운 형태로 반환
toLocaleString()	일자와 시간을 지역 언어로 반환
toLocaleDateString()	연월일을 지역 언어로 반환
toLocaleTimeString()	시분초와 오전/오후를 지역 언어로 반환
toJSON()	JSON.stringify()와 연동하여 JSON 형태의 일자, 시간 설정

이름	개요	이름	개요
Date.prototype
getTime()	시간값 반환	valueOf()	프리미티브 시간값 반환
getFullYear()	연도 반환	getYear()	세기 구분과 연도 2자리 반환 getFullYear() 사용 권장
getMonth()	월 반환	getDate()	일 반환
getDay()	요일 반환	getHours()	시 반환
getMinutes()	분 반환	getTimezoneOffset()	UTC와 지역 시간 차이를 분으로 반환
getSeconds()	초 반환	getMilliseconds()	밀리초 반환
getUTCFullYear()	UTC 연도 반환	geUTCMonth()	UTC 월 반환
getUTCDate()	UTC 일 반환	getUTCDay()	UTC 요일 반환
getUTCHours()	UTC 시 반환	getUTCMinutes()	UTC 분 반환
getUTCSeconds()	UTC 초 반환	getUTCMilliseconds()	UTC 밀리초 반환

이름	개요	이름	개요
Date.prototype
setFullYear()	연도 변경, 월, 일 변경 가능	setYear()	두 자리로 연도 변경, setFullYear() 사용 권장
setMonth()	월 변경, 일 변경가능	setDate()	일 변경
setHours()	시 변경	setMinutes()	분 변경, 초, 밀리초 변경 가능
setSeconds()	초 변경, 밀리초 변경	setMilliseconds()	밀리초 변경
setTime()	1970년 1월 1일부터 경과한 밀리초 변경	setUTCFullYear()	UTC 연도 변경, 월, 일 변경 가능
setUTCMonth()	UTC 월 변경, 일 변경 가능	setUTCDate()	UTC 일 변경
setUTCHours()	UTC 시 변경	setUTCMinutes()	UTC 기준 분 변경, 초, 밀리초 변경 가능
setUTCSeconds()	UTC 초 변경, 밀리초 변경 가능	setUTCMilliseconds()	UTC 밀리초 변경

## new Date()

구분	데이터(값)
파라미터	년, 월, 일[, 시[, 분[, 초 [, 밀리초]]]]
반환	생성한 Date 인스턴스

• Date 인스턴스를 생성, 파라미터 값을 인스턴스의 프리미티 값으로 설정한다.

var obj = new Date(2019, 02);

log(obj);

=>
Fri Mar 01 2019 00:00:00 GMT+0900 (한국 표준시)

값을 작성하지 않으면 0으로 간주

• 파라미터를 작성하지 않으면 UTC 기준 현재 시간

log(new Date());

=>
Sun Jul 28 2019 04:40:45 GMT+0900 (한국 표준시)

• 파라미터를 문자열로 작성하면 "2019-12-15T09:11:23:123" 밀리초로 변환

log(new Date("2019-02");

=>
Fir Feb 01 2019 09:00:00 GMT+0900 (한국 표준시)

문자열 작성의 차이
new Date(2019, 02)에서 02가 3월로 변환되지만,
new Date("2019-02")는 2월로 변환된다.

• 시간 자동 넘김

log(new Date(2019 11, 34));

=>
Fri Jan 03 2020 00:00:00 GMT+0900 (한국 표준시)

월일시분초 범위를 넘치면 상위 시간값에 반영된다.
new Date(2019, 11, 34)에서
34가 31을 넘치므로 3을 남겨두고 11에 1을 더한다.
12는 13월이므로 1을 남겨두고 2019에 1을 더한다.
그래서 2020.01.03이 출력

## Date.now()

구분	데이터(값)
object	Date 오브젝트
파라미터	사용하지 않음
반환	밀리초

• 현재 시간을 밀리초로 반환

log(Date.now());
log(new Date());

=>
1564256664202
SUn Jul 28 2019	04:44:24 GMT+0900 (한국 표준시)

## Date.parse()

구분	데이터(값)
object	Date 오브젝트
파라미터	년월일, 시분초, 밀리초
반환	밀리초

• 문자열 값을 밀리초로 변환, 1970. 01. 01 부터 경과한 시간

log(Date.parse("2019-01-23T09:11:23.123"));

=>
1548202283123

## Date 오브젝트 함수 분류

• 시간을 반환하는 함수 : getMonth(), getDate() 등

var obj = new Date(2019, 02, 15);
log(obj.getMonth());
log(obj.getDate());

=>
2
15

• 시간을 설정하는 함수 : setMonth(), setDate() 등

var obj = new Date();
log(obj.valueOf());
log(obj.setMonth(01));
log(obj.setDate(15));

=>
1564256773401
1551296773401
1550173573401

• 함수 이름으로 기능을 알 수 있으므로 설명 생략
• 주의사항

클라이언트의 시간은 사용자가 변경 가능

마감 시간처럼 시간이 중요할 때에는 '서버 시간'을 사용

 

# Math 오브젝트

## Math 오브젝트 개요

• 수학 계산용 오브젝트로 상수, 절댓값, 사인, 탄젠트 등을 제공
• new 연산자로 인스턴스 생성 불가 : Math, JSON, 글로벌 오브젝트
• Math 오브젝트에 있는것은 메소드가 아니라 함수이다.

Math.abs(값) 형테

 ## Math 상수

이름	개요
Math 상수
E	자연로그 상수(e)
LN10	자연로그 10
LN2	자연로그 2
LOG2E	밑이 2인 e(자연로그 밑) 로그
LOG10E	e의 사용 로그(10을 밑으로 하는 로그)값
PI	파이
SQRT1_2	0.5의 제곱근 값
SORT2	2의 제곱근

## Math 함수

이름	개요
abs()	절댓값 반환
floor()	소수 이하 버림, 정숫값 반환
ceil()	소수 이하 올림, 정숫값 반환
round()	소수 이하 반올림, 정숫값 반환
max()	최댓값
min()	최솟값
random()	0에서 1미만 난수
pow()	x의 y자승 값
cos()	코사인(cosine)
acos()	아크 코사인(arc cosine)
sin()	사인(sine)
asin()	아크 사인(arc sine)
atan()	아크 탄젠트(arc tangent)
atan2()	x, y 좌표의 아크 탄젠트(arc tangent)
sqrt()	제곱근
exp()	자연로그 상수(e)의 제곱근
log()	자연로그 값

• ES6에서는 수학 함수가 많이 늘어났다. 이로 인해 자바스크립트의 사용 범위가 더 넓어졌고, 특히 머신러닝과 딥러닝에서 Math 함수는 유용하다.

## abs()

구분	데이터(값)
파라미터	값
반환	변환한 절댓값

• 음수를 양수로 변환한 절댓값 반환

log(Math.abs(-123));
log(Math.abs(-Infinity));

=>
123
Infinity

## floor()

구분	데이터(값)
파라미터	값
반환	변환한 값

• 소수 이하 버림, 정숫값 반환
• 소수 이하 값이 있으면서 음수이면 -1을 더해 반환한다.

log(Math.floor(5.3));
log(Math.floor(-1.7));
log(Math.floor(-1.0));

=>
5
-2
-1

## round()

구분	데이터(값)
파라미터	값
반환	변환한 값

• 소수 이하 반올림, 정숫값 반환
• 양수이면 반올림, 음수이면 반내림

log(Math.round(5.1));
log(Math.round(5.5));
log(Math.round(-1.6));
log(Math.round(-1.3));

=>
5
6
-2
-1

## max()

구분	데이터(값)
파라미터	콤마로 구분하여 값 작성
반환	변환한 값

• 파라미터 값 중에서 가장 큰 값을 반환한다
• 파라미터 값을 전부 숫자로 변환하여 비교한다. 
• NaN가 하나라도 있으면 NaN 반환

log(Math.max(5, 3, 9));
log(Math.max(5, 3, "AB"));

=>
9
NaN

## min()

구분	데이터(값)
파라미터	콤마로 구분하여 값 작성
반환	변환한 값

• 파라미터 값 중에서 가장 작은 값을 반환한다.
• 파라미터 값을 전부 숫자로 변환하여 비교한다.
• NaN가 하나라도 있으면 NaN 반환

log(Math.min(5, 3, 9));
log(Math.min(5, 3, "AB"));

=>
3
NaN

## pow()

구분	데이터(값)
파라미터	x
	y
반환	변환한 값

• 파라미터 x 값의 y 승 값을 반환
• y가 0 일 때 x가 NaN라도 1을 반환
• y가 NaN 이면 NaN 반환
• 이처럼 경우의 수가 많으므로 사용하기 전 테스트가 필요하다.

log(Math.pow(10, 20));
log(Math.pow(10, 0));
log(Math.pow("A", 1));
log(Math.pow(1, "A"));
log(Math.pow(1));

=>
100
1
NaN
NaN
NaN

두 번째 파라미터를 작성하지 않으면 NaN

## random()

구분	데이터(값)
파라미터	사용하지 않음
반환	변환한 값

• 0에서 1미만 사이의 난수를 반환한다.

log(Math.random());
log(Math.random());

=>
0.5841552285452716
0.6775928199911607

random() 함수를 실행할 때마다 다른 값이 반환된다.