객체와 프로퍼티
자바스크립트의 모든 것이 다 객체다.
객체는 중괄호{}를 통해서 만들 수 있고, 값의 이름에 콜론을 붙이고, 쉼표로 구분함.
{
brandName: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null
}
• 값 이름 : Key (Property Name)
brandName, bornYear, isVeryNice, worstCourse
→ 문자열 (따옴표 생략 가능)
Property Name을 따옴표 없이 작성할 때 주의사항
1. 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작
2. 띄어쓰기 금지
3. 하이픈(-) 금지
• 값 : value (Property Value)
코드잇, 2017, true, null
→ 문자열, 숫자, 불린, null
• 속성(Property) : Key(값 이름) + value(값)
{
brandName: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초'
language: 'JavaScript'
}
}
// 객체 안에 객체를 넣을 수 있음
객체에서 데이터 접근하기
객체에서 데이터를 접근하는 방법
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
'is VeryNice': true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
let myObject = {
key: value,
};
myObject.key;
myObject['key'];
// 객체의 프로퍼티에 어떻게 접근하는가?
// 점 표기법 (objectName.propertyName)
console.log(codeit.bornYear); //2017
// 대괄호 표기법 (objectName['propertyName'])
console.log(codeit['born Year']); //2017
점 표기법 (objectName.propertyName)
따옴표가 붙어 있는 property name으로는 접근할 수 없음.
'is VeryNice' 같은 경우 : codeit.is VeryNice로 입력하면 각각 다른 문장으로 인식함.
console.log(codeit.bornYear);
대괄호 표기법 (objectName['propertyName'])
띄어쓰기나 숫자로 접근하는 프로퍼티 접근이 가능함.
객체 이름 다음에 프로퍼티 이름을 문자열로 만들 수 있는 어떤 방법이든 사용 가능함.
console.log(codeit['born' + 'Year']);
let propertyName = 'name'
console.log(codeit[propertyName]);
객체 안의 객체에 접근하는 방법
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
'is VeryNice': true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 객체 안의 객체에 접근하기
// 점 표기법
console.log(codeit.bestCourse.title);
// 대괄호 표기법
console.log(codeit.bestCourse['title']);
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
'is VeryNice': true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 존재하지 않는 객체에 접근하기
// --> undefined가 출력됨
console.log(codeit.bestCourse['teacher']);
객체 다루기
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 프로퍼티 변경하기
// name을 '코드잇'에서 'codeit'으로 바꿈
console.log(codeit.name);
codeit.name = 'codeit';
console.log(codeit.name);
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 프로퍼티 생성하기
console.log(codeit.ceo);
codeit.ceo = '강영훈';
console.log(codeit.ceo);
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 프로퍼티 삭제하기
console.log(codeit.worstCourse);
delete codeit.worstCourse;
console.log(codeit.worstCourse);
codeit을 입력하면 객체의 내용을 볼 수 있음.
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 프로퍼티의 존재여부 확인하기
// 1. undefined
console.log(codeit.name !== undefined);
// 2. in 연산자
// 'propertyName' in object
console.log('name' in codeit);
// 불린 형태로 값을 리턴함.
굳이 in 연산자를 사용해서 프로퍼티를 확인하는 이유
: 안전하게 확인하기 위해서
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: undefined,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// 프로퍼티의 존재여부 확인하기
console.log(codeit.worstCourse !== undefined); // false
// undefined 값이 할당되었을 때 제대로 판별이 불가능하다
console.log('worstCourse' in codeit); // true
in 연산자는 결과가 불린값으로 나오기 때문에 if문에 활용하기 좋음
// 객체 (Object)
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: undefined,
bestCourse: {
title: '자바스크립트 프로그래밍 기초',
language: 'JavaScript'
}
};
// in 연산자를 활용한 if문
if ('name' in codeit) {
console.log(`name 값은 ${codeit.name}입니다.`);
} else {
console.log('name 프로퍼티는 존재하지 않습니다.');
}
// 객체 codeit 안에 name이라는 프로퍼티가 있으므로
// if문이 출력됨.
객체와 메소드
객체의 메소드(method) :
- 객체가 가지고 있는 함수
- 객체의 속성 중에서 함수를 가지고 있는 속성(프로퍼티)
// 메소드 (Method)
/*
여러 함수들을 하나로 묶고 싶은 경우
객체의 프로퍼티에는 어떤 자료형이든 저장할 수 있기 때문에
프로퍼티 값으로 함수를 넣어주면 됨.
그 "함수"를 객체의 "메소드"라고 부름.
*/
// greetings라는 객체에 3개의 메소드가 정의됨.
let greetings = {
sayHello: function () {
console.log('Hello!');
},
sayHi: function() {
console.log('Hi!');
},
sayBye: function() {
console.log('Bye!');
}
};
// 점 표기법
greetings.sayHello();
// 메소드 (Method)
let greetings = {
// 파라미터가 필요한 경우
// -> 소괄호 안에 파라미터 작성
sayHello: function (name) {
console.log(`Hello! ${name}`);
},
sayHi: function() {
console.log('Hi!');
},
sayBye: function() {
console.log('Bye!'); // console이라는 객체에 log라는 메소드
}
};
// 점 표기법
greetings.sayHello('Codeit');
// name -> 'Codeit'을 넣어서 출력하도록 함.
// 메소드 (Method)
let greetings = {
// 파라미터가 필요한 경우
// -> 소괄호 안에 파라미터 작성
sayHello: function (name) {
console.log(`Hello! ${name}`);
},
sayHi: function() {
console.log('Hi!');
},
sayBye: function() {
console.log('Bye!');
}
};
// 점 표기법
greetings.sayHello('Codeit');
// name -> 'Codeit'을 넣어서 출력하도록 함.
// 대괄호 표기법
greetings['sayHello']('Codeit');
// 프로퍼티에 먼저 접근한 다음 소괄호를 열어서 메서드를 호출
왜 굳이 메소드를 만들어서 사용하는가?
→ 메소드는 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있기 때문임
// 메소드 (Method)
let rectAngle = {
width: 30,
height: 50,
getArea: function () {
return rectAngle.width * rectAngle.height;
}
}
let triAngle = {
width: 15,
height: 40,
getArea: function () {
return triAngle.width * triAngle.height / 2;
}
}
사각형과 삼각형은 서로 넓이를 구하는 방법이 다름
getArea는 넓이를 구하는 함수이나, 객체에 따라 계산 방법을 다르게 함
일반적인 함수는 함수 이름이 중복되지 않도록 해야함.
1) 함수 이름 중복을 신경쓰지 않아도 됨.
2) 객체에 집중해서 동작부분을 작성할 수 있음.
→ 의미있는 코드로 활용 가능함.
let myVoca = {
addVoca:
function(영어단어, 뜻) {
myVoca[영어단어] = 뜻
},
deleteVoca:
function(영어단어) {
delete myVoca[영어단어];
}, // 메소드(프로퍼티)마다 쉼표 무조건 쓰기!!!!
printVoca:
function(영어단어, 뜻) {
console.log( `"${영어단어}"의 뜻은 "${myVoca[영어단어]}"입니다.`)
}
};
// 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');
해당 객체 속성의 값으로 함수를 할당할 경우, 함수의 문자열 표현인 [Function: 함수이름]이 출력됨.
[Function: addVoca]은 console.log(myVoca)에서 myVoca 객체를 출력할 때 addVoca 속성의 값으로 함수를 가지고 있기 때문에 나오는 것
for...in 반복문
// for..in
// 객체 안의 프로퍼티로 반복적인 동작을 수행
// 일반적인 for문으로 대체할 수 없음
for (변수 in 객체) {
동작부분
}
// 객체의 프로퍼티네임이 변수에 할당됨.
// 객체의 프로퍼티 개수만큼 반복동작을 함.
// for..in
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: '자바스크립트 프로그래밍 기초'
}
for (let key in codeit) {
console.log(key);
}
/*
codeit 객체의 프로퍼티 개수만큼 반복
key라는 변수에 프로퍼티 네임들이 차례대로 전달됨
*/
// for..in
let codeit = {
name: '코드잇',
bornYear: 2017,
isVeryNice: true,
worstCourse: null,
bestCourse: '자바스크립트 프로그래밍 기초'
}
for (let key in codeit) {
console.log(key); // 프로퍼티 네임을 가져옴
console.log(codeit[key]); // 프로퍼티 "값"을 가져옴
}
• 숫자형(양수) 프로퍼티 네임
// 숫자형(양수) 프로퍼티네임
let myObject = {
300: '정수',
1.2: '소수',
};
//실제로 사용될 때는 문자열로 형 변환이 됨.
for (let A in myObject) {
console.log(`${A}의 자료형은 ${typeof A}입니다.`);
}
// '대괄호 표기법'으로 접근하기
console.log(myObject['300'])
// 300이라는 프로퍼티의 값을 출력 ---> 정수
console.log(myObject['1.2'])
// 1.2라는 프로퍼티의 값을 출력 ----> 소수
console.log(myObject.300) // 에러
console.log(myObject1.2) // 에러
• 정수형 프로퍼티 네임
객체는 먼저 정수형 프로퍼티 네임을 오름차순으로 정렬한 후, 나머지 프로퍼티들은 추가한 순서대로 정렬함.
// 정수형 프로퍼티 네임
let myObject = {
3: '정수3',
name: 'codeit',
1: '정수1',
birthDay: '2017.5.17',
2: '정수2'
}
for (let key in myObject) {
console.log(key);
}
// myObject 객체의 프로퍼티를 변수 key 안에 할당 후 출력
// 1
// 2
// 3
// name
// birthday
// 가 출력됨
의도치 않은 결과가 나올 수 있어서 잘 사용하지 않음.
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 score in scoreObject) {
/*
1. 프로퍼티 이름에 맞는 "값"을 가져와서 score에 저장하기
--> for in 반복문에서 A
**주의할 점 : 변수 A는 scoreObject 속성의 값이 다 모여 있는 것
2. totalScore 변수를 생성
---> A값(screOjbect의 속성값)을 누적시키기
*/
totalScore += scoreObject[score]
}
if (totalScore >= 60) {
console.log("축하합니다! 합격입니다!")
} else {
console.log("아쉽지만 불합격입니다..")
}
}
passChecker(hyesoonScore);
passChecker(minsoonScore);
scoreObject['score'] : scoreObject 객체의 'score' 프로퍼티의 값을 가져옴.
→ scoreObject 객체에 'score'라는 이름의 프로퍼티가 있을 때만 작동하고, 이 경우는 없으므로 undefined를 반환함.
scoreObject[score] : 현재 for 루프에서 참조하는 score 프로퍼티의 값을 가져옴.
→ 10, 8, 22 ....
Date 객체
날짜와 시간을 표현하는 객체이며, 현재 시간이나 특정 시간을 나타내는 데 사용됨.
// Date 객체
let myDate = new Date();
console.log(myDate);
// 객체를 생성한 시각이 출력됨.
/*
Wed May 03 2023 15:07:10 GMT+0900 (한국 표준시)
요일 월 일 년도 시간 시간대
*/
// Date 객체
let myDate = new Date();
// 꼭 현재 순간만 출력되는 거 아님!
new Date (특정한 값);
// new Date(milliseconds)
let myDate = new Date(1000);
1970년 1월 1일 00:00:00 UTC + 1000밀리초!
밀리초 = 1초를 1000으로 나눈 단위
1000밀리초 = 1초
즉, 1970년 1월 1일 00:00:00 UTC + 1초 객체가 생성됨.
// new Date('문자열')
// new Date('YYYY-MM-DD')
let myDate1 = new Date('2017-05-18');
console.log(myDate1);
// Thu May 18 2017 09:00:00 GMT+0900 (한국 표준시)
// 시간 지정 X -> 자정을 기준으로 하여 객체가 생성됨
// new Date('YYYY-MM-DDThh:mm:ss')
let myDate2 = new Date('2017-05-18T19:11:16');
console.log(myDate2);
// Thu May 18 2017 19:11:16 GMT+0900 (한국 표준시)
// 시간 지정 O -> 해당 시간에 맞는 객체가 생성됨
// new Date(YYYY, MM, DD, hh, mm, ss, ms);
/*
년도(YYYY), 월(MM)은 필수, 나머지는 생략 가능
만약 생략한 경우 : new Date(YYYY, MM, 1, 0, 0, 0, 0);
*/
let myDate1 = new Date(2017, 4, 18, 19, 11, 16);
let myDate2 = new Date(2017, 4, 18, 19, 11);
let myDate3 = new Date(2017, 4, 18, 19);
let myDate4 = new Date(2017, 4);
console.log(myDate1);
console.log(myDate2);
console.log(myDate3);
console.log(myDate4);
console.log(myDate5);
/* 주의사항 : MM(월)만 0부터 시작함
2017, 4는 2017년 5월을 의미함. */
// Date.getTime()
let myDate = new Date(2017, 4, 18, 19, 11, 16);
console.log(myDate.getTime());
// myDate 객체가 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초 지났는지
// ---> 이 정수 값을 "타임스탬프(time stamp)"라고 부름
// 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 + '시간'); // 시간 단위
// 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());
주의할 점
- month는 0부터 시작함. 0 = 1월
- date와 day를 명확히 구분해야 함.
date = 일자, day = 요일 (일요일부터 0 ~ 6까지)
let today = new Date();
console.log(today.getDay());
/*
현재 시간을 나타내는 'Date' 객체를 생성한 후
해당 날짜의 요일을 반환함.
getDay() 메소드는 일요일부터 토요일까지 0부터 6으로 출력함
today.getDay()가 반환하는 값
= 현재 시간이 무슨 요일인지를 나타내는 정수값
ex. 3 ---> 수요일
*/
• D-day 계산기
// D-day 계산기
// 기준날 = 정보처리기사 필기 시험 (23.05.13.08:40AM)
let theDay = new Date(2023, 4, 13, 8, 40);
let today = new Date();
let timeDiff = theDay.getTime() - today.getTime();
// 일이라서 24나누기까지 추가함
// 해당 날짜 (d-day)는 카운트 제외, 오늘은 카운트 포함
// ====> Math.round로 반올림해줌
console.log(Math.round(timeDiff / 1000 / 60 / 60 / 24) + '일');
• Date 객체 정보 수정하기
set으로 시작하는 다양한 메서드를 활용하면, 생성된 Date객체의 정보를 수정할 수 있음.
(대괄호로 감싸진 요소들은 선택적인 요소)
setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds)(1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정)
// Date 정보 수정하기
let myDate = new Date(2017, 4, 18, 19, 11, 16);
myDate.setFullYear(2002);
myDate.setMonth(6);
myDate.setDate(20);
console.log(myDate);
// Sat Jul 20 2002 19:11:16 GMT+0900 (한국 표준시)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear
Date.prototype.setFullYear() - JavaScript | MDN
setFullYear() 메서드는 현지 시간에 따라 지정된 날짜의 전체 연도를 설정합니다. 새로운 타임 스탬프를 반환합니다.
developer.mozilla.org
• 간단하게 시간 정보를 알아내는 메소드
// 간단하게 시간 정보 알아내는 방법
let myDate = new Date ();
// 사용자의 브라우저에 설정된 국가의 표기에 맞춰
// 날짜와 시간을 보여줌.
console.log(myDate.toLocaleDateString());
// myDate가 가진 날짜에 대한 정보
// --> 2023. 5. 3.
console.log(myDate.toLocaleTimeString());
// myDate가 가진 시간에 대한 정보
// --> 오후 4:42:16
console.log(myDate.toLocaleString());
// myDate가 가진 날짜와 시간에 대한 정보
// --> 2023. 5. 3. 오후 4:42:16
• 범위를 벗어난 날짜가 자동 수정되는 기능
// 범위를 벗어난 날짜를 자동 수정
let myDate = new Date(1997, 0, 35);
// 1997년 1월 35일은 존재하지 않음.
console.log(myDate);
// Tue Feb 04 1997 00:00:00 GMT+0900 (한국 표준시)
// 1997년 2월 4일로 자동 수정되어 출력됨.
• Date.now()
Date.now() 메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환
새로운 객체를 만들지 않아도 현 시점의 날짜 값을 얻어낼 수 있는 것
// Date.now()
// 현재 시간을 밀리초 단위의 정수 값으로 반환하는 메서드
let myDate = new Date();
console.log(Date.now() === myDate.getTime());
/*
현재 시간과 'myDate' 객체의 시간값을 비교하고,
두 값이 같으면 true를 반환함.
----> true
*/
• Date객체의 형변환
// Date객체의 형변환
let myDate = new Date(2023, 4, 3);
// 23년 5월 3일을 나타내는 'myDate'라는 Date 객체를 생성
console.log(Number(myDate));
/*
출력된 결과값 : 1683039600000
---> getTime 메소드를 활용한 것과 똑같은 수치값
'getTime'은 myDate 객체가
1970년 1월 1일 00:00:00 UTC부터 몇 밀리초 지났는지
출력해주는 메소드
---> 이 정수 값을 "타임스탬프(time stamp)"라고 부름
*/
console.log(myDate.getTime());
console.log(myDate.getTime() === Number(myDate));
// 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)
• 날짜를 표현하는 문자열
// 날짜를 표현하는 문자열
let date0 = new Date('1999-12-1505:25:30')
// 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');
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
Date - JavaScript | MDN
JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다. Date 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담습니다.
developer.mozilla.org
브라우저나, 컴퓨터를 사용하는 위치의 시간대에 따라 서로 다른 결과 값이 나올 수도 있음.
→ IETF 호환 RFC 2822 타임스탬프와 ISO8601의 한 버전의 형식을 준수하는 문자열로 Date객체를 생성하자.
• Date와 new Date의 차이점
JavaScript에서 new 키워드를 사용하여 객체를 생성할 때, 객체의 인스턴스를 생성하고 반환함.
Date()는 생성자 함수이며,
new를 사용하여 인스턴스를 생성하지 않고 호출하면 해당 시점의 날짜와 시간 정보를 문자열로 반환함.
console.log(typeof Date(2020,01,01));
/*
Date() 생성자 함수를 호출하고 반환된
문자열의 데이터 타입을 출력하므로
→ string을 출력
*/
console.log(typeof new Date(2020, 01, 01));
/*
new 연산자를 사용하여 Date() 생성자 함수의 인스턴스를 생성하고,
해당 인스턴스의 데이터 타입을 출력
→ object를 출력
*/
