Javascript 정리(7)

✅ Number

👉 Math.round
반올림 함수 (소숫점이 5 이상이면 올림)

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

🚩 '멜론' 앱에서 사람들이 노래 평점을 매길 때, 별 0~5개 중에 선택해야 한다면, 모든 사람들의 점수를 더해 평균을 내면 소수점이 나올 수 있다(평균 3.56)
이럴 때 Math.round 함수를 사용하여 반올림 한 값을 낼 수 있다.

👉 Math.floor
내림 함수 (소숫점은 다 없앰)

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

👉 Math.ceil
올림 함수 (소숫점은 다 올림)

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

🚀 Math객체 관련 참고 site
https://www.w3schools.com/js/js_math.asp

---

👉 랜덤함수

⛵ Math.random();

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

⏩ 0.00000000000에서 0.99999999999 사이의 값에서 랜덤수를 제공

---

⛵ Math.floor();

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

⏩ randomNumber*10 의 값은 1의 자리수에 엄청 긴 소수자리로 이루어져 있다.
ex) 9.697009826327621
❗ Math.random과 Math.floor를 활용하여 0~10사이의 랜덤수를 구할 수 있다
✨✨ 로또, 이벤트 당첨자 등을 뽑을 때 유용하게 사용

---

⛵ min <= randomNumber(정수) <= max

// 최댓값, 최솟값 포함
function randomNumber(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //최댓값도 포함, 최솟값도 포함
}

---

⛵ min <= randomNumber(정수) < max

// 최솟값 포함, 최댓값 미포함
function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //최댓값은 제외, 최솟값은 포함
}

/* 
최소(min), 최대값(max)을 받아 그 사이의 랜덤수를 return하는 함수를 구현해주세요.
*/
function randomNumber (min, max) {
  let randomNum = Math.random();
  return Math.floor(randomNum*(max-min+1))+min; //최댓값도 포함, 최솟값도 포함
}
randomNumber (5,9);  

---

✅ Object

• 객체는 { }(중괄호)로 감싸져 있다
• property 이름은 중복될 수 없다.
• property 이름과 property 값 사이에 :(콜론)으로 구분한다.
• 쉼표로 분리된 목록의 형태(property를 추가할 때는 ,(쉼표)를 붙여준다.)
• property 값에는 어느 type이나 가능하다(string, number, array, object, function..)
  ⏩ 다시 말하면 객체는 이름과 값으로 구성된 프로퍼티들의 집합이다.

👉 객체의 property값에 접근

방법(1) 마침표(.) 연산자를 사용
접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치.

방법(2) 대괄호([])를 사용
접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표("")와 함께 대괄호 안에 작성.
❗ 대괄호 안에는 변수가 들어갈 수 있다.

let plan1 = {   
  name: "Basic"
};

// 방법(1) 마침표를 사용하여 속성값에 접근
console.log(plan1.name);

// 방법(2) 대괄호를 사용하여 속성값에 접근
console.log(plan1["name"]);



let plan1 = {   
  name: "Basic"
};

let propertyName = "name";

// 방법(2) 대괄호를 사용하여 속성값에 접근(변수가 들어갈 수 있기때문)
console.log(plan1[propertyName]);





let myObj = {
  property1: "hello",      // 속성값으로 숫자(Number)
  property2: [1,2,3,4,5],  // 속성값으로 배열(object) 
  property3: {             // 속성값으로 함수(object)
    childproperty: "haha"
  }
};

let name = "property";
console.log(myObj[name+"1"]);  // =console.log(myObj[property1] = "hello" 출력
console.log(myObj[name+"2"]);  // =console.log(myObj[property2] = "[1,2,3,4,5]" 출력
console.log(myObj[name+"3"]); // =console.log(myObj[property3]) = "{ childproperty: "haha" }" 출력
console.log(myObj[name+"3"]["child"+name]);  // =console.log(myObj[property3][childproperty]) = "haha" 출력
  
console.log(myObj.property1);  // 'hello'
console.log(myObj.property2);  // [1,2,3,4,5]
console.log(myObj.property3);  // { childproperty: 'jaja' }
console.log(myObj.property3.childproperty);   // 'haha'

/* 
- 인자로 받은 데이터를 조합해서, 구조를 바꿔서 리턴합니다.
- 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]]
위의 예시로 보여드린 배열은 단지 예일뿐, 날짜별 판매량 배열은 365일치 요소가 들어있을 수도 있습니다.
객체는 프로퍼티명으로 바로 접근 가능하니까, 날짜만 알면 반복문을 돌지 않아도 바로 데이터를 얻을 수 있습니다. 그래서 객체의 형태로 데이터 구조를 바꾸려는 것입니다.
다음 요구사항을 충족하는 객체를 만들어서 return 해주세요.
objData가 갖고 있는 property는 3개 입니다.
- sumAmount: 총 판매량
- sumReview: 총 리뷰개수
- sumLike: 총 좋아요수
*/
const salesArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]]
const reviewArr = [["20190328", 3], ["20190401", 0], ["20190403", 1]]
const likeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]]


let salesSum = 0
for (let i=0; i<salesArr.length; i++) {
  salesSum += salesArr[i][1]
}

let reviewSum = 0
for (let i=0; i<reviewArr.length; i++) {
  reviewSum += reviewArr[i][1]
}

let likeSum = 0
for (let i=0; i<likeArr.length; i++) {
  likeSum += likeArr[i][1]
}


const objData = {
  sumAmount : salesSum,
  sumReview : reviewSum ,
  sumLike :  likeSum
}

✅ includes ( ) 메소드

👉 includes ( )
배열 또는 문자열이 특정 요소를 포함하고 있는지 확인하는 메소드.

❗ 문자나 문자열을 비교할 때, includes()는 대소문자를 구분

👉 fromIndex
arr.includes(valueToFind, fromIndex)
◾ 문자열에서 찾기 시작하는 위치를 나타내는 인덱스 값. 기본값은 0. 어떤 정수라도 가능.
◾ 만약 fromIndex값이 음의 정수이면 전체 문자열을 찾게 된다.
◾ fromIndex가 배열의 길이보다 같거나 크면(fromIndex >= str.length) false 반환.
◾ valueToFind 값을 찾을 수 없으면 -1 반환

string.includes ( searchString, length )

// searchString: 검색할 문자열로 필수요소. 대소문자 구분함
// length: 검색을 시작할 위치. 선택요소로써 값이 없으면 전체 문자열을 대상으로 한다.

'abzcd'.includes('z')     // true 출력 ('abzcd'가 'z'를 포함하는지 검사)
'abzcd'.includes('z', 2)  // true 출력 ('zcd'가 'z'를 포함하는지 검사)
'abzcd'.includes('z', 3)  // false 출력 ('cd'가 'z'를 포함하는지 검사)
'abzcd'.includes('Z', 3 ) // false 출력 (대소분자를 구분하므로 대문자'Z'는 없기때문에 false.

const arr = [1,2,3];
console.log(arr.includes(2));  // true 출력

const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));  // true 출력

console.log(pets.includes('at'));   // false 출력

[1, 2, 3].includes(2);     // true (2가 존재)
[1, 2, 3].includes(4);     // false (4가 존재)
[1, 2, 3].includes(3, 3);  // false (전체 문자열은 2번째 까지이므로 3은 전체 문자열보다 크기 때문에 false)
[1, 2, 3].includes(3, -1); // true  (fromIndex값이 음의 정수이면 전체 문자열에서 찾는다. 3이 있으므로 true)
[1, 2, NaN].includes(NaN); // true

✅ switch 문

👉 조건 제어문에 속한다 (cf. if 문) 그러나 if 문은 조건식에 부등식(<,<=,>,>=)이 사용되지만 switch문은 오직 ==만 비교할 수 있다.
❗ if문은 조건식이 true일 경우에 block이 실행된다고 하면, switch문은 비교할 변수가 어떤 값을 가지냐에 따라 실행문을 선택한다.)

switch (변수) {
   case 값1 :
         실행문;
         break;
   case 값2 :
         실행문;
         break;
   default :
         실행문;
}

❗ switch문은 괄호 안의 (변수)의 값과 동일한 값을 갖는 case로 가서 실행문을 실행시킨다. (case실행 후 break이 되어 switch문이 종료된다)
만약 괄호안의 (변수)의 값과 동일한 값의 case가 존재하지 않다면 default로 가서 실행문을 실행시킨다(default는 생략 가능)

let score = 80;

switch (score/10) {
   case 9 :
     console.log("A등급 입니다");
     break;
   case 8 :
     console.log("B등급 입니다");
     break;
   case 7 :
     console.log("C등급 입니다");
     break;
   case 6 :
     console.log("D등급 입니다");
     break;
   default :
     console.log("F등급 입니다");
 }
 // "B등급 입니다" 출력

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}
// 현재 오늘 요일을 반영하여 해당하는 case에서 break;

/*
class 생성을 연습해보겠습니다.
- MyMath라는 class를 생성해주세요.
- constructor에서는 숫자 2개를 인자로 받아 프로퍼티로 저장합니다.
- 총 4개의 메서드를 구현해주세요.
    - getNumber: 두 개의 숫자가 무엇인지 배열로 반환하는 메서드 ex) [1, 2]
    - add: 두 개의 숫자를 더하는 메서드
    - substract: 두 개의 숫자를 빼는 메서드
    - multiply: 두 개의 숫자를 곱하는 메서드
*/
class MyMath {
  constructor(a,b) {
    this.getNumber = [a,b],
    this.add = a+b,
    this.substract = a-b,
    this.multiply = a*b
  }
}

let result = new MyMath(3,2)
console.log(result)
// 출력결과 : 
// MyMath {
//   getNumber: [ 3, 2 ],
//   add: 5,
//   substract: 1,
//   multiply: 6,
//   __proto__: MyMath { constructor: ƒ MyMath() }
// }

✅ Array methods

👉 arrow function을 가장 많이 사용할 때는 call back함수로 사용할 때이다.
❗ 콜백함수란, 인자로 전달되는 함수를 뜻함.

👉 Array.map ( 콜백함수 )
map 메소드는 배열을 반복해 준다. callback함수에서 return한 값으로 각각의 요소를 수정해준다.
map 매소드의 return값은 수정된 값으로 다시 생성된 배열이다.

const arr = [1,2,3];
arr.map( (e) => {
	return e * e;
    }
)
// [1, 4, 9] 출력(기존 arr의 배열은 그대로 두고, 새로운 배열 출력)

❗ Array 타입의 데이터 요소 갯수 만큼 반복한다(각각의 요소를 전부 새로운 배열로 return)
❗ 수정하고 싶은대로 map 메소드 안에 로직을 구현하고 return해주면 된다

👉 Array.forEach ( 콜백함수 )
forEach는 for대신 사용하는 반복문이다.
map과 가장 큰 차이는, forEach함수 자체가 return하지 않는다는 것이다. 그냥 forEach 함수를 탈출하고 싶을 때 return을 사용하면 된다.
그래서 forEach로 전달되는 콜백함수에서도 return하는 것이 없다. 단지 for문 대신 사용하는 반복 method일 뿐이다.

let empty = [];
let names = ['a', 'ab', 'cbb', 'ada'];

names.forEach(el => {   
  if (el.includes('a')) {     
    empty.push(el);   
  } 
});
console.log(empty)
// 출력결과 : [ 'a', 'ab', 'ada' ]