wecode 3일차 TIL🤩

날짜와 시간

우리는 어떻게 날짜와 시간을 다룰 수 있을까? 친절하게도 우리에게는 날짜 객체가 있다.
날짜 객체를 호출하면 시간과 날짜를 얻을 수 있다.

var rightNow = new Date();
console.log(rightNow)

콘솔 로그
Fri Jan 31 2020 10:28:58 GMT+0900 (한국 표준시)

브라우저마자 시간을 표현하는 방식은 모두 다르다.
하지만 보통 이 데이터 그대로 사용하기 보다는 가공을 해서 사용한다,

GMT
Greenwich Mean Time

이 사진을 보면 GMT 라고 나오는 부분이 있는데 이것은 GMT를 기준으로 얼마나 시간이 빠른지를 표현해주는 것이다.

이렇게 new Date() 로 얻어온 값을 Date 객체가 가지고 있는 다른 함수로각 날짜, 시간 등의 값을 가져올 수 있다.

let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth() +1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();

각 값들을 콘솔로그에 쳐보면

2020
1
31
5
38
10

여기서 주의할 점은
1. getMonth() + 1
만약, 지금이 1월이라면 getMonth() 자체의 값은 0이다.
왜냐하면 첫번째 달이고 index 상으로는 첫번째는 0이기 때문이다.
따라서 +1을 해주어야 한다.

우리는 이미 rightNow를 정의했기 때문에 이 값은 정의한 그 시간 자체를 가지고 있다. 즉, 매 초 시간마다 흐르는 시간을 담고 있는 것이 아니다.

getTime

let rightNow = new Date();
let time = rightNow.getTime();

getTime 메소드는 날짜의 밀리 초를 반환한다.

위의 것을 실행해보면,
1580435042650
이러한 숫자가 반환되는데, 이것은 지금의 시간이 밀리초로 표현된 것이다.
이 밀리초의 기준이 되는 것은 1970년 1월 1일이다.
그래서 저 밀리초의 의미는 저 1970년 1월 1일부터 1580435042650 초가 지났다는 의미이다.

초는 계속 흐르기 때문에, 만약 지금 다시 저 함수를 실행해서 값을 받아보면 위의 값보다 더 큰 값이 나온다.

즉 현재의 값 > 과거의 값

특정 날짜의 Date
우리가 현재 시간을 받을 때 new Date()를 하였다. 이때 매개변수를 비워놓지 않고 특정한 날짜를 매개변수로 넣으면, 해당 날짜의 Date를 반환 받을 수 있습니다.

let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
let date3 = new Date(2019, 5, 1);
//결과값
2019-12-16T18:24:00.000Z
2019-12-16T18:24:00.000Z
2019-05-31T15:00:00.000Z

Quiz
만나이 계산하기

function getWesternAge(birthday) {
  let birthDay = new Date(birthday) // 생일 날의 Date 얻기
  let birthYear = birthDay.getFullYear();
  let birthMonth = birthDay.getMonth()+1;
  let birthDate = birthDay.getDate();

  let birthMonthDate = (birthMonth+"") + (birthDate+"")  
  
  let today = new Date();
  let todayYear = today.getFullYear();
  let todayMonth = today.getMonth()+1;
  let todayDate = today.getDate();
  
  let todayMonthDate = (todayMonth+"") + (todayDate+"")  
  
  if( Number(birthMonthDate) > Number(todayMonthDate)){
    return todayYear - birthYear-1;
  } else {
    return todayYear - birthYear;
  }
}

Number

Number 숫자 메소드
여러가지 수학 계산에 대한 메소드
https://www.w3schools.com/js/js_math.asp

절대값 구하기, sin, cos, 제곱근 등등 Math 객체에는 수학 계산에 대한 메소드가 많이 있습니다. 그 중에서 몇가지만 살펴봅시다

Round 반올림 함수
Math.round()

console.log(Math.round(2.5)) // 3
우리가 사람들에게 숫자 데이터, 예를 들면 평점과 같은 숫자를 받고 그에 대한 평균값을 구한다면 그 결과는 소수점으로 나오게 될 것이다.
이러한 소수점 결과를 깔끔하고 보기 쉽게 만들기 위해서 우리는 반올림, 올림,내림과 같은 함수를사용하게 된다.

Ceil 올림 함수
Math.ceil()
console.log(Math.ceil(2.3)) // 3
ceil은 천장을 의미하므로 천장까지 올린다고 연상하면 될 것 같습니다.

Floor 내림 함수
Math.floor()
console.log(Math.floor(2.9)) // 2

floor은 바닥을 의미하므로, 바닥까지 끌어내린다고 연상하면 되겠죠?

유용한 Number 함수! 랜덤 함수

Random
자바스크립트에는 랜덤한 숫자를 만들어주는 랜덤 함수가 있습니다.

var randomNumber = Math.random()
console.log(randomNumber);

// 0.7399028302061925

이때 나오는 결과는 0.0000000000000000에서 0.9999999999999999 의 값
즉 0에서 1미만의 값을 보여줍니다.
이러한 결과에 내가 원하는 범위로 곱하면 우리가 생각하는 랜덤한 숫자를 얻을 수 있습니다.

만약 한자리 숫자를 얻고 싶다면?

var randomNumber = Math.random();
console.log(Math.floor(randomNumber*10));
// ex) 9.697009826327621

이렇게 나온 랜덤한 값에서 내가 얻고 싶은 9만 취하고 나머지는 내림함수로 버리고, 9만 남기는 것입니다. 이런 방식을 통해서 우리는 로또를 추첨하거나 이벤트 당첨자를 구하는 등의 랜덤한 결과를 얻을 수 있습니다. 참 유용하죠?

Quiz
최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현해봅시다.

function getRandom(min, max){
    return Math.floor((Math.random() * (max - min + 1)) + min);
}

1. 왜 max - min + 1 인가?
   우리가 만약 3부터 10까지의 랜덤한 숫자를 얻고 싶다면?
   여기서 질문, 3부터 10까지는 숫자가 몇 개 있을까?
   3, 4, 5, 6, 7, 8, 9, 10 총 8개의 숫자가 있다.
   이걸 다 써보지 않아도 구할 수 있는 방법이 없을까요?
   10 - 3 = 7
   7 + 1 = 8 ( 찾았네요! )
   최대값에서 최소값을 빼고, + 1 을 더하면 몇 개인지 구할 수 있는 것입니다.
   그래서 max - min + 1을 해줍니다.

2. Math.random() (max - min + 1)
   0.0000000000000000에서 0.9999999999999999 의 값에, 8을 곱한다고 하면?
   0._ ~ 7._ 의 랜덤한 값이 나오게 됩니다.
   1 8은 8이지만, Math.random()으로 나오게 될 값은 1을 절대 넘지 않을 것입니다.
   그런데 우리가 구하고 싶은 값은 0부터 7까지의 값이 아니죠, 3부터 10까지의 값입니다.
   감이 오시나요? 맞습니다. 0 ~ 7 그리고 3 ~ 10.
   뭔가 더하고 싶은 마음이 들죠?

3. Math.random() * (max - min + 1) + min
   우리는 3에서 10까지의 값을 구하고 싶은 것이므로
   0._ ~ 7._ + 3을 해주면, 3.___ ~ 10.___ 의 값이 나오게 되는 것이죠.

4. Math.floor((Math.random() * (max - min + 1)) + min);
   깔끔한 정수를 얻기 위해서 나머지 소수점을 버려야 합니다.
   그래서 Math.floor로 이 결과를 감싸줍니다.

object

만약 우리가 이러한 정보를 자바스크립트를 통해서 구현하려고한다면, 어떻게 해야할까.

let plan1Name = "Basic";
let plan1Price = 3.99;
let plan1Space = 100;
let plan1Data = 1000;
let plan1Pages = 10;
let plan2Name = "Professional";
let plan2Price = 5.99;
let plan2Space = 500;
let plan2Data = 5000;
let plan2Pages = 50;
let plan3Name = "Ultimate";
let plan3Price = 9.99;
let plan3Space = 2000;
let plan3Data = 20000;
let plan3Pages = 500;

이런 식으로 하나씩 하나씩 하드코딩을 해야 할까....? 만약 이러한 데이터가 백만개라면? 그중에서 내가 원하는 정보를 하나씩 뽑아와야 한다면? 얼마나 복잡할지 상상이 조차하고 싶지 않네요. 이러한 복잡한 데이터, 값들을 효율적으로 관리할 수 있는 것이 바로 object입니다.
위의 데이터를 object 식으로 다시 표현 해보면,

우리에게는 지금 plan 1, plan 2, plan 3라는 오브젝트가 있다. 이 오브젝트에는 name, price, space, transfer, pages 라는 property가 있습니다. plan 1의 name, plan 1의 가격 등등 이러한 각 프로퍼티에 들어가는 내용이 값(value) 입니다.

그러면, 이러한 객체는 어떤 식으로 선언해야 할까요?

객체는 기본적으로 {} 중괄호로 감싸져 있습니다.
만약 빈 객체라고 하면
var newObject = {}가 되겠죠?
그 안에는 클론 : 으로 구분된 이름(propertyName) , 값 PropertyValue이 들어갑니다.
그리고 목록은 , 쉼표로 구분합니다.

var student1 = {
  name : "carmin",
  hobby : "exercise",
  age : 20,
  favoriteAnimal: "dog"
}

객체를 만들때 주의 해야하는 것들이 있습니다.
-property 이름은 중복이 될 수 없습니다.
-property 이름과 property 값 사이에는 꼭 : 클론이 있어야 한다.
-property를 추가할 때는 ,(쉽표)가 있어야 한다.
-property 값에는 그 어떠한 type( string, number, array, object, funcrtion, etc)
도 가능하다.

그렇다면, 각 객체의 property값에 접근 하기 위해서는 어떻게 해야할까요?

방법은 두가지입니다.

student1가 가장 좋아하는 동물을 알고 싶다면?

student1.favoriteAnimal

student1의 이름이 궁금하다면?

student1["name"]

여기서 포인트는
두번째 방법에서 [] 사이에 프로퍼티 name을 넣을 때는 반드시 "" 쌍따옴표로 감싼서 넣어야 한다는 것입니다.

Scope

Scope
영어 사전에 scope의 의미를 검색해보면 '범위'라는 뜻이 나옵니다.
scope란 변수가 쓰일 수 있는 범위를 의미합니다.

어떤 변수는 특정한 범위에서만 쓰일 수 있고, 어떤 범위는 그 어느 곳에서도 다 쓸 수 있습니다.

Block
block이란 {} 으로 감싸진 부분을 의미합니다.
우리가 쓰는 function, if, for문의 내부에 있는 것들 모두 하나의 block 입니다.

만약, 변수가 block {} 안에서 정의 되었다면, 그 변수는 오로지 그 {} 내부 안에서만 사용할 수 있습니다.
이렇게 블록 {} 안에서 정의된 변수를 local(지역) 변수라고 합니다.

function sayHi(){
  let greeting = "hello"
  return greeting;
}

console.log(greeting) // 자바스크립트 에러!

만약 콘솔창에 쳐본다면 VM619:1 Uncaught ReferenceError: greeting is not defined at <anonymous>:1:13 이러한 에러 메세지를 볼 수 있을 것입니다. greeting이 정의 되어 있지 않다고 하네요. 왜냐하면, greeting 이라는 변수는 sayHi라는 지역 스코프 안에서만 쓸 수 있기 때문입니다.

Global Scope

앞에서 block 이라는 공간이 있다고 했죠. 그렇다면, 그 나머지 공간은 어디일까요? 바로 Global scope 전역 스코프입니다.
전역 스코프는 코드 어디에서도 접근할 수 있는 범위 입니다.

Global variable
전역변수는 이러한 전역 스코프에서 만들어진, 정의된 변수 입니다.

let greeting = "hello"
function sayHi(){
  console.log(greeting)
  return greeting;
}

console.log(sayHi());

// hello
// hello

greeting은 블록 밖의 전역 스코프에서 선언된 전역 변수 이기 때문에 sayHi() 함수 안에서도 실행되었습니다.

Scope의 오염

글로벌 스코프와 로컬 스코프를 잘 구분해서 써야 합니다.

글로벌 변수를 선언하면, 그 변수는 함수의 그 어느 곳에서도 사용할 수 있습니다. 이것을 globalnamespace라고 합니다.

namespace가 뭐야? 라는 생각이 드실 수 있습니다. namespace는 변수 이름을 사용할 수 있는 범위를 말합니다.
이것을 scope라고도 하고, 변수이름을 이야기 할때는 namespace라고도 합니다.

global변수는 프로그램이 종료되는 시점까지 계속 어디서든 쓸 수 있습니다. 반면에 {} 스코프 안에서 생성된 local 변수는 block이 끝나면 쓸 수 없습니다.

만약, global 변수가 계속해서 존재해서 그 값이 계속해서 바뀐다면 나중에 혼란이 오거나 데이터가 계속해서 바뀌는 경우가 생길 수도 있습니다. 예시를 보겠습니다.

const music = "BTS"  // 값이 변하지 않는 const
const pop = "halsey" // const 사용
let award = "grammy" // 값이 변하는 let을 사용

const theStage = () => {
  award = "BMA";

return "Special Stage :" + music + 'feat' + pop + "in" + award; 

console.log(theStage());
console.log(award)

//Special Stage :BTSfeathalseyinBMA
//BMA

위의 예시를 보면 award는 전역 스코프에서 만들어진 전역 변수입니다. 하지만 let으로 선언이 되어서 값이 바뀔 수 있습니다.
아니나 다를까, theStage라는 함수에서 award의 값을 할당했고 그 결과 award라는 전역 변수의 값이 "grammy" 에서 "BMA"로 바뀌었습니다.

이러한 scope의 오염을 막기 위해서는 global 변수를 사용하는 것을 최소화 하고 최대한 명확한 블록 안에서 let, const를 사용하고 변수를 새롭게 ( 겹치지 않게 ) 만들어 내는 것이 좋습니다.

좋은 Scoping 습관을 기릅시다!!

function whatIs(type) {
let description;

switch (type) {
  case 'scope':
    description = '변수가 선언되고 쓰일 수 있는 범위';
    break;
  case 'block':
    description = ' {},중괄호로 감싸진것. ex)function, if문, for문';
    break;
  case 'global scope':
    description = '전역. block 의 바깥 부분. 어느 곳에서도 접근 가능';
     break;
  case 'global variable':
    description = '전역 스코프에서 선언된 변수';
     break;
  case 'block scope':
    description = 'block 안에 있는 부분';
     break;
  case 'local variable':
    description = 'block 안에서 선언된 변수. 블록에서만 사용 가능';
    break;
  case 'global namespace':
    description = '어느 곳에서도 사용할 수 있는 전역 변수의 이름';
    break;
  case 'scope pollution':
    description = '변수이름, 변수의 범위가 혼용되어 있는 상황';
    break;
  default :
    description = ''
    break;
}

return description;
}

class

클래스는 객체지향 프로그래밍의 핵심입니다. 그렇다면 객체지향 프로그래밍은 무엇일까요?
프로그램을 객체들로 구성하고, 그 객체들 간에 서로 상호작용 하도록 작성하는 방법이라고 합니다. 이러한 객체지향 프로그래밍에 있어서 class, 객체, 객체 지향은 중요한 주제입니다.

그럼 도대체 객체 지향이란 무엇인가?
우선 객체란, 영어로 object , 의미는 사물이라는 뜻입니다.
그런데 여기서 우리가 알고 있는 객체가 있죠. 앞에서 { name = "carmin"} 과 같은 데이터 타입이 있습니다.
그 객체와 이 객체는 조금 다른데요, 여기서의 객체는 틀정한 로직을 가지고 있는 행동(method)와 변경 가능한 상태 ( 멤버 변수 ) 를 가지고 있는 것입니다.
우리가 원하는 구조의 틀을 짜놓고, 비슷한 모양의 객체를 쉽게 만들어 낼 수 있습니다.
만약, 우리가 'bmw' 라는 차를 객체로 정의해본다고 합시다.
이 bmw라는 객체는, 5개의 프로퍼티를 가지고 있습니다.
name, price, getName, getPrice, applyDiscount

let bmw = {
  name : "bmw"
  price : 4000,
  getName : function(){
   return this.name;
  },
  getPrice: function(){ // 이렇게 객체의 값에 함수를 할당하는 것도 가능합니다.
   return this.price;
  },
  applyDiscount : function(discount){
   return this.price * discount;
  }
}

}

이 객체에서 getPrice 함수를 호출해보겠습니다.

const bmwPriceByFunction = bmw.getPrice(); /// 4000

이렇게 객체의 내부 안에서 해당 객체의 프퍼티를 접근하려면 this라는 키워드를 사용해야 합니다.

그렇기 때문에 getPrice 값 함수에서, this(bmw)의 price 키에 접근할 수 있었고 그 값을 구해올 수 있었던 것입니다.

만약 우리가 bmw 뿐만 아니라 람보르기니, 소나타, sm시리즈 등 수 많은 차들의 데이터를 만들어야 한다면 매번 위에서 한 것처럼 객체를 만들어야 할까요? 아닙니다.

필요한 정보를 담고 있는 class 클래스를 생성해서 이러한 객체들을 만들어 낼 수 있습니다.

생성자 (Constructor)

class클래스는, 이러한 객체의 설계도입니다.
그리고 object와 class의 가장 큰 차이는, constructor 이라는 생성자 함수의 유무입니다.
만약, class, constructor을 이용해서 우리가 원하는 car 이라는 class를 만들었습니다.

class Car {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

이러한 class로 새로운 객체를 만들어봅시다.
const sonata = new Car("sonata', 2000)
이렇게 만들어진 새로운 객체를 인스턴스 instance라고 말하며, 이렇게 인스턴스가 생성될 때마다 constructor() 메소드를 호출합니다.

위에서 보면 constructor 메소드 안에 차 이름과 가격의 값이 인자로 들어가서 작용된 것이죠.

-class의 이름은 항상 대문자로 시작해야 하며 CarmelCase로 작성해야 합니다.
-Car class의 instance를 생성할 때 마다 constructor메소드가 호출됩니다.
-constructor()메소드는 인자를 받습니다. 위에서는 name, price가 인자였습니다.
-이 메소드 안에서 this 라는 키워드를 사용했습니다. class의 실행범위에서 this는 해당 instance를 의미합니다.
-constructor()에서 인자로 넘어노는 값으로 car instance의 name, price 프로퍼티에 값을 할당했습니다.
-이렇게, 클래스 내에서 name, price와 같이 변경가능한 상태 값이자, class내의 컨텍스트 어느 곳에서도 사용할 수 있는 변수를 '멤버 변수'라고 합니다.
이러한 멤버 변수는 this 키워드로 접근합니다.
this.name
this.price가 바로 그 멤버 변수입니다.'

Instance
갑자기 무슨 인스턴스? 인스턴트 햄버거 아니야? 죄송합니다.
위에서 우리는 class instance를 생성해 보았습니다.
const sonata = new Car("sonata', 2000) 이렇게요!
이렇게 class를 통해서 생성된 것을 바로 Instance라고 합니다.
Instance는 class의 프로퍼티 이름과 method를 갖고 있는 객체입니다.
인스턴트는 그 마다 모두 다른 property 값을 가지고 있습니다.

bmw는 가격이 4000 이었지만 sonata는 2000 이었죠?

인스턴트를 만드는 법
-class이름에 new를 붙여서 생성합니다.
우리는 car 이라는 class 앞에 new 를 썼고,
그 뒤에 constructor에서 필요한 정보를 인자로 넘겼습니다. 물론 그 인자는 () 괄호 안에 들어갔죠.
-new키워드는, Car 이라는 클래스에 새로운 instance를 생성할때 필요한 키워드입니다. 이 키워드를 통해서 우리는 constructor() 메소드를 호출하고 새로운 instance를 리턴해주는 것입니다.
그래서 우리는 이렇게 만들어진 새로운 instance를 새로운 변수에 저장했습니다.

Method
메소드는 함수입니다. 그런데 객체가 프로퍼티 값을 가지고 있는 것을 메소드라고 합니다.
이해가 잘 안갈 수도 있습니다.

Class 의 method는 위에서 배운 object와 문법이 똑같습니다. 다만 다른 점은 프로퍼티마다 comma(,)로 구분해주지 않아도 된다는 것입니다.

changeType 함수를 호출하고 그 인자에 새로운 커피타입 이름을 넣어주었더니 coldbrew의 type 프로퍼티의 값이 espresso 에서 brewing으로 바뀌었습니다.
우리가 어떤 메소드를 실행할때 이러한 방식으로 적용될 프로퍼티 값을 넣을 수 있습니다.