오늘 공부한 내용 요약
( 모던 JavaScript 튜토리얼 학습 )
1. Date 객체와 날짜
New Date() 객체 생성
-> 현재 날짜 및 시간
UTC 시간
let Jan01_1970 = new Date(0);
alert( Jan01_1970 ); //1970년 1월 1일 0시 0분 0초
let Jan02_1970 = new Date(24 * 3600 * 1000);
alert( Jan02_1970 ); // 1970년 1월 2일 - new Date(year, month, date, hours, minutes, seconds, ms)
year -> 반드시 4자리수
month -> 0(1월) ~ 11(12월)
date -> 일을 나타냄. 값이 없을 경우 1일로 처리
hours/minutes/seconds/ms에 값이 없는 경우엔 0으로 처리됨
let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 2011년 1월 1일, 02시 03분 04.567초
- 날짜 구성요소 얻기
getFullYear() -> 연도 반환
getMonth() -> 0이상 11이하
getDay() -> 일요일(0) ~ 토요일 (6)
getTime()
주어진 시간과 1970년 1월 1일 0시 0분 0초 사이의 간격(밀리초 단위)인 타임스탬프를 반환합니다.
getTimezoneOffset()
현지 시간과 표준 시간의 차이를 반환
let today = new Date();
today.setHours(0);
alert(today); // 날짜는 변경되지 않고 시만 0으로 변경됩니다.today.setHours(0, 0, 0, 0);
alert(today); // 날짜는 변경x 00시 00분 00초
- 자동고침
Date 객체엔 자동고침 기능이 있다
범위를 벗어나는 값 입력시 자동으로 수정됨
let date = new Date(2013, 0, 32); // 2013년 1월 32일은 없습니다.
alert(date); 2013년 2월 1 일 출력지금부터 70초 후의 날짜
let date = new Date();
date.setSeconds(date.getSeconds() + 70);
alert( date );- 숫자형으로 변경해 시간 측정
Date 객체를 숫자형으로 변경하면 타임스탬프(date.getTime()를 호출 시 반환되는 값)가 됩니다.
- Date.now()
Date 객체를 만들지 않고도 시차를 측정할 방법
Date.now()는 new Date().getTime()과 의미론적으로 동일, 중간에 date객체를 만들지 않는다는 점이 다르다
빠르고 가비지 컬렉터의 일을 줄여주기 때문에 자주 쓰임
- 벤치마크 테스트
비교대상을 두고 성능을 비교하여 실험할때 사용
좀 더 신뢰할만한 벤치마크 테스트를 만들려면 benchmark를 번갈아 가면서 여러 번 돌려야 합니다.
예시)
function diffSubtract(date1, date2) {
return date2 - date1;
}
// 반환 값은 밀리초입니다.
function diffGetTime(date1, date2) {
return date2.getTime() - date1.getTime();
}결과는 동일하지만 형변환이 없어 엔진 최적화에 들어가는 시간이 줄어드는 아래 함수의 방법이 빠르다
- Date.parse와 문자열
Date.parse(str)을 이용하면 문자열에서 날짜를 읽어올수 있음 -> 대응하는 날짜열의 타입스탬프가 반환
YYYY-MM-DDTHH:mm:ss.sssZ 처럼 문자열이 생겨야한다
let ms = Date.parse('2012-01-26T13:51:50.417-07:00');
alert(ms); // 1327611110417 (타임스탬프)- 자바스크립트의 타임스탬프는 초가 아닌 밀리초 기준
let d1 = new Date(2012, 1, 20, 3, 12);
let d2 = new Date("February 20, 2012 03:12:00");
2개는 같은 결과가 도출2. JSON과 메서드
객체를 문자열로 전환하려 할때 toStirng()을 이용하면 되는데 추가, 삭제 등을 할때마다 수정해줘야 해서 번거롭고 복잡할 수 있다.
이를 해결해주는 것이 JSON
JSON.stringify – 객체를 JSON으로 바꿔줍니다.
JSON.parse – JSON을 객체로 바꿔줍니다.
let student = {
name: 'John',
age: 30,
isAdmin: false,
courses: ['html', 'css', 'js'],
wife: null
};
let json = JSON.stringify(student);
alert(typeof json); // 문자열 형태
alert(json);
// "name": "John",
"age": 30,
"isAdmin": false,
"courses": ["html", "css", "js"],
"wife": nullJSON으로 문자열로 바뀐 객체를 인코딩된, 직렬화 처리된, 결집된 객체라고 함
그리고 몇가지 규칙이 있는데
1. 문자열은 큰 따옴표로 감싸야 한다(작은따옴표X, 백틱(`)도 X)
2. 객체 프로퍼티 이름도 큰 따옴표로 감싸야 한다
- JSON.stringify는 객체뿐만 아니라 원시값에도 적용할 수 있습니다.
적용할 수 있는 자료형은
-> 객체 { ... }, 배열 [ ... ] ,원시형, 문자형, 숫자형, 불린형, null
JSON.stringify 호출 시 무시되는 프로퍼티는
- 함수 프로퍼티 (메서드)
- 심볼형 프로퍼티 (키가 심볼인 프로퍼티)
- 값이 undefined인 프로퍼티
let user = {
sayHi() { // 무시
alert("Hello");
},
[Symbol("id")]: 123, // 무시
something: undefined // 무시
};
alert( JSON.stringify(user) );
* JSON.stringify는 중첩객체도 알아서 문자열로 바꿔줌 (객체 전체를 문자열로 변환
* 순환 참조가 있으면 원하는대로 객체를 문자열로 바꾸는게 불가
let room = {
number: 23
};
let meetup = {
title: "Conference",
participants: ["john", "ann"]
};
meetup.place = room; // meetup은 room을 참조합니다.
room.occupiedBy = meetup; // room은 meetup을 참조합니다.
JSON.stringify(meetup); // Error
- JSON.stringify의 전체문법
let json = JSON.stringify(value[, replacer, space])
Value - 인코딩하려는값 / replacer - 인코딩하길 원하는 프로퍼티가 담긴 배열, 함수 / space - 서식 변경 목적으로 사용할 공백 문자수
대다수에는 인수를 하나만 사용하지만 순환참조 같은 정교하게 조정하려면 2개의 인수를 사용
let room = {
number: 23
};
let meetup = {
title: "Conference",
participants: [{name: "John"}, {name: "Alice"}],
place: room // meetup은 room을 참조합니다
};
room.occupiedBy = meetup; // room은 meetup을 참조합니다
alert( JSON.stringify(meetup, ['title', 'participants', 'place', 'name', 'number']) );
이때 마지막 줄은 밑과 같음
alert( JSON.stringify(meetup, function replacer(key, value) {
alert(`${key}: ${value}`);
return (key == 'occupiedBy') ? undefined : value;
}));
- space는 가독성을 높이는데 목적이 있다
- JSON.parse
JSON으로 인코딩된 객체를 다시 객체로 디코딩 할 수 있습니다.
let value = JSON.parse(str, [reviver]);
let numbers = "[0, 1, 2, 3]";
numbers = JSON.parse(numbers);
alert( numbers[1] ); // 1-
JSON은 주석을 지원하지 않는다
-
reviver 사용하기
ex) 모든 값은 “그대로”, 하지만 date만큼은 Date 객체를 반환하도록 함수를 구현 시도
let str = '{"title":"Conference","date":"2017-11-30T12:00:00.000Z"}';
let meetup = JSON.parse(str, function(key, value) {
if (key == 'date') return new Date(value);
return value;
});
alert( meetup.date.getDate() );
< 함수 심화학습 >
3. 재귀와 스택
-
함수에서 다른 함수를 호출해야 할때 함수가 자기 자신을 호출하는 것이 재귀
-
큰 작업 하나를 동일하면서 간단한 작업 여러 개로 나눌 수 있을 때 유용한 프로그래밍 패턴
x를 n 제곱해 주는 함수 pow(x, n)를 만들어보기
1. 반복적인 사고
function pow(x, n) {
let result = 1;
// 반복문을 돌면서 x를 n번 곱함
for (let i = 0; i < n; i++) {
result *= x;
}
return result;
}
alert( pow(2, 3) ); // 8- 재귀적인 사고
function pow(x, n) {
if (n == 1) {
return x;
} else {
return x * pow(x, n - 1);
}
}
alert( pow(2, 3) ); // 8공부사이트
위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다
