실습과제: 영어 단어장(3)
지난번 과제에서 단어장 객체에 단어를 추가하고 삭제하는 연습을 해봤는데요.
이번에는 단어장 객체에 단어를 추가하고 삭제하고, 콘솔에 출력도 해주는 다양한 메소드를 만들어 사용해봅시다.
- 단어를 추가하는 addVoca메소드를 만들어 주세요. addVoca메소드는 영어단어와 뜻, 총 두 개의 문자열 값을 파라미터로 전달받아서 myVoca 객체에 새로운 프로퍼티를 추가하는 메소드 입니다.
- 단어를 삭제하는 deleteVoca메소드를 만들어 주세요.deleteVoca메소드는 영단어 문자열을 파라미터로 전달받아서 해당하는 단어를 삭제하는 메소드 입니다.
- 단어를 출력하는 printVoca메소드를 만들어 주세요. printVoca메소드는 영어단어 문자열을 파라미터로 전달받아서 특별한 포멧의 문자열을 콘솔에 출력하는 메소드 입니다. 특별한 포멧은 "[영어단어]"의 뜻은 "[뜻]"입니다.로 제작해 주세요.
코드를 잘 작성하셨다면,
다음과 같은 결과가 출력되어야 합니다.
{
addVoca: [Function: addVoca],
deleteVoca: [Function: deleteVoca],
printVoca: [Function: printVoca],
parameter: '매개 변수',
element: '요소',
property: '속성'
}
{
addVoca: [Function: addVoca],
deleteVoca: [Function: deleteVoca],
printVoca: [Function: printVoca],
property: '속성'
}
"property"의 뜻은 "속성"입니다.
let myVoca = {
// 코드를 작성해 주세요.
addVoca: function (key, value) {
myVoca[key] = value;
},
deleteVoca: function (key) {
delete myVoca[key];
},
printVoca: function (key) {
console.log(`"${key}"의 뜻은 "${myVoca[key]}"입니다.`);
}
};
// addVoca메소드 테스트 코드
myVoca.addVoca('parameter', '매개 변수');
myVoca.addVoca('element', '요소');
myVoca.addVoca('property', '속성');
console.log(myVoca);
// deleteVoca메소드 테스트 코드
myVoca.deleteVoca('parameter');
myVoca.deleteVoca('element');
console.log(myVoca);
// printVoca메소드 테스트 코드
myVoca.printVoca('property');
실습과제: 순이들의 시험 결과
혜순이와 민순이는 이번에 SQL 자격증 시험에 응시했는데요.
아래는 두 사람의 각 과목별 점수를 정리한 객체입니다.
let hyesoonScore = {
'데이터 모델링의 이해': 10,
'데이터 모델과 성능': 8,
'SQL 기본': 22,
'SQL 활용': 18,
'SQL 최적화 기본 원리': 20,
};
let minsoonScore = {
'데이터 모델링의 이해': 14,
'데이터 모델과 성능': 8,
'SQL 기본': 12,
'SQL 활용': 4,
'SQL 최적화 기본 원리': 16,
};
자격증 합격 기준은 총점이 60점 이상인데요.
파라미터로 객체를 전달받고, 각 과목들의 점수를 모두 합산해서 시험 결과를 알려주는 passChecker 함수를 완성해 주세요! 합격 기준을 충족할 경우 '축하합니다! 합격입니다!' 라는 문자열을, 충족하지 못할 경우 '아쉽지만 불합격 입니다..'라는 문자열을 출력해야 합니다.
코드를 잘 작성하셨다면, 다음과 같은 결과가 출력되어야 합니다.
축하합니다! 합격입니다!
아쉽지만 불합격입니다..
나의 답안
let hyesoonScore = {
'데이터 모델링의 이해': 10,
'데이터 모델과 성능': 8,
'SQL 기본': 22,
'SQL 활용': 18,
'SQL 최적화 기본 원리': 20,
};
let minsoonScore = {
'데이터 모델링의 이해': 14,
'데이터 모델과 성능': 8,
'SQL 기본': 12,
'SQL 활용': 4,
'SQL 최적화 기본 원리': 16,
};
function passChecker(scoreObject) {
// 여기에 코드를 작성해 주세요.
let sum = 0;
for (let key in scoreObject) {
sum = sum + scoreObject[key];
}
if (sum >= 60) {
console.log(`축하합니다! 합격입니다!`);
} else {
console.log(`아쉽지만 불합격입니다..`);
}
}
passChecker(hyesoonScore);
passChecker(minsoonScore);
모범 답안
let hyesoonScore = {
'데이터 모델링의 이해': 10,
'데이터 모델과 성능': 8,
'SQL 기본': 22,
'SQL 활용': 18,
'SQL 최적화 기본 원리': 20,
};
let minsoonScore = {
'데이터 모델링의 이해': 14,
'데이터 모델과 성능': 8,
'SQL 기본': 12,
'SQL 활용': 4,
'SQL 최적화 기본 원리': 16,
};
function passChecker(scoreObject) {
// 여기에 코드를 작성해 주세요.
let totalScore = 0;
for (let subject in scoreObject) {
totalScore += scoreObject[subject];
}
if (totalScore >= 60) {
console.log('축하합니다! 합격입니다!');
} else {
console.log('아쉽지만 불합격입니다..');
}
}
passChecker(hyesoonScore);
passChecker(minsoonScore);
Date 객체
//Date
let myDate = new Date();
console.log(myDate);
2022-01-19T07:27:38.276Z
Date 객체는 무조건 생성한 순간으로만 만들어지지 않는다.
Date 객체를 생성할 때 괄호 안에 특정한 값을 넣어 주면 우리가 원하는 날짜를 생성할 수도 있다.
UTC 기준 1970년 1월 1일 0시 0분 0초에서 넣어준 숫자 값의 밀리초만큼 지난 객체가 만들어진다.
let myDate = new Date(1000);
console.log(myDate);
1970-01-01T00:00:01.000Z
날짜로 해석이 가능한 문자열을 넣어 주면 해당 날짜의 객체를 만들 수가 있다.
만약 '2017년 5월 18일' 객체를 만들고 싶다면 년, 월, 일을 하이픈(-)으로 나눈 문자열을 작성하면 되고
더 자세하게 시간까지 다루고 싶다면 알파벳 T를 작성후 24시간 표기 형태로 시간대를 작성해 주면 된다.
// new Date('YYYY-MM-DD')
let myDate = new Date('2017-05-18');
console.log(myDate);
// new Date('YYYY-MM-DDThh:mm:ss')
let myDate2 = new Date('2017-05-18T19:11:16');
console.log(myDate2);
2017-05-18T00:00:00.000Z
2017-05-18T19:11:16.000Z
마지막으로 한 가지 방법이 더 있는데, 소괄호 안에 여러 개의 값을 전달해 주는 방식이다.
'연도, 월, 일, 시, 분, 초, 밀리초' 순서대로 입력하면 되고 연도와 월까지는 필수이지만 나머지는 생략이 가능하다.
생략할 경우에는 '1일 0시 0분 0초 0밀리초'로 처리가 된다.
여기서 month의 경우만 시작 숫자가 0이라는 점을 주의해야 한다! 우리가 일반적으로 생각하는 1월은 컴퓨터에게 0월이라는 점을 꼭 기억하자.
이렇게 생성된 객체들은 다양한 메소드를 통해서 필요한 것만 따로 가져올 수가 있다.
getTime 메소드를 사용하면 Date 객체의 기준 날짜인 1970년 1월 1일 0시 0분 0초에 맞춰서 몇 밀리초가 지났는지를 계산해 준다. 이 정수값을 '타임스탬프'라고 부른다는 것도 기억해두면 좋을 것이다.
만약 지금 순간을 나타내는 객체를 만들어서 값을 비교하면 아래와 같이 몇 밀리초, 몇 초, 몇 분, 몇 시간이 차이 나는지를 계산할 수가 있다!
// Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);
let today = new Date();
let timeDiff = myDate.getTime() - today.getTime();
console.log(timeDiff + '밀리초');
console.log(timeDiff / 1000 + '초');
console.log(timeDiff / 1000 / 60 + '분');
console.log(timeDiff / 1000 / 60 / 60 + '시간');
이 밖에도 이런 다양한 메소드를 통해서 여러 가지 값들을 얻어낼 수가 있는데,
주의해야 될 부분은 Month 값은 0부터 시작한다는 점과 Date와 day를 명확하게 구분해야 한다는 점이다.
Date는 일반적으로 인식하는 일자를 뜻하고 Day는 요일이다.
요일은 일요일을 시작으로 0부터 6까지 값이 있는데 getDay 메소드의 반환값이 4인 경우면 목요일이라는 뜻이다.
// Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);
console.log(myDate.getFullYear());
console.log(myDate.getMonth());
console.log(myDate.getDate());
console.log(myDate.getDay());
console.log(myDate.getHours());
console.log(myDate.getMinutes());
console.log(myDate.getSeconds());
console.log(myDate.getMilliseconds());
2017
4
18
4
19
11
16
0
Date 객체 TIP
Date 객체 정보 수정하기
set으로 시작하는 다양한 메서드를 활용하면, 생성된 Date객체의 정보를 수정할 수도 있다.
(대괄호로 감싸진 요소들은 선택적인 요소이다.)
- setFullYear(year, [month], [date])
- setMonth(month, [date])
- setDate(date)
- setHours(hour, [min], [sec], [ms])
- setMinutes(min, [sec], [ms])
- setSeconds(sec, [ms])
- setMiliseconds(ms)
- setTime(miliseconds) - (1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정)
let myDate = new Date(2017, 4, 18, 19, 11, 16);
myDate.setFullYear(2002);
myDate.setMonth(6);
myDate.setDate(20);
간단하게 시간 정보 알아내기!
let myDate = new Date();
console.log(myDate.toLocaleDateString()); // myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); // myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)
toLocaleDateString().toLocaleTimeString(), toLocaleString() 메소드는 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여준다.
똑똑한 Date
Date 객체엔 자동으로 날짜를 수정해주는 유용한 기능이 있다. 범위를 벗어나는 값을 설정하려고 하면 자동으로 날짜를 수정해준다.
let myDate = new Date(1988, 0, 32); // 1988년 1월 32일은 없습니다
// 2월 1일로 자동고침 되는걸 확인할 수 있습니다.
console.log(myDate) // Mon Feb 01 1988 00:00:00
지금 이 순간
Date.now() 메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환한다. 이렇게 하면 새로운 객체를 만들지 않아도 바로 현 시점의 날짜 값을 얻어낼 수 있는 것이다.
let myDate = new Date();
console.log(Date.now() === myDate.getTime()); // true
위 코드를 보면 알 수 있듯이 새로운 객체를 만들어서 getTime 메소드를 호출한 값과 일치한다는 사실을 확인할 수 있다.
새로운 객체를 만들지 않는다는 점이 일단 우리 눈에 코드 한 줄을 줄일 수 있다는 이점도 있고, 눈에는 드러나지 않지만 코드가 실행될 때 메모리의 부담을 줄여주기도 한다. 그래서 특정한 시점이 아니라 단순히 순간순간 그 때 당시 시간 값이 필요한 경우에는 Date.now() 메소드를 활용하는 것이 코드의 가독성 뿐만아니라 성능적인 측면에서도 좀 더 유리하다.
Date 객체의 형변환
let myDate = new Date(2017, 4, 18);
console.log(typeof myDate); // object
console.log(String(myDate)); // Thu May 18 2017 00:00:00 GMT+0900 (Korean Standard Time)
console.log(Number(myDate)); // 1495033200000
console.log(Boolean(myDate)); // true
세번째 줄에서 Date 객체의 자료형을 확인해보니 'object', 즉 객체라는 것을 확인할 수 있다. Date 객체를 boolean 타입으로 변환하면 true가 되고, string 타입으로 변환하면 날짜값이 그대로 문자열로 변환이 된다.
우리가 눈여겨 볼 부분은 number 타입으로 변환할 경우이다. 이 값은 아무 의미없는 단순한 숫자값이 아니라 getTime() 메소드를 활용한 것과 똑같은 수치의 타임스탬프 값이다.
let myDate = new Date(2017, 4, 18);
console.log(myDate.getTime() === Number(myDate)); // true
이것은 다시 말해 Date 객체끼리 바로 사칙 연산도 충분히 가능하다는 뜻이기도 하다.
let myDate1 = new Date(2017, 4, 18);
let myDate2 = new Date(2017, 4, 19);
let timeDiff = myDate2 - myDate1;
console.log(timeDiff); // 86400000 (ms)
console.log(timeDiff / 1000); // 86400 (sec)
console.log(timeDiff / 1000 / 60) // 1440 (min)
console.log(timeDiff / 1000 / 60 / 60) // 24 (hour)
console.log(timeDiff / 1000 / 60 / 60 / 24) // 1 (date)
이렇게 두 Date객체 사이의 시간차이를 어렵지 않게 확인할 수 있다.
날짜를 표현하는 문자열
YYYY-MM-DDThh:mm:ss형식 말고도 날짜를 표현하는 다양한 방식의 문자열이 있다.
let date1 = new Date('12/15/1999 05:25:30');
let date2 = new Date('December 15, 1999 05:25:30');
let date3 = new Date('Dec 15 1999 05:25:30');
하지만 이런 방식을 사용하다보면 브라우저나, 컴퓨터를 사용하는 위치의 시간대에 따라 서로 다른 결과 값이 나올 수도 있기 때문에 적어도 IETF 호환 RFC 2822 타임스탬프와 ISO8601의 한 버전의 형식을 준수하는 문자열로 Date객체를 생성하는 것을 권장한다.
실습과제: 우수사원 재상이
회사에서 가장 성실하기로 유명한 재상이는 지난달에 이어 이번 달에도 이달의 우수사원으로 뽑혀 감회가 새롭습니다.
문득, 그동안 고생한 지난날이 머릿속을 스쳐지나면서 자신이 입사한 지 얼마나 지났는지도 궁금해졌는데요. 오늘은 날짜는 2112년 8월 24일이고, 재상이의 입사일은 2109년 7월 1일입니다. Date객체와 메소드를 활용해서 재상이가 입사한 지 며칠째인지를 계산해주는 workDayCalc 함수를 완성해 주세요.
(만약 8월 24일에 입사했고, 오늘이 8월 24일이면 0일이 아니라, '입사한 지 1일째'입니다.)
코드를 잘 작성하셨다면 다음과 같은 결과가 출력되어야 합니다.
오늘은 입사한 지 1151일째 되는 날 입니다.
나의 답안
let today = new Date(2112, 8, 24);
let jaeSangStart = new Date(2109, 7, 1);
function workDayCalc(startDate) {
// 여기에 코드를 작성해 주세요.
console.log(`오늘은 입사한 지 ${(today - startDate)/1000/60/60/24 + 1}일째 되는 날 입니다.`);
}
workDayCalc(jaeSangStart);
모범 답안
let today = new Date(2112, 8, 24);
let jaeSangStart = new Date(2109, 7, 1);
function workDayCalc(startDate) {
// 여기에 코드를 작성해 주세요.
let timeDiff = today.getTime() - startDate.getTime();
let dayDiff = timeDiff / 1000 / 60 / 60 / 24;
console.log(`오늘은 입사한 지 ${dayDiff + 1}일째 되는 날 입니다.`);
}
workDayCalc(jaeSangStart);
과제 해설
간단하게 생각하면, 두 날짜 간의 차이를 확인하는 과제입니다.
Date객체의 getTime메소드는 사용하면, Date객체의 기준 날짜인 1970년 1월 1일 0시 0분 0초에서 몇 밀리초가 지났는지(타임스템프)를 확인할 수 있는데요.
타임스탬프는 두 날짜간 차이를 구하는 데 아주 유용한 정보입니다. 일단 그럼 오늘 날짜와, 재상의 입사 일간의 차이를 먼저 구해서 변수에 담아두는 것이 좋겠죠?
그리고 타임스탬프는 단위가 밀리초이기 때문에, 이 값을 일수로 바꿔줘야 됩니다. 천천히 하나씩 생각해보면, 1000밀리초가 1초니깐, 일단 초단위로 바꾸려면 1000으로 나눠주면 되겠죠? 그리고 60초가 1분, 60분이 1시간, 그리고 24시간이 하루가 되니깐 다음과 같이 작성하면 타임스탬프 값을 하루 단위로 계산할 수 있습니다.
마지막으로 템플릿 문자열을 활용해서 dayDiff를 출력예시에 맞게 작성하면 됩니다. 그런데 주의해야될 부분은 dayDiff는 두 날짜간의 차이 값이기 때문에, 며칠째 인지를 계산하려면 당일 날짜를 하나 더 더해줘야 합니다.
'~2023.02 > JS' 카테고리의 다른 글
유사배열(Array-Like Object) (0) | 2022.06.01 |
---|---|
html/css_01 (0) | 2022.05.02 |
프로그래밍 기초 in JS_[토픽3]프로그래밍과 데이터 in JS_자료형 심화&과제로 복습하기 (0) | 2022.01.19 |
프로그래밍 기초 in JS_[토픽3]프로그래밍과 데이터 in JS_배열 (0) | 2022.01.19 |
프로그래밍 기초 in JS_[토픽2]프로그래밍 핵심 개념 in JS_제어문 (0) | 2022.01.18 |