[자바스크립트 코딩 - 정보] 객체에 대해서 알아두면 좋은 8가지 팁

자바스트크립트 : 객체에 대해서 알아두면 좋은 정보

객체라는 것은 객체 또는 오브젝트(object)는 클래스에서 정의한 것을 토대로 메모리(실제 저장공간)에 할당된 것으로 프로그램에서 사용되는 데이터 또는 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조, 함수 또는 메소드가 될 수 있습니다.

 

프로그래밍 언어는 변수를 이용해 객체에 접근하므로 객체와 변수라는 용어는 종종 함께 사용됩니다.

 

객체지향 프로그래밍에서 객체는 클래스의 인스턴스입니다.

 

클래스 객체는 자료와 그 자료를 다루는 명령의 조합을 포함하여 객체가 메시지를 받고 자료를 처리하며 메시지를 다른 객체로 보낼 수 있도록 합니다.

 

실세계의 비유로 설명하자면, 가령 어떤 사람이 집에서 살기를 원할 때, 그 집의 청사진(집의 설계도)이나 축소 모형 따위는 전혀 필요가 없다. 필요한 것은 설계에 맞는 실제 집이라고 볼 수 있습니다.

 

이 비유에서 청사진은 클래스를, 실제 집은 객체를 나타냅니다.

 

for...in 주의사항

for in문을 활용하면 객체 내부에 있는 모든 프로퍼티들을 하나씩 다룰 수 있다고 배웠습니다.

 

지금까지 살펴본 바로는, for in 반복문이 실행될 때 따로 정해진 순서 없이 객체에 추가한 순서를 따라서 반복문이 수행된걸 볼 수 있는데요.

 

그런데 이 코드를 한번 보세요.

let myObject = {
  '2': '알고리즘의 정석',
  '3': '컴퓨터 개론',
  '1': '자바스크립트 프로그래밍 기초'
};

for (let key in myObject) {
  console.log(myObject[key]);
}

자바스크립트 프로그래밍 기초
알고리즘의 정석
컴퓨터 개론

분명히 객체를 작성할 때는 알고리즘의 정석, 컴퓨터 개론, 자바스크립트 프로그래밍 기초 순서로 작성했는데,

뭔가 우리가 작성한 순서와 다르게 for in 반복문이 수행되었습니다.

 

왜 이렇게 된 걸까요!? 객체의 프로퍼티는 어떤 순서로 정렬이 되는 걸까요!?

반복문을 사용할 때 이 순서를 알지 못하면, 방금처럼 의도치 않은 결과를 얻게 될 수도 있습니다.

 

상황에 따라서는 치명적인 오류로 이어질 수도 있겠죠?

그럼 객체의 프로퍼티 네임의 예외사항과 함께 객체의 정렬 방식에 대해서 조금 더 살펴봅시다.

 

숫자형(양수) 프로퍼티 네임

흔한 경우는 아니라서, 처음 객체를 배우는 레슨에서 다루진 않았지만 사실 프로퍼티 네임에는 숫자형(양수)을 작성해서 사용할 수도 있습니다.

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

다만 실제로 사용될 때는 문자열로 형 변환이 되어 사용되는데요.

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

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

이렇게 for in 문을 활용해서 각 프로퍼티 네임들의 자료형을 확인해보면, 모두 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!

 

정수형 프로퍼티 네임

객체의 프로퍼티 네임으로 숫자형을 그대로 사용할 수도 있다는 점을 살펴봤는데요.

 

for in문을 사용할 때 주의해야 할 순간은 바로 정수형 프로퍼티 네임이 있을 때 입니다.

 

객체는 정수형 프로퍼티 네임을 오름차순으로 먼저 정렬하고, 나머지 프로퍼티들은 추가한 순서대로 정렬하는 특징이 있습니다.

let myObject = {
  3: '정수3',
  name: 'codeit',
  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순서로 프로퍼티가 작성되었음에도 불구하고, for in문이 실행될 때는 오름차순으로 정렬이 되어 출력이 된 모습을 확인할 수 있습니다.

 

굳이 for문을 그대로 작성하지 않고도 그냥 콘솔에 myObject를 콘솔에 출력만 해봐도

{1: "정수1", 2: "정수2", 3: "정수3", name: "codeit", birthDay: "2017.5.17"}

객체가 정수형 프로퍼티에 한해서 오름차순으로 정렬이 되고 나머지는 추가한 순서대로 정렬이 되는 걸 확인할 수 있습니다.

 

처음에 살펴봤던 것처럼 정수형 프로퍼티에 따옴표를 붙여 문자열처럼 만들더라도, 정렬방식은 동일하게 처리됩니다.

let myObject = {
  '3': '정수3',
  name: 'codeit',
  '1': '정수1',
  birthDay: '2017.5.17',
  '2': '정수2'
};

for (let key in myObject) {
  console.log(key);
}

1
2
3
name
birthDay

자동으로 정렬되는 특성이 장점처럼 느껴질 수도 있지만 대부분의 경우에는 의도치 않은 결과를 가져올 수도 있기 때문에,일반적으로 정수형 프로퍼티는 잘 사용되지 않습니다.

 

불가피한 경우에는 이런 객체의 정렬방식을 잘 이해한 상태에서 사용하고, 가급적 명확한 의미가 있는 프로퍼티 네임을 사용하시는걸 권장해 드립니다.

 

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부터 밀리초 이후를 나타내는 날짜를 설정)

let myDate = new Date(2017, 4, 18, 19, 11, 16);

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

 

똑똑한 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객체를 생성하는 것을 권장드립니다!

 

더 많은 내용을 알고싶다면 아래 링크를 참고해보세요!

Date

 

Related References

코딩이 처음이라면, 코드잇

객체 (컴퓨터 과학) - 위키백과, 우리 모두의 백과사전

RFC 2822 - Internet Message Format

ECMAScript Language Specification - ECMA-262 Edition 5.1

JAVA 프로그래밍

요약 : sparta coding club, 스파르타 코딩, 코드잇, 노마드 코더, 프로그래밍, 직장인 코딩, 내일 배움 카드 코딩, 밀크티 코딩, 초등 코딩, 아이스크림 코딩, 코딩 소프트웨어, 자바 스크립트 국비 지원, 자바 스크립트 교육, 품생품사