JavaScript_객체와 프로퍼티

cho·2023년 7월 12일
JavaScriptjs객체

객체

✏️객체 작성법

여러가지 값을 한 번에 저장할 수 있다.

{
name: 'hyunji',
bornYear: 1996,
isVeryNice: true
}

속성(Property)
{Property Name : 'Property Value'}

객체의 Property Name의 자료형은 문자열이지만, 반드시 따옴표로 감싸줘야 할 필요는 없다. 다만

  • 첫번째 글자가 문자, 밑줄, 달러 기호 중 하나로 시작하지 않는 경우
  • 띄어쓰기를 해야하거나
  • 하이픈을 써야 하는 경우
    이 세 가지 경우에는 따옴표로 감싸줘야 한다.

Property Value에는 모든 자료형을 사용할 수 있다.
문자열, 숫자, boolean, null 등을 사용 가능 하며 객체 안에 객체를 또 생성할 수 있다.

✏️객체 표기법 & 접근법

객체를 다루기 위해서는 변수에 할당해주며 이름을 만들어줘야 한다. 객체의 property에 접근하는 방법에는 점 표기법과 대괄호 표기법이 있다.

let cindy = {
name: 'hyunji',
bornYear: 1996,
isVeryNice: true
worstCourse: null,
bestCourse: {
	title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
    }
};

//점 표기법 (objectName.propertyName) : 띄어쓰기를 사용한 property에는 접근 할 수 없다.
console.log(cindy.bornYear);

//대괄호 표기법 (objectName['propertyName']) : 띄어쓰기나 숫자를 사용한 property에도 접근이 가능하며, 여러가지 방법을 사용할 수 있다.
console.log(cindy['born Year']);

//객체 안의 객체에 접근하는 하는 방법
console.log(codeit.bestCourse.title)
or
console.log(codeit.bestCourse['title'])

존재하지 않는 property 값에 접근하려고 하면 undefined 가 출력이 된다.

✏️객체 수정 / 추가 / 삭제법

ex) 

let cindy = {
name: 'hyunji',
bornYear: 1996,
isVeryNice: true
worstCourse: null,
bestCourse: {
	title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
    }
};

cindy.name = '현지'; //수정
cindy.nationallity = 'Korea'; // 추가
delete cindy.isVeryNice; //삭제

✏️존재하지 않는 값을 확인하는 방법

  1. property 값과 불일치 비교 연산자 사용
console.log(cindy.name !== undefined);```
2. in 연산자 ('property Name' in 'object') -> boolean 형태로 값을 나타낸다.
```javascript
console.log('name' in cindy)```

## ✏️객체와 메소드

객체의 property 값에는 함수를 넣을 수도 있는데, 연관성있는 여러 함수들을 묶을 때 Method를 사용한다.

```javascript
let greetings = {
	sayHello: function(){
    	console.log('Hello!')
    },
    sayHi: function(){
    	console.log('Hi!')
    },
    sayBye: function(){
    	console.log('Bye!')
    }
};
greetings.sayHello(); //점 표기법
greetings['sayHello'];//대괄호 표기법

메소드를 만드는 이유는 각 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있다.
ex)

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

✏️for...in

객체 안에 있는 property로 반복적인 동작을 수행할 때 사용한다. 

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

let cindy = {
name: 'hyunji',
bornYear: 1996,
isVeryNice: true
worstCourse: null,
bestCourse: {
	title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
    }
};

for (let k in codeit) {
	console.log(k);
    console.log(codeit[k]); // 객체의 값에도 접근할 수 있다.
}

✏️for...in문 주의사항

객체의 property는 정렬이 되는데,
1. 숫자형(양수) property name
=> 흔한 경우는 아니지만, property name에는 숫자형(양수)을 작성해서 사용할 수도 있다. 이런 예외적인 파라미터 네임을 접근할 때도 대괄호 표기법으로만 접근이 가능하다. 

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!
  1. 정수형 property name
    객체는 정수형 property name을 오름차순으로 먼저 정렬하고, 나머지 property들은 추가한 순서대로 정렬하는 특징이 있다.

정수형 property에 따옴표를 붙여 문자열처럼 만들더라도, 정렬 방식은 동일하게 처리된다. 자동으로 정렬되는 특성이 장점처럼 느껴질 수도 있지만 대부분의 경우에는 의도치 않은 결과를 가져올 수도 있기 때문에, 일반적으로 정수형 property는 잘 사용되지 않는다.

때문에 불가피한 경우에는 이런 객체의 정렬받식을 잘 이해한 상태에서 사용하고, 가급적 명확한 의미가 있는 property name을 사용해야한다.

✏️내장 객체 (Standard built-in objects)_ Date 객체

let myDate = new Date();
console.log(myDate);

는 Thu May 18 2017 00:00:00 GMT+0900 (대한민국 표준시) 라고 출력이 된다. 

new Date(특정한 값);``` 
이렇게 특정한 값을 넣으면 우리가 원하는 날짜를 출력할 수도 있다. 

```javascript
new Date('문자열');```
날짜로 해석이 가능한 문자열을 넣어주면 해당 날짜의 객체를 만들 수 있다. 
ex)
```javascript
let myDate = new Date('2017-05-18'); // new Date('YYYY-MM-DD')

let myDate2 = new Date('2017-05-18T19:11:16); // new Date('YYYY-MM-DDThh:mm:ss')

new Date(YYYY, MM, DD, hh, mm, ss, ms);
연도와 월까지는 필수이며 나머지는 생략 가능하다. 
month의 경우에만 시작 숫자가 0이다. 0월 = 1월

✏️getTime() 메소드

date객체의 기준 시간인 1970년 1월 1일 00:00:00 UTC (Time stamp 라고 부름) 부터 몇 밀리초 지났는지 계산할 수 있다.

Date.getTime()

let myDate = new Date (2017, 4, 18, 19, 11, 16);
console.log(myDate.getTime());

console.log(myDate.getFullYear()) // 연도
console.log(myDate.getMonth()) // 월
console.log(myDate.getDate()) // 일자
console.log(myDate.getDay()) // 요일 (일요일부터 0~6까지)
console.log(myDate.getHours()) // 시간
console.log(myDate.getMinutes()) // 분
console.log(myDate.getSeconds()) // 초
console.log(myDate.getMilliseconds()) // 밀리초

✏️Date 객체 정보 수정하기

  1. set으로 시작하는 다양한 메서드를 활용하면, 생성된 Date 객체의 정보를 수정할 수 있다. 
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() 메소드는 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여준다.

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

  2. Date.now()
    Date.now() 메소드는 이 메소드가 호출된 시점의 타임스탬프를 반환한다. 이렇게 하면 새로운 객체를 만들지 않아도 바로 현 시점의 날짜 값을 얻어낼 수 있다. 특정한 시점이 아니라 단순히 순간순간 그 때 당시 시간 값이 필요한 경우에는 Date.now() 메소드를 활용하는 것이 코드의 가독성 뿐만아니라 성능적인 측면에서도 좀 더 유리하다.

  3. 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

날짜 값을 number 타입으로 변환할 경우, 아무 의미없는 단순한 숫자값이 아니라 getTime() 메소드를 활용한 것과 똑같은 수치의 타임스탬프 값이다. 이것은 다시 말해 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)
profile
cho
이전 포스트

Start Velog

다음 포스트

JavaScript_배열 (array)

0개의 댓글