TIL :: JavaScript / replit. 21~24

⁍21. 날짜와 시간

• 회원가입을 한 날짜와 시간,
• 글을 작성한 시간
• 휴대폰의 현재 시간 등...

날짜와 시간을 저장하고 보여줄 때 날짜 객체를 사용합니다.

날짜 객체를 생성할 때 : new 연산자 다음에 Date 생성자를 씁니다.

• new Date()

var rightNow = new Date();
console.log(rightNow);
//2019-02-18T00:45:06.562Z

예) 2월 18일 월요일 19:45

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

console.log(year)
console.log(month)
console.log(date)
console.log(day)
console.log(currentHour)
console.log(currentMin)

⚠️ 주의

getMonth 메서드는, 현재 달보다 1 작은 값을 반환 하므로 주의해주세요.

또한 1초, 1초 시간이 흐른다고 해서 rightNow 담긴 시간 값이 변하지 않는건 아시겠죠?

위의 코드 1번째 줄이 실행되는 순간의 현재 시간이 담기는 것 입니다.

 

◉ getTime

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

getTime 메서드로 날짜의 밀리초 표현을 반환할 수 있습니다.

1564563605026 이라는 숫자가 반환되었습니다.

아마 여러분들이 보고 있는 숫자와 다를 것입니다.

참고로, 기준이 되는 일자는 1970년 1월 1일입니다.

1970년 1월 1일로부터 1564563605026 밀리초가 지났다는 의미입니다.

만약 10분 뒤에 다시 새로 new Date() 를 호출하면, 시간이 조금 흘렀으니 위의 1564563605026 보다는 큰 숫자가 나올 것입니다.

이렇게 getTime 메소드로 반환된 숫자로 비교연산을 통해 언제가 더 과거인지 판단할 수 있습니다.

값이 더 작으면 과거입니다.

 

◉ 특정 날짜의 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);

미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다. 쉽게 말해 미국은 태어나자마자 0살이고 생일을 지나야 비로소 한 살이 됩니다. 반면에 한국은 태어나자마자 1살이고 연도가 바뀔 때마다 한 살씩 먹습니다.

예를 들어 미국에서는 1995년 9월 12일에 태어났으면 1995년 9월 12일에는 0살이고

1996년 9월 12일이 되야 1살이 됩니다. 그에 비해 한국에서는 1995년 9월 12일에 태어나자마자 1살이고 1996년 1월 1일에 2살이 됩니다.

1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다. 미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠.

---

Assignment

미국을 비롯해 전세계 대부분의 나라들이 생일을 기준으로 나이를 계산 합니다. 쉽게 말해 미국은 태어나자마자 0살이고 생일을 지나야 비로소 한 살이 됩니다. 반면에 한국은 태어나자마자 1살이고 연도가 바뀔 때마다 한 살씩 먹습니다. 예를 들어 미국에서는 1995년 9월 12일에 태어났으면 1995년 9월 12일에는 0살이고 1996년 9월 12일이 되야 1살이 됩니다. 그에 비해 한국에서는 1995년 9월 12일에 태어나자마자 1살이고 1996년 1월 1일에 2살이 됩니다. 1살 차이도 크게 생각하는 우리나라 고유의 문화에 비롯한 계산법이 아닌가 추측해 봅니다. 미국이나 다른 나라가 사용하는 나이 계산법은 우리나라에서는 만 나이 라고 하죠.

앞서 말한 만으로 계산한 나이를 구하는 함수인 getWesternAge 함수를 구현해 봅시다.

• 이 함수는 birthday 라는 인자를 받습니다.
• 이 birthday 는 Date 객체 입니다. birthday 라는 인자를 넣었을 때, 현재를 기준으로 만으로 계산한 나이를 리턴 해주세요.
• birthday 는 string이 아닌 Date 객체라는 걸 명심하세요 :)
• 예를 들어, 오늘이 2020년 7월 21일이고, birthday 값이 다음과 같다면:

1990-03-21T00:45:06.562Z

리턴 값은 30 이 되어야 합니다.

function getWesternAge(birthday) {
  let current = new Date();
  let year = current.getFullYear();
  let month = current.getMonth() + 1;
  let date = current.getDay();

  let age = year - birthday.getFullYear(); 
  console.log(age);

  if ( 
    month < birthday.getMonth() ||
    (month === birthday.getMonth() + 1 && date <  birthday.getDay())
    ) {
      age -= 1;
      }
        console.log(age);
        return age;
}

---

⁍22. Number

수학 계산을 위해서는 JavaScript에서 제공하는 Math 객체를 사용합니다.

다음 사이트에서 한 번 봐주세요. 👉 Math객체

절대값 구하기, sin, cos, 제곱근 등등, Math 객체에 수학계산 메서드가 많이 있네요.

 

◉ round, ceil, floor

• round : 반올림 메서드 
• ceil : 올림 메서드
• floor : 내림 메서드

console.log(Math.round(2.5));
console.log(Math.round(2.49));
console.log(Math.round(2));
console.log(Math.round(2.82));

console.log(Math.ceil(2.5));
console.log(Math.ceil(2.49));
console.log(Math.ceil(2));
console.log(Math.ceil(2.82));

console.log(Math.floor(2.5));
console.log(Math.floor(2.49));
console.log(Math.floor(2));
console.log(Math.floor(2.82));

 

◉ 랜덤함수 

• Math.random()

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

0.0000000000000000에서 0.9999999999999999 사이의 값에서 랜덤수를 제공

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

randomNumber * 10 의 값은 1의 자리수에 엄청 긴 소수자리로 이루어져 있습니다.

ex) 9.697009826327621

확인해 보셨나요?

이렇게 구한 후, 소수자리는 다 버리도록 내림함수를 사용하여 0~10 사이의 랜덤수를 구할 수 있습니다.

이런 랜덤함수는 로또를 뽑거나, 이벤트 당첨자를 뽑을 때 유용하게 쓰입니다.

---

Assignment

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

• 함수는 짧지만, 이번에는 수학의 뇌를 조금 써야 하는 assignment 입니다. 🙌
• 앞으로 랜덤함수를 쓸 일이 정말 많습니다.
• 그런데 Math.random() 으로는 내가 원하는 범위의 랜덤수를 얻을 수가 없습니다.
• 항상 0.0000000000000000에서 0.9999999999999999 사이 값만 return 해주기 때문이죠.

 

😅나의 풀이

// Assignment
function getRandomNumber (min, max) {
  let random = Math.random()*(max - min) + min;
  return random;
}
console.log(getRandomNumber)

정답

// Assignment
function getRandomNumber (min, max) {
  return Math.round(Math.random() * (max - min) +min);
}

---

⁍23. Object (객체)

 

• 객체는 {}(중괄호)로 감싸져 있고,
• 콜론으로 구분된 이름 / 값 의쌍 들이, 쉼표로 분리된 목록의 형태입니다.

다시 말하면 객체는 이름과 값으로 구성된 프로퍼티들의 집합이라고 할 수 있다.

위에서 property 이름을 1, 2로 나누었는데, 프로퍼티 이름은 중복이 되면 안 되기 때문에 숫자를 달리 하였습니다.

plan1 의 객체를 만들자면 아래와 같습니다.

let plan1 = {
  name: "Basic",
  price: 3.99,
  space: 100,
  transfer: 1000,
  pages: 10
};

아래의 규칙을 지켜 객체를 만들 수 있습니다.

• property 이름은 중복될 수 없다.
• property이름과 property값 사이에 : (콜론)으로 구분한다.
• property를 추가할 때는 , (쉼표)를 붙여준다.
• property 값에는 어느 type이나 가능하다(string, number, array, object, function..)

해당 객체의 property값을 접근하고 싶을 때는 아래와 같습니다.

• 마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 오른쪽에 위치합니다.
• 대괄호([])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티 명은 쌍따옴표("")와 함께 대괄호 안에 작성합니다.

let plan1 = {   
  name: "Basic"
};

console.log(plan1.name);
console.log(plan1["name"]);

아래의 코드에서 어떻게 객체의 프로퍼티에 접근했는지 확인해주세요.

let myObj = {
  property1: "hello",
  property2: [1,2,3,4,5],
  property3: {
    childproperty: "haha"
  }
};

let name = "property";
console.log(myObj[name+"1"]);
console.log(myObj[name+"2"]);
console.log(myObj[name+"3"]);
console.log(myObj[name+"3"]["child"+name]);

console.log(myObj.property1);
console.log(myObj.property2);
console.log(myObj.property3);
console.log(myObj.property3.childproperty);

직접 코드를 작성해서 테스트해보고, 이해되지 않는 것이 있으면 질문해주세요!

위의 myObj 객체를 정의한 후에 property 값을 수정할 수 있습니다.

let name = "property1";
myObj[name] = ["hi", "hello"];
console.log(myObj);

myObj객체의 property1 의 값은 원래 텍스트 였는데 배열로 바꿔보았습니다.

myObj 가 어떻게 바뀌었는지 꼭 확인해보세요.

혹은 새로운 property를 추가할 수도 있습니다.

myObj.property3.siblingproperty = [3, 6, 9];
console.log(myObj);

myObj 가 어떻게 바뀌었는지 꼭 확인해보세요!!!!!!!!!

myObj 의 property1 가 배열로 바뀌었는데, 이 배열의 첫번째 요소를 접근하고 싶으면 아래와 같이 할 수 있습니다.

console.log(myObj.property1[0]);

myObj.property1 는 ["hi", "hello"] 이고, index 0에 접근하였으므로 "hi" 가 나올 것입니다.

아래와 같은 객체의 구조는 정말 많이 쓰입니다.

객체의 객체의 배열의 객체.....?

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

objData 라는 객체안에 name , address , books 라는 property가 있습니다.

books 에 또 객체가 할당 되었네요.

위의 데이터에서 "HTML Guide" 에 접근하고 싶을 때는 아래와 같이 해주면 됩니다.

let bookName = objData.books.info[1].name;
console.log(bookName);

objData.book 은 objData 객체의 book 이라는 property명의 property값을 가져와야 하는데,

해당 property명은 존재하지 않으니까 값도 없는 것이고 그래서 undefined 라고 나옵니다.

---

Assignment

이제까지 하셨던 Assignment 와는 조금 다른 유형입니다. 그 동안에는 특정값을 구해서 리턴 했다면, 이번에는 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다.

getData 함수를 구현해주세요!

• getData 함수는 세 개의 배열을 인자로 받습니다.
  • salesArr : 날짜별 판매량
    • ex) [["20190401", 34], ["20190402", 23], ["20190403", 29]]
  • reviewArr : 날짜별 리뷰수
    • ex) [["20190328", 3], ["20190401", 0], ["20190403", 1]]
  • likeArr : 날짜별 좋아요수
    • ex) [["20190328", 98], ["20190401", 102], ["20190403", 125]]
• 다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.
• 리턴되는 객체는 아래와 같이 3개의 property를 가집니다.
  • sumAmount : 총 판매량
  • sumReview : 총 리뷰개수
  • sumLike : 총 좋아요수

function getData(salesArr, reviewArr, likeArr) {
  let sumAmount = 0;
  let sumReview = 0;
  let sumLike = 0;
  
  for(let i = 0; i < salesArr.length; i++) {
      sumAmount += salesArr[i][1];
    }
  for(let i = 0; i < reviewArr.length; i++) {
      sumReview += reviewArr[i][1];
    }
  for(let i = 0; i < likeArr.length; i++) {
      sumLike += likeArr[i][1];
    }
    
  const objData = {
    sumAmount: sumAmount,
    sumReview: sumReview,
    sumLike: sumLike,
  };
  return objData;
}

---

⁍24. Scope

scope은 JavaScript의 문법이 아닙니다.

JavaScript에서 scope이란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.

 

◉ Block

block이란 중괄호({} , curly brace)로 감싸진 것을 block이라고 합니다.

function 의 내부는 하나의 block입니다.

function hi() {
  return 'i am block';
}

for 문도 하나의 block이고요

for (let i = 0; i < 10; i++) {
  count++;
}

if 문의 {} 도 하나의 block입니다.

if (i === 1) {
  let j = 'one';
  console.log(j);
}

{} (block)내부에서 변수가 정의되면 변수는 오로지 {} (block)내부에서만 사용할 수 있습니다.

{} (block)내부에서 정의된 변수는 local(지역) 변수라고 부릅니다.

function getResult() {
  let result = 10;
  
  return result;
}

// 자바스크립트 에러! 
// getResult 내부의 scope에 접근할 수 없다
console.log(result);

console.log(result) 에서 getResult 내부에 접근이 불가능하기 때문에 result 라는 변수의 존재를 알지 못합니다.

result 라는 변수는 getResult 함수의 {} (block)에서만 사용할 수 있습니다.

 

◉ Global(전역) Scope 

scope은 변수가 선언되고 사용할 수 있는 공간입니다.

scope 외부(block밖)에서는 특정 scope의 변수에 접근할 수가 없습니다.

block밖인 global scope에서 만든 변수를 global variable(전역변수)라고 합니다.

코드 어디서든 접근 가능해서 변수값을 확인할 수 있습니다.

const color = 'red';
console.log(color);

function returnColor() {
  console.log(color);
  return color;
}

console.log(returnColor());

returnColor 함수 내에서, returnColor 함수 밖에 있는 color 라는 변수를 return 해주었습니다.

color 라는 변수는 global 변수이기 때문에 returnColor 함수의 block에서도 접근이 가능해서 'red' 를 반환한것입니다.

 

◉ Scope의 오염 

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있습니다.

global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖습니다.

namespace라는 것은 변수 이름을 사용할 수 있는 범위라는 뜻입니다. scope이라고도 하고 특히 변수이름을 얘기할 때는 namespace라고도 합니다.

global 변수는 프로그램이 종료될때까지 계속 살아있습니다. 이 말은 local 변수는 {} - block이 끝나면 더 이상 변수가 살아있지 않고 쓸 수 없다는 말입니다.

global 변수가 계속 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹하기도 어렵고 이 변수는 어디에서 왜 필요한지 알려면 도대체 어디에서 let, const로 선언을 했는지 찾아 나서야 합니다.

아래는 scope이 오염된 대표적인 예입니다.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
  stars = 'Sirius';
  
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky());
console.log(stars);

• stars 이라는 global 변수가 있습니다.
• callMyNightSky 함수에서 새로운 변수를 선언하고 싶었는데 깜빡하고 let 키워드를 작성하지 않았습니다.
• callMyNightSky 을 호출하면 stars 변수에 "Sirius" 이 할당됩니다.
• global 변수였던 stars 에 영향이 갔습니다!
• 다른 함수에서 global 변수인 stars 을 사용하고 싶은데 값이 수정된 "Sirius" 으로 사용하게 됩니다.

앞으로 함수가 몇 십개 있을지도 모르는 상황에서 저렇게 global 변수를 남용 하다가는 어디서 어떻게 값이 수정될지 알 수 없어집니다.

 

◉ 좋은 Scoping 습관 

위와 같이 global 변수가 여기저기서 수정되면 안되기 때문에 변수들은 block scope으로 최대한 나눠놔야 합니다.

• 타이트한 scope(tightly scoping)의 변수는 코드 품질을 올려줍니다!
• 코드가 block 으로 명확하게 구분되기 때문에 코드 가독성이 올라갑니다.
• 코드가 한줄 한줄 쭉 나열된 것이 아니라 각각의 기능별로 block을 나누면 코드가 이해하기 쉬워집니다.
• 나중에 코드를 수정할 일이 있을 때, 코드를 오랜만에 보더라도 잘 나뉘어 있어서 유지보수가 쉬워집니다.
• 프로그램이 끝날때까지 변수가 살아있는 것이 아니라서(block이 끝나면 local 변수의 삶이 끝나서) 메모리 절약도 됩니다.

즉, 한마디로 요약하면 global 변수는 쓰지 않도록 노력해야 하고, 최대한 {} 내에서 let, const 을 사용하여 변수를 새로 만들어서 쓰자는 말입니다.

이제 마지막 예제입니다!

이번에는 if 문의 {} 의 block scope을 보겠습니다.

function logSkyColor() {
  const dusk = true;
  let myColor = 'blue'; 

  if (dusk) {
    let myColor = 'pink';
    console.log(myColor); // pink
  }

  console.log(myColor); // blue 
}

console.log(myColor); // 에러!!

• if 문에 {} 의 코드 block을 사용하였습니다. 여기에 myColor 라는 변수를 let 으로 선언하였습니다.
• if 문 내에서는 "pink" 라고 할당 하였고, if 문 밖에서는 "blue" 라고 할당한 것에 주목해주세요.

사실 이 코드는 function 의 block, scope, if 문의 block, scope으로, 모두 block 을 잘 사용 하였는데도 scope namespace가 오염된 것입니다. 왜냐하면 같은 이름의 변수를 사용했기 때문입니다.

이렇게 새로운 block에서 변수를 쓸 때는 항상 다른 이름으로 변수를 선언해야한다는 것을 잊지 말아주세요.

---