[코드잇 스프린트 3기] Pre-course - 객체

Pre-course는 아무래도 기초라서 따로 벨로그에 정리를 안해도 되겠다고 생각했는데, 듣다보니 정리하고 싶은 부분이 있어서 정리한다!

자바스크립트 기초 - 객체(Object)

객체는 {}안에 값을 저장함.

{
  myName: '이유연',
  bornYear: 1999,
  isVeryNice: true,
  worstThing: null
}

위와 같이 값 하나하나를 속성(property)라고 하고 Key값은 Property Name, value값은 Property Value라고 부름.

Property Name의 경우 일반적으로 문자열임. 근데 ''생략해도 JS에서 알아서 문자열로 취급함. 이렇게 따옴표 없이 할 경우는 첫 글자는 문자,언더바(_),달러기호($)로 시작해야하고, 띄어쓰기 금지, 하이픈(-) 금지임.

Property Value는 모든 자료형을 값으로 가질 수 있음

typeof 연산자를 이용해 출력하면 object 라는 자료형이 나오게됨!

객체 사용

변수에 객체를 할당해줬을 경우 객체의 프로퍼티에 접근하려고 하면 아래와 같이 사용하면 됨

let codeit = {
  name: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language:: 'Javascript'
  }
};

// 점 표기법 사용 ( objectName.propertyName)
console.log(codeit.bornYear);

만약 띄어쓰기가 있거나 한 경우 점 표기법 대신 대괄호법을 이용

console.log(codeit['born Year'];

객체안의 객체 또한 마찬가지로 접근 가능

주의) 존재하지 않는 프로퍼티에 접근하려고하면 error가 아니라 undefined가 출력됨

객체 수정, 추가, 삭제

객체 수정하거나 생성하려면 아래와 같이 점표기법이나 대괄호법을 이용해 재할당 해주면 됨

console.log(codeit.name); // '코드잇'
codeit.name = 'codeit';
console.log(codeit.name); // 'codeit'

console.log(codeit.ceo); // undefined
codeit.name = '강영훈';
console.log(codeit.ceo); // '강영훈'

객체를 삭제하기 위해서는 delete 객체 프로퍼티 하면 됨

console.log(codeit.worstCourse); // null
delete codeit.worstCourse;
console.log(codeit.worstCourse); // undefined

만약 프로퍼티가 객체에 존재하는지 알고 싶다면, undefined인지 비교연산자를 통해 알아내거나, '프로퍼티이름' in object 를 이용할 수 도 있음

console.log(codeit.name !== undefined); // true
console.log('name' in codeit); // true

이 때, 만약 프로퍼티 밸류가 undefined일 경우 (undefined 할당은 적절치 않지만, 실수로 할당한다거나 다른 변수나 함수에 의해 될 경우가 있음) 아래와 같이 확인해보면

codeit.worseCourse = undefined;
console.log(codeit.worseCourse !== undefined); // false
console.log('worseCourse' in codeit); // true

안전하게 확인하기 위해 in을 사용하는게 나음

key와 value확인 시 파이썬과 다른점 !

Object.keys(objectName) - JS
objectName.keys() - python

객체와 메소드

객체의 프로퍼티는 어떤 자료형이든 넣을 수 있기 때문에 함수도 가능함

아래와 같이 작성하면 됨

// 메소드 (method)
let greetings = {
  sayHello: function() {
    console.log('Hello!');
  },
  sayHi: function() {
    console.log('Hi!');
  },
  sayBye: function() {
    console.log('Bye!');
  }
};

greetings.sayHello();

function뒤에 함수 이름의 경우 객체의 프로퍼티 네임이 대신해주고 있기 때문에 생략가능

console.log또한 console이라는 객체에 log라는 함수를 쓰는 것임



이렇게 객체를 이용해서 메서드를 굳이 만드는 이유는
어떤 객체에 메서드인지에 따라 다른경우, 객체에 맞는 동작을 하기 위해, 또 이름중복을 피하기 위해, 구분이 편하게 하기 위해 등 여러가지가 있음.

예를 들어 넓이를 구하는 같은 동작의 함수더라도 사각형과 삼각형 넓이는 동작이 다르므로 이름은 둘 다 getArea 라도 삼각형객체의 메서드는 widthheight/2 라는 동작을 하고 사각형 객체의 메서드는 widthheight라는 동작을 할 수 있으면
삼각형.getArea와 사각형.getArea가 명확하게 구분될 것!

주의) 함수 매개변수로 key값을 이용할 때, 아래와 같이 대괄호법을 이용해야함.

let myVoca = {
  // 코드를 작성해 주세요.
  addVoca: function (key, value) {
    myVoca[key] = value;
  },
};

만약 점표기법으로 myVoca.key라고 하면 매개변수 key가 아니라 말그대로 문자열 'key'라는 프로퍼티 네임을 가진 프로퍼티 값을 찾게 됨.

객체를 다루는 반복문 For in

for (변수선언 in 객체)과 같이 사용함

let codeit = {
  name: '코드잇',
  bornYear: 2017,
  isVeryNice: true,
  worstCourse: null,
  bestCourse: '자바스크립트 프로그래밍 기초'
};

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

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

흔한 경우는 아니지만, 사실 프로퍼티 네임에는 숫자형(양수)을 작성해서 사용할 수도 있음

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

하지만 실제로 사용될 경우 문자열로 형변환되어 사용됨

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

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

그리고 이렇게 예외적인 파라미터 네임은 접근할 때도 대괄호표기법으로만 접근가능

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

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

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

마찬가지로 정수형 프로퍼티에 따옴표를 붙여 문자열처럼 만들더라도, 정렬방식은 동일하게 처리됨

그래서 가급적 명확한 의미가 있는 프로퍼티 네임을 써야함!

내장 객체 (Standard built-in objects)

console.log 함수처럼 자바스크립트가 원래 내장하고 있는 객체가 있음. 그 중 하나인 Date 날짜 객체에 대해 알아보면

- Date 객체

new라는 키워드로 생성함. 소괄호안에 아무것도 입력 안하면 현재날짜와 시각 알려줌

let today = new Date();
console.log(today); // 2023-10-25T15:15:22.477Z

방법 1 - 기준날로 부터 n밀리초 후 날짜 객체 생성

let myDate = new Date(n);

이 때 괄호안에는 1970년 1월 1일 00:00:00 UTC에 n밀리초만큼 지난 객체가 만들어짐
n = 1000 인 경우 1초가 지난 날짜가 만들어 지는 것

방법 2 - 형식에 맞는 문자열 넣어서 날짜 객체 생성

하지만 밀리초 단위는 너무 작고 기준날짜도 너무 예전이라서 숫자를 넣기보다는 보통 문자열을 넣어서 해당 날짜의 객체를 만듦

// new Date('YYYY-MM-DD')
let myDate = new Date('2023-10-25'); // 2023-10-25T00:00:00.000Z

// new Date('YYYY-MM-DDThh:mm:ss')
let myDate = new Date('2023-10-25T23:40:40');  // 2023-10-25T23:40:40.000Z

방법 3 - 연도, 월, 일, 시, 분, 초, 밀리초 순으로 하나씩 전달

연도와 월은 필수 나머지는 옵션(기본값 1일 0시0분0초0밀리초), 주의할 점은 month가 0부터 시작임 (4넣으면 5월됨)

let myDate = new Date(2023, 9, 25, 23, 40, 40);   // 2023-10-25T23:40:40.000Z

- getTime 메소드

필요한 값만 따로 가져오는 등 값을 가져오기 위해 사용

// Date.getTime()
let myDate = new Date(2023, 9, 25, 23, 40, 40);
console.log(myDate.getTime());  // 1698277240000;

'myDate객체가 기준일(1970년 1월 1일 00:00:00 UTC)로부터 몇 밀리초 지났는지 정수값'은 타임스탬프(Time Stamp)라고 부르는데 getTime()메서드를 사용하면 위와 같이 타임스탬프 값을 알려줌

- 날짜나 시간 중 특정 값을 가져오는 메소드 : get

let myDate = new Date(2023, 9, 25, 23, 40, 40); 라면

• getFullYear() : 2023
• getMonth() : 9
• getDate() : 25 // 날짜
• getDay() : 4 // 요일(0이 일요일)
• getHours() : 23
• getMinutes() : 40
• getSeconds() : 40
• getMilliseconds() : 0

이런 Date객체에는 다양한 메소드들이 있고 이를 이용해 D-day 계산과 같은 기능 구현 가능

- Date 객체 정보 수정하기 : set

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

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

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

- 간단하게 시간 정보 알아내기 : toLocal

간단하게 시간 정보를 표현하고 싶다면 toLocaleDateString(), toLocaleTimeString(), toLocaleString()와 같은 메소드 사용 가능

let myDate = new Date();

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

이 메서드들은 사용자의 브라우저에 설정된 국가의 표기에 맞춰 날짜와 시간을 보여줌

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

새로운 객체를 만들지 않아도 바로 현 시점의 날짜 값을 얻을 수 있는 now()메서드

let myDate = new Date();

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

그냥 Date.now()한 것과 new Date()로 객체 생성해서 getTime으로 구한 현 시점의 값과 동일한 것을 알 수 있음 => 메모리 이득

- Date객체의 형변환

Date객체는 typeof메서드로 자료형을 확인해보면 object 객체임을 알 수 있음. 이 때 0은 boolean타입으로 false, 1은 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

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객체를 생성하는 것이 권장됨