[JavaScript] 객체와 프로퍼티

1. 객체(Object)

여러가지 값을 한 번에 저장하고 싶다면 객체를 사용하면 됨. 

'자바스크립트'의 모든 것이 객체다! 

{
userName: '문영',
bornYear: 1993, 
isVeryNice: true, 
worstCourse: null
}

• { } 중괄호로 묶인 것을 객체라고 함.
• 오른쪽 부분을 값(property value), 왼쪽을 값의 이름(Property Key)라고 부름. 
• key + value 한 쌍로 이뤄진 것을 property라고 함. 

property name 주의 사항

: 문자(String), 따옴표를 생략하더라도 자바스크립트가 암묵적으로 스트링이라고 생각. 

1. 첫 번째 글자는 반드시 문자, 밑줄(_), 달러기호($) 중 하나로 시작!
2. 띄어쓰기 금지!
3. 하이픈(-) 금지
4. 불가피하게 위의 규칙을 어길 경우, 따옴표로 감싸줘야 함. 

property 접근법 

let me = {
userName: '문영',
bornYear: 1993, 
isVeryNice: true, 
worstCourse: null
bestCourse: {
	title: 'Java', 
    language: 'English'
    }
};

1. 점 표기법(objectName.propertyName)

console.log(me.bornYear);

console.log(me.bestCourse.title); //객체 안의 객체일 경우

=> 따옴표를 생략할 수 없는 propertyName은 접근할 수 없다는 단점이 있다. 

 

  2. 대괄호 표기법( objectName['propertyName'] )

console.log(me['bornYear'])

console.log(me.bestCourse['title']) //객체 안의 객체일 경우

property수정/추가/삭제

let me = {
userName: '문영',
bornYear: 1993, 
isVeryNice: true, 
worstCourse: null
bestCourse: {
	title: 'Java', 
    language: 'English'
    }
};

// 1. 프로퍼티 값 수정 
me.userName = 'Moon'; 
console.log(me.userName); 

// 2. 프로퍼티 값 추가 
me.hometown = 'Seoul'; 
console.log(me.hometown); 

// 3. 프로퍼티 삭제
delete me.worstCourse; 
console.log(me.worstCourse);

// property 불일치 비교 
console.log('moon' in me); // property 확인, true or false로 값 반환 

// 활용
if('moon' in me){
	console.log(`userName값은 ${me.userName}입니다.`); 
} else {
	console.log(`userName의 프로퍼티는 존재하지 않습니다.`); 
    }

메소드(Method)

 

let greetings = {
	sayHello: function(){
    	console.log('Hello!); 
    }, 
    sayHi: function(){
    	console.log('Hi!');
    },
    sayBye: function(){
    	console.log('Goodbye!');
    }
};

greetings.sayHello();

for..in반복문

 

문법

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

예시

let me = {
userName: '문영',
bornYear: 1993, 
isVeryNice: true, 
worstCourse: null
bestCourse: {
	title: 'Java', 
    language: 'English'
    }
};


// 예시 
for(let key in me){
	console.log(key); 
    console.log(me[key]); 
}

=> 결과: property name이 순서대로 출력

객체의 프로퍼티 네임의 예외사항/ 객체의 정렬방식

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

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

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

// 결과값: 
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!

2. 정수형 프로퍼티 네임

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

 

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

 

 

2. 내장객체(Standard built-in objects)

Date 객체

let myDate = new Date(); 

console.log(myDate); // 이 객체를 생성한 시간이 출력 

new Date(특정한 값); // 특정한 값을 넣어 줄 수 있음. 
new Date(YYYY, MM, DD, hh, mm, ss, ms); // 년도와 월은 필수, 나머지 생략 가능. 월은 0부터 시작 

let myDate = new Date('2017-12-31'); 
let myDate = new Date('2017-12-31T19:11:16');

- getTime() 메서드 

let myDate = new Date(1993, 12, 31, 19, 11, 16); 

console.log(myDate.getTime()); 
//myDate객체가 1970년 1월 1일 00:00:00 UTC부터 몇 밀리초가 지났는지 (Time Stamp)

let myDate = new Date(1993, 12, 31, 19, 11, 16); 
let today = new Date(); 

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

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());

- Date 객체 정보 수정하기

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

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

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();

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

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

- 자동 날짜 수정

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

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

 - 현시점의 타임스탬프

let myDate = new Date();

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

- 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

- 날짜 표현하는 문자열

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');