[자바스크립트] TIL6 : 객체의 정의와 특성 이름의 표기 방법 / 데이트 객체를 이용한 날짜와 시간 처리

---

▣ 객체(Object Literals)

앞서 설명한 대로 '모든 대상을 특성(Property)을 가진 객체로 파악하고, 특성은 고유의 이름(name 또는 key)과 값(value)을 가진다."는 개념에서 디자인된 객체(Object Literals; 자료형 object와 다름)는 모든 정보를 { } 기호 안에 포함하고 있습니다.  

즉, 객체는 { } 기호 내에 있는 특성들의 집합으로 정의되고, 특성은 이름과 값의 쌍으로 이루어져 있으며, 값은 숫자, 문자, 함수, 객체 등 다양한 형태가 될 수 있습니다.

 

---

□ [ ] 표기법(Bracket Notation)과 . 표기법(Dot Notation)

/* Object Literals */
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  email: "john@example.com",
  hobbies: ["music", "sports"],
  address: {
    city: "Seoul",
    nation: "Korea",
  },
  getBirthYear: function () {
    return 2021 - this.age;
  },
};

/* Notation of property's name */
console.log(person.firstName);
console.log(person["firstName"]);

/* Dynamic property's name */
const key = "lastName";
console.log(person[key]);

console.log(person.hobbies[1]);
console.log(person.address.state);
console.log(person.address["city"]);
console.log(person.getBirthYear());

 

객체의 특성 이름을 표기하는 방법에는 두 가지가 있는데 [ ] 기호를 이용하는 방법과 . 기호를 이용하는 방법입니다. 특히 [ ]을 이용할 경우에는 특성의 이름인 문자열을 변수에 할당하여 동적으로 코딩을 할 수 있어 유용합니다. 

 

/* Bracket Notation */
person['firstName']

/* Dot Notation */
person.firstName

 

그리고 특성의 값이 배열이거나 객체 또는 함수일 경우에는 마찬가지로 배열 및 객체의 표기법을 사용하여 값에 접근할 수 있고, 함수(메서드) 또한 호출하여 사용할 수 있습니다. 다만, 기본형(Primitive Type)과 달리 자료 구조의 깊이(Depth)가 있습니다. 

 

 

---

□ 객체들로 구성된 배열

/* Array of Objects */
const people = [
  { name: "Pete", age: 30 },
  { name: "Jerry", age: 27 },
  { name: "Ethan", age: 25 },
];

for (let i = 0; i < people.length; i++) {
  console.log(people[i].name);
}

for (let i = 0; i < people.length; i++) {
  console.log(people[i].age);
}​

 

앞으로 자주 만나게 될 데이터의 간단한 기본 구조는 위의 코드 예시와 같이 일정한 특성들의 패턴(name, age의 반복)을 가진 객체들의 집합으로 이루어진 배열 자료구조입니다. 따라서 배열 내의 객체들로부터 반복적인 패턴의 데이터 값을 얻기 위해서 반복문이 필요합니다.

 

 

---

반응형

---

 

▣ 데이트 객체(Date Object)

데이트 객체를 통해 생성된 날짜와 시간 자료를 처리하기 위해 필요한 대표적인 메서드들을 살펴보겠습니다.

 

---

□ 데이트 객체 메서드 예시1

/* Date Object */
const today = new Date();
console.log(typeof today);
console.log(today);

console.log(today.getDay()); // 0(Sun), 1(Mon), 2(Tue), 3(Wed), 4(Thu), 5(Fri), 6(Sat)

console.log(today.getMonth()); // 0(Jan), 1(Feb), 2(Mar), 3(Apr), 4(May), 5(Jun), ...

console.log(today.getDate());

console.log(today.getFullYear());

console.log(today.getHours());

console.log(today.getMinutes());

console.log(today.getSeconds());

console.log(today.getMilliseconds());

 

▷ new Date()

객체 생성자의 인자에 주어지는 값이 없으면 현재 시각을 기준으로 날짜와 시간 데이터를 생성합니다.

 

▷ getDay()

생성된 날짜 자료로부터 숫자 0부터 6까지의 '요일' 데이터를 얻습니다. 숫자는 일요일(0)부터 토요일(6)을 의미합니다.

 

▷ getMonth()

생성된 날짜 자료로 부터 숫자 0부터 11까지의 '월' 데이터를 얻습니다. 숫자는 1월(0)부터 12월(11)을 의미합니다.

 

▷ getDate()

생성된 날짜 자료로 부터 숫자 1부터 31까지의 '일' 데이터를 얻습니다.

 

▷ getFullYear()

생성된 날짜 자료로 부터 네 자리 숫자로 된 '년' 데이터를 얻습니다.

 

▷ getHours()

생성된 날짜 자료로부터 숫자 0부터 23까지의 '시' 데이터를 얻습니다.

 

▷ getMinutes()

생성된 날짜 자료로부터 숫자 0부터 59까지의 '분' 데이터를 얻습니다.

 

▷ getSeconds()

생성된 날짜 자료로부터 숫자 0부터 59까지의 '초' 데이터를 얻습니다.

 

▷ getMilliseconds()

생성된 날짜 자료로부터 숫자 0부터 999까지의 '1/1000초' 데이터를 얻습니다.

 

 

---

□ 데이트 객체 메서드 예시2

/* Set date and time*/
let birthday = new Date("1-12-1990 06:30:00");
console.log(birthday);

birthday = new Date("January 12 1990");
console.log(birthday);

birthday = new Date("1/12/1990");

console.log(birthday);
birthday.setMonth(2);

console.log(birthday);
birthday.setDate(17);
console.log(birthday);

birthday.setFullYear(1992);
console.log(birthday);

birthday.setHours(9);
console.log(birthday);

birthday.setMinutes(15);
console.log(birthday);

birthday.setSeconds(20);
console.log(birthday);

 

▷ new Date()

객체 생성자의 인자에 주어지는 값이 있으면 그 값을 기준으로 날짜와 시간 데이터를 생성합니다. 이때 주어지는 값의 포맷은 다양한 형태를 지원합니다.

 

▷ setMonth()

숫자 0부터 11까지의 '월' 데이터를 설정합니다.

 

▷ setDate()

숫자 1부터 31까지의 '일' 데이터를 설정합니다.

 

▷ setFullYear()

네 자리 숫자로 된 '년' 데이터를 설정합니다.

 

▷ setHours()

숫자 0부터 23까지의 '시' 데이터를 설정합니다.

 

▷ setMinutes()

숫자 0부터 59까지의 '분' 데이터를 설정합니다.

 

▷ setSeconds()

숫자 0부터 59까지의 '초' 데이터를 설정합니다.

 

 

---