Object
{ key : value , <------ property 속성
key : value ,
key : value , }
key = property name, stirng(문자열)
value = property value , 모든 자료형(문자열, 숫자, 불린, null, 객체안에 객체도 가능)
> property name 주의사항
1. 첫 글자는 반드시 문자, 밑줄(_), 달러$중 하나로 시작
2. 띄어쓰기 금지
3. 하이픈(-) 금지
> 쓰고싶으면 ' ' 따옴표로 감싸줌 ( 'brand name' , 'born-Year' )
> 객체에서 property 값 접근
//객체 (Object)
let Object = {
name : '객체',
language : 'javascript',
'born Year' : 2021,
cats : '냥이'
33 : '숫자'
}
let name = 'cats'
*/ 점 표기법 Dot Notation */
console.log(Object.name) //객체 (key의 name을 인식)
*/ 대괄호 표기법 Bracket notation */
console.log(Object['born Year']) //2021
console.log(Object[name]) //출력> 냥이 (변수name을 인식)
console.log(Object['33']) // 숫자는 무조건 대괄호만 가능
> 점표기법은 따옴표 생략할수 없는 프로퍼티 네임 불가. (born Year띄어쓰기 있어서 점으로 접근불가)
> 존재하지않는 key 접근하려고하면 에러나는게 아니라 undefined값 출력
> 괄호표기법은 변수로 먼저 인식 / 점표기법은 변수를 사용할 수 없음(key를 인식)
// objData 라는 객체안에 name , address , books 라는 property
let objData = {
name: 50,
address: {
email: "gaebal@gmail.com",
home: "위워크 선릉2호점"
},
books: {
year: [2019, 2018, 2006],
info: [{
name: "JS Guide",
price: 9000
}, {
name: "HTML Guide",
price: 19000,
author: "Kim, gae bal"
}]
}
};
/* HTML Guide 접근원할 때 > let bookName = objData.books.info[1].name;
console.log(bookName); */
//객체 프로퍼티에 함수
let ray = {
name: 'Ray',
price: 2000000,
getName: function() {
return this.name;
},
getPrice: function() {
return this.price;
},
applyDiscount: function(discount) {
return this.price * discount;
}
}
//getprice 함수 호출
const rayPriceByFunction = ray.getPrice();
console.log('함수로 접근 => ' +rayPriceByFunction);
This
> 객체 내부에서 해당 객체의 프로퍼티 접근
> 기본값은 window
> allow function 에서 this사용하면 window나옴
//this
function getName () {
return `${user.firstName} ${user.lastName}`;
}
const user = {
firstName : 'kim',
lastName : 'manon',
getName : getName,
};
const admin = {
firstName : 'hong',
lastName : 'kildong',
getName : getName,
};
console.log(user.getName()); //kim manon
console.log(admin.getName()); //kim manon
//this로 수정
function getName () {
return `${this.firstName} ${this.lastName}`;
}
console.log(user.getName()); //kim manon
console.log(admin.getName()); //hong kildong
인스턴스 (instance) > class통해 생성된 객체
const morning = new Car('Morning', 2000000);
class는 새로운 instance를 생성할 때마다 constructor() 메서드를 호출
class Car {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
> Car 클래스의 새로운 instance를 생성하려면 new 키워드가 필요
new 키워드는 constructor() 메서드를 호출하고 새로운 instance를 return
객체 값 수정
console.log ( Object.name); ---------'객체' 기존
Object.name = '이름'
console.log ( Object.name); ---------'이름' 변경
객체 값 추가
console.log ( Object.ceo); ---------'undefined' 기존
Object.ceo = 'manon'
console.log ( Object.ceo); ---------'manon' 추가
객체 값 삭제
console.log ( Object.ceo); ---------'manon' 기존
delete Object.ceo ;
console.log ( Object.ceo); ---------'undefined' 변경
객체 값 확인
console.log ( 'ceo' in Object);
console.log ( '찾을값' in 객체명);
>불린 형태로 값 리턴 (true or false)
> console창에서 객체이름 Object 입력하면 객체 확인가능
Method 메소드
: 객체에 저장된 값이 함수인 것.
객체의 프로퍼티는 어떤 자료형이든 저장가능하므로 프로퍼티 값으로 함수넣어줌.
> 이런함수를 객체의 메소드라고 부름
//greetings라는 객체의 세 가지 메소드 정의
let greetings = {
sayHello : function (name) {
console.log(`hello ${name}`);
},
sayHi : function() {
console.log('Hi');
}
};
greetings.sayHello('manon');
//출력
hello manon
> 함수이름은 생략, 프로퍼티 네임이 대신함.
메소드 사용 이유?
*/
그냥 함수가 아닌 메소드 사용이유?
> 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있음.
/*
let rectAagle = {
width: 30,
height: 50;
getArea : function () {
return rectAagle.width * rectAagle.height;
}
}
let triAngle = {
width: 15,
height: 40;
getArea : function () {
return triAngle.width * triAngle.height /2;
}
}
> 어떤 객체의 고유한 동작으로서 함수에 의미를 부여할 수 있음.
위의 예시에서 삼각형, 사각형 서로 넓이 구하는 방식다름, 똑같이 넓이 구하는 getArea함수지만
어떤 객체의 메소드인지따라서 그 객체에 맞는 동작을 할 때 메소드 사용.
다른 함수의 이름 중복을 피할 수도있고, 좀 더 이 객체에 집중해서 함수의 동작부분 작성가능.
사용 시 이 객체의 고유한 동작으로 구분가능
// math class 생성하여 num1, num2로 매서드 생성
class MyMath {
constructor(num1, num2) {
this.num1 = num1;
this.num2 = num2;
}
getNumber(num1,num2) {
return [this.num1, this.num2];
}
add (num1,num2) {
return this.num1 + this.num2;
}
}
for...in 반복문
for ( 변수 in 객체) {
동작부분
}
//예시
let Object = {
name : '객체',
language : 'javascript',
'born Year' : 2021
}
for (let k in Object) {
console.log(k);
console.log(Object[k]);
}
//출력
name
객체
language
javascript
born Year
2021
날짜 / 시간 객체
Date 생성자
: 컴퓨터 언어에서는 GMT기준(Greenwich Mean Time)으로 시간 알려줌
GMT+0900 (한국 표준시)
let rightNow = new Date();
console.log(rightNow);
let year = rightNow.getFullYear(); //yyyy년
let month = rightNow.getMonth()+1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
> getTime 메서드
: 날짜의 밀리초 표현을 반환
반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단( 값 작으면 과거)
let rightNow = new Date();
let time = rightNow.getTime();
'ARCHIVE > JavaScript' 카테고리의 다른 글
[JS] Event ( addEventListener ) (0) | 2021.08.24 |
---|---|
[JS] DOM (0) | 2021.08.15 |
[JS] 함수 ( function ) (0) | 2021.08.10 |
[JS] array 배열 (0) | 2021.08.05 |
[JS] 조건문 / 반복문 (0) | 2021.08.04 |