객체

객체란?

객체는 Key와 Value로 구성된 property와 method를 가질 수 있다.

사실 자바스크립트에서는 모든 것이 객체라고 할 정도로 중요한 개념이다.

각 property는 쉼표로 구분되며, 마지막 property의 쉼표는 없어도 되지만 있는게 코드관리에 용이하다.

객체의 접근, 추가, 삭제 문법은 다음과 같다.

const superman={
  name:'clark',
  age:33,
}
 
//접근
console.log(superman.name)
console.log(superman['age'])
 
//추가
superman.gender='male'
superman['hairColor']='black'
 
//삭제
delete superman.hairColor

단축 property라는것을 사용하면 이미 선언된 변수를 바탕으로 객체를 생성하는데 용이하다.

name='clark'
age=33
 
const superman={
  name,
  age,
  gender : 'male',
}
 
console.log(superman.name)//'clark'을 출력함.

만약 존재하지 않는 property에 접근하려고 하면 에러를 발생시키는게 아니라 undefined를 돌려준다.

만약 객체가 어떤 property를 가지는지 확인하려면 in을 통해 확인할 수 있다.

'name' in superman // true

'length' in superman // false

 

for...in문을 활용하면 객체의 property를 쉽게 탐색할 수 있다.

const superman={
  name : 'GY',
  age : '24',
  gender : 'male',
}
 
for(let i in superman) { //superman의 각 Key를 받으며 반복
  console.log(i)
  console.log(superman[i])
}

 

객체변수 자체를 콘솔창에 찍으면 property를 다 보여준다.

 

함수의 리턴값으로 객체를 생성해서 반환해줄 수 있다.

function makeFootballLover(name,age){
  return {
    name,
    age,
    hobby:'football',
  };
}
 
const Mike=makeFootballLover('Mike',30);
console.log(Mike)

객채의 property로 선언된 함수를 method라고 한다.

const superman={
  name: 'clark',
  age: 33,
  fly: function(){
    console.log('날아갑니다.'),
  }
}
 
const superwonam={
  name: 'sindy',
  age: 34,
  fly(){
    console.log('날아갑니다.'),
  }
}

 

method에서 현재 object의 property에 접근하고 싶으면 this.KEY를 활용하면 된다. 파이썬의 self와 비슷한 느낌?

let boy={
  name:'Mike',
  sayHello:function(){
    console.log(`Hello, I'm ${this.name}`)
  }
}

let girl={
  name:'Jane',
  sayHello:function(){
    console.log(`Hello, I'm ${this.name}`)
  }
}
 
boy.sayHello()
girl.sayHello()
 

**주의

method를 화살표함수로 선언하면 this를 활용할 수 없다. 화살표함수에서 this는 object가 아니라 전역객체를 가리킨다. 브라우저환경에서는 window, NodeJS에서는 global이라고 한다. 어려운 내용이니 완전히 이해하지 못해도 무방한다고 한다. 일단 객체의 method는 화살표함수로 작성하지 않는것이 좋다고만 알고있자.

 

객체와 인스턴스

객체는 인스턴스의 형태로 만들어서 사용해야 한다.

객체가 틀이라면 그 틀로 찍어낸 것이 인스턴스라고 생각하면 된다.

그리고 그 인스턴스에 식별자를 붙여 사용한다.

 

객체의 인스턴스를 만들 때에는 new라는 예약어를 만들어서 사용하면 된다.

예를 들어 현재 날짜와 시간을 표시하는 프로그램을 작성한다고 생각해보자.

자바스크립트에서 날짜나 시간 정보는 Date 객체에 저장하고 관리한다.

그래서 우리는 Date 객체의 인스턴스를 만들고, 그 인스턴스를 변수에 저장해서 사용한다.

var now = new Date();
document.write("현재 시각은 " + now);

 

JS의 내장 객체

자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있다. Array 객체와 Date 객체가 대표적이다.

Array 객체는 왜쓰는거지? 걍 배열문법을 쓰는게 훨씬 편하지 않나?

 

Date 객체

Date 객체는 날짜와 시간 정보를 나타낼 수 있다.

Date 객체는 현재 날짜와 시간을 출력하거나 달력을 표시할 수도 있고, 특정일까지 얼마나 남았는지 알려주는 등 사이트에서 여러 가지로 응용할 수 있다.

 

Date 객체 인스턴스 만들기

일반적인 객체 인스턴스를 만드는 것처럼 만들면 된다.

new Date();

그리고 특정한 날짜를 저장한 Date 객체를 만들고 싶다면 Date 다음에 붙이는 괄호 안에 날짜 정보를 입력한다.

new Date("2020-02-25")

또한 시간 정보까지 Date 객체로 나타내려면 날짜 다음에 대문자 'T' 를 추가한 후 그 뒤에 시간을 입력한다.

new Date("2020-03035T18:00:00")

 

자바스크립트이 날짜, 시간 입력 방식 알아보기

Date 객체를 사용하여 날짜와 시간을 지정하려면 자바스크립트가 인식할 수 있는 날짜와 시간 형식으로 써야 한다.

자바스크립트에서 주로 사용하는 날짜와 시간 입력 방식을 알아보자.

 

1. YYYY-MM-DD형식

다음과 같은 형식이다.

new Date("2020")
new Date("2020-02")
new Date("2020-02-25")

2. YYYY-MM-DDTHH 형식

시간은 날짜 뒤에 'T'를 붙이고 HH:MM:SS의 형태로 사용한다. 맨 끝에 'Z'를 붙이면 UTC(국제 표준시)로 표시된다.

new Data("2020-02-25T18:00:00")
new Data("2020-02-25T18:00:00Z")

 

3. MM/DD/YYYY 형식

연도를 마지막에 나타내고 싶다면 다음과 같이 MM/DD/YYYY 형태로 사용한다.

new Date("02/25/2020"

 

4. 이름 형식

월은 January처럼 전체를 사용하거나 Jan과 같이 줄여서 사용할 수 있다.

다음과 같이 맨 앞에 요일(Mon)을 함께 작성할 수도 있다.

new Date("Mon Jan 20 2020 15:00:41 GMT+0900 (대한민국 표준시)")

 

Date 객체의 메서드

 

Math 객체

Math객체는 수학 계산과 관련된 메서드가 많이 포함되어있다.

 

Math 객체의 프로퍼티

자주 사용하는 값들이다

종류	설명
E	오일러상수
PI	원주율
SQRT2	루트2
SQRT1_2	루트2분의 1
LN2	로그 e의 2
LN10	로그 e의 10
LOG2E	로그 2의 e
LOG10E	로그 10의 e

 

Math 객체의 메서드