JavaScript (4)

깨진알·2023년 12월 5일
JavaScript

JavaScript

목록 보기
4/21

JavaScript 객체

1. 객체와 프로퍼티

객체는 {}를 통해 만들어진다. 객체 속 여러 프로퍼티들은 ,로 구분하며 Key(값 이름) : Value(값) 또는 Property Name : Property Value의 구조를 갖고 있다. Key값들은 ""로 감싸주어야 하지만 생략해도 무방하다. Property Name의 주의 사항으로는 아래와 같은 것들이 있다.

  • 첫 번째 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작해야 한다.
  • 띄어쓰기 금지
  • 하이폰(-) 금지
  • 위 3가지에 해당하지 않을 때는 무조건 따움표("")를 해주어야 한다.

2. 객체에서 데이터 접근하기

let crackedEgg = {
	name : '깨진알',
	isVeryNice : true,
	bestCourse : {
		title: '자바스크립트',
		language : 'JavaScript'
	},
	'born year' : 2023
};

// 점 표기법 (objectName.propertyName)
console.log(crackedEgg.name); // 깨진알

// 대괄호 포기법 (objectName['propertyName']) -> 띄어쓰기가 있을 경우 사능
console.log(crackedEgg['born year']); // 2023

// 객체 안에 객체 접근하기
console.log(crackedEgg.bestCourse.title);
console.log(crackedEgg.bestCourse['title']);

3. 객체 다루기

let crackedEgg = {
	name : '깨진알',
	isVeryNice : true,
	bestCourse : {
		title: '자바스크립트',
		language : 'JavaScript'
	},
	'born year' : 2023
};

// 프로퍼티 수정
crackedEgg.name = 'crackedEgg';
console.log(crackedEgg.name);

// 프로퍼티 추가
crackedEgg.ceo = '이름';
console.log(crackedEgg.ceo);

// 프로퍼티 삭제
delete crackedEgg.isVeryNice;

// 프로퍼티 존재여부 ('propeprtyName' in object) = ('propertyName' !== undefined)
console.log('name' in crackedEgg); // true, boolean 형태로 값 리턴

4. 객체와 메소드

// 메소드 (Method)
let greetings = {
	sayHello: function() {
		console.log("Hello!");
	},
	sayHi: function(name) {
		console.log(`Hi! ${name}`);
	},
	sayBye: function() {
		console.log("Bye!");
	}
};

// 점 표기법
greetings.sayHello(); // Hello!

// 대괄호 표기법
greetings['sayHi']("Cracked_Egg"); // Hi! Cracked_Egg

메소드를 사용하면 다른 함수와의 이름 중복을 피할 수 있다.

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;
	}
};

5. for..in 반복문

/*
for (변수 in 객체) {
	동작부분
}
*/

let crackedEgg = {
	name : '깨진알',
	bornYear : 2023,
	isVeryNice : true,
	worstCourse : null,
	bestCourse : '자바스크립트'
};

for (let key in crackedEgg ) { // 프로퍼티 개수만큼 동작, 변수이름은 마음대로 설정 가능
	console.log(key); // 각 프로퍼티 이름이 출력
	console.log(crackedEgg[key]); // 프로퍼티 값 출력
};

# for..in 주의사항

  • 숫자형(양수) 프로퍼티 네임
    프로퍼티 네임에는 숫자형(양수)을 작성해서 사용할 수 있다.
let myObject = {
  300: '정수',
  1.2: '소수',
};

for (let key in myObject) {
  console.log(`${key}의 자료형은 ${typeof key}입니다.`);
}

각 프로퍼티 네임들의 자료형은 모두 String, 문자열로 출력된다.

300의 자료형은 string입니다.
1.2의 자료형은 string입니다.

이런 예외적인 파라미터 네임은 접근할 때도 대괄호 표기법으로만 접근이 가능하다.

let myObject = {
  300: '정수',
  1.2: '소수',
};

console.log(myObject['300']);
console.log(myObject['1.2']);
console.log(myObject.300); // Error!
console.log(myObject.1.2); // Error!
  • 정수형 프로퍼티 네임
    객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있다.
let myObject = {
  3: '정수3',
  name: 'cracked_egg',
  1: '정수1',
  birthDay: '2017.5.17',
  2: '정수2',
};

for (let key in myObject) {
  console.log(key);
}
1
2
3
name
birthDay

3, name, 1, birthday, 2 순서로 프로퍼티가 작성되었음에도 불구하고, 오름차순으로 정렬이 되어 출력된 모습을 불 수 있다. 정수형 프로퍼티에 따움표("")를 붙여 문자열처럼 만들더라도, 정렬 방식은 동일하게 처리된다.

자동으로 정렬되는 특성이 장점처럼 느껴질 수도 있지만, 대부분의 경우에는 의도치 않은 결과를 가져올 수 있기 떄문에 일반적으로 정수형 프로퍼티는 잘 사용되지 않는다. 불가피한 경우에는 이런 객체의 정렬 방식을 잘 이해한 상태에서 사용하고, 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하는걸 추천한다.

6. date 객체

// Date
let myDate = new Date();

console.log(myDate); // 생성한 순간이 출력된다

// new Date(milliseconds)
let myDate = new Date(1000); // 1970년 1월 1일 00:00:00 UTC + 1초(1000ms)

// new Date("YYYY-MM-DD")
let myDate1 = new Date("2023-12-05");

// new Date("YYYY-MM-DDThh:mm:ss")
let myDate2 = new Date("2023-12-05T12:43:44");

// new Date(year, month, date, hours, minuetes, seconds, ms)
// month는 0부터 시작한다. (1월은 0으로 표기)
let myDate1 = new Date(2023, 11, 05, 09, 44, 45);
let myDate2 = new Date(2023, 11, 05, 09, 44);
let myDate3 = new Date(2023, 11, 05, 09);
let myDate4 = new Date(2023, 11, 05);
let myDate5 = new Date(2023, 11);

// Date.getTime()
// 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초 지났는지? -> 타임스탬프(Time Stamp)
let myDate = new Date(2023, 11, 05, 09, 44, 45);

console.log(myDate.getTime());

let myDate = new Date(2023, 11, 05, 09, 44, 45);
let todya = new Date();

let timeDiff = myDate.getTime() - today.getTime();

console.log(timeDiff + "밀리초");
console.log(timeDiff + "초");
console.log(timeDiff / 1000 / 60 + "분");
console.log(timeDiff / 1000 / 60 / 60 + "시간");

let myDate = new Date(2023, 11, 05, 09, 44, 45);

console.log(myDate.getFullYear()); // 2023
console.log(myDate.getMonth()); // 12
console.log(myDate.getDate()); // 05
console.log(myDate.getDay()); // 2(화요일), 일요일부터 0 ~ 6까지
console.log(myDate.getHours()); // 09
console.log(myDate.getMinutes()); // 44
console.log(myDate.getSeconds()); // 45
console.log(myDate.getMilliseconds()); // 0

# Date 객체 Tip

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부터 밀리초 이후를 나타내는 날짜를 설정)
let myDate = new Date(2017, 4, 18, 19, 11, 16);

myDate.setFullYear(2002);
myDate.setMonth(6);
myDate.setDate(20);

1. 간단하게 시간 정보 알아내기

let myDate = new Date();

console.log(myDate.toLocaleDateString()); // myDate가 가진 날짜에 대한 정보 (년. 월. 일)
console.log(myDate.toLocaleTimeString()); // myDate가 가진 시간에 대한 정보 (시:분:초)
console.log(myDate.toLocaleString()); // myDate가 가진 날짜와 시간에 대한 정보 (년. 월. 일 시:분:초)

toLocaleDateString(), toLocaleTimeString(), toLocaleString() 메소드는 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여준다.

2. 스마트한 Date

Date 객체엔 자동으로 날짜를 수정해주는 유용한 기능이 있다. 범위를 벗어나는 값을 설정하려고 하면 자동으로 날짜를 수정해 준다.

let myDate = new Date(1988, 0, 32); // 1988년 1월 32일은 없다.

// 2월 1일로 자동고침 되는걸 확인할 수 있다.
console.log(myDate) // Mon Feb 01 1988 00:00:00

3. 지금 이 순간

Date.now() 메소드는 이 메소도가 호출된 시점의 타임스탬프를 반환한다. 이렇게 하면 새로운 객체를 만들지 않아도 바로 현 시점의 날짜 값을 얻어낼 수 있다.

let myDate = new Date();

console.log(Date.now() === myDate.getTime()); // true

새로운 객체를 만들지 않는다는 점은 우리 눈에 코드 한 줄을 줄일 수 있다는 이점도 있고, 눈에는 드러나지 않지만 코드가 실행될 때 메모리의 부담을 줄여주기도 한다. 그래서 특정한 시점이 아니라 단순히 순간순간 그 때 당시 시간 값이 필요한 경우에는 Date.now() 메소드를 활용하는 것이 코드의 가독성 뿐만아니라 성능적인 측명에서도 좀 더 유리하다.

4. 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)

5. 날짜를 표현하는 문자열

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 객체를 생성하는 것을 추천한다.

profile
깨진알
프론트엔드 지식으로 가득찰 때까지
이전 포스트

JavaScript (3)

다음 포스트

JavaScript (5)

0개의 댓글