[javascript] - wecode 4일 차

arrow-function

//ES5
function getName(name) {
  return name;
}

//ES6
const hi = name => { return name };
const hi = name => name;

화살표 함수를 쓰면 콜백에서 return 안 써도 된다!

몰랐던 사실들!

객체 반복문 작성

Object.keys()

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj) // ['name', 'weight', 'price', 'isFresh']

Object.keys는 키 값만 가져온다.

출처 위코드 문제

Object.values

values는 값만 가져온다.

Object.entries

const values = Object.values(obj)
// values === ['melon', 4350, 16500, true]

const entries = Object.entries(obj)

/*
entries === [
  ['name', 'melon'],
  ['weight', 4350],
  ['price', 16500],
  ['isFresh', true]
]
*/

키, 값으로 이루어진 이차원 배열을 리턴한다.

배열 병합하면서 중복 제거

let union = keyScores.concat(requiredClasses)
union = union.filter((item, idx) => union.indexOf(item) === idx)

두 배열 합치고 filter, indexOf로 중복 값을 제거한다.

배열과 객체 다루기

const salesArr = [["20190401", 34], ["20190402", 23], ["20190403", 29]]
const reviewArr= [["20190328", 3], ["20190401", 0], ["20190403", 1]]
const likeArr = [["20190328", 98], ["20190401", 102], ["20190403", 125]]

function getData(salesArr,reviewArr,likeArr){
  let sumAmount = null
  let sumReview = null
  let sumLike = null
  let dateArr = []
  let i = 0;

  for(let i=0; i < arguments.length; i++){
    for(let j=0; j < arguments[i].length; j++){
     dateArr.push(arguments[i][j][0])
    }
  }
 dateArr = dateArr.filter((item, idx) => dateArr.indexOf(item) === idx)

let objData = new Object()

for(let date of dateArr){
  objData[date] = {
    sumAmount,
    sumReview,
    sumLike
  }

  for(let val in salesArr){
   if(salesArr[val].indexOf(date) === 0){
   objData[date].sumAmount = salesArr[val][1]
   }
  }
  for(let val in reviewArr){
   if(reviewArr[val].indexOf(date) === 0){
   objData[date].sumReview = reviewArr[val][1]
   }
 }
   for(let val in likeArr){
   if(likeArr[val].indexOf(date) === 0){
   objData[date].sumLike = likeArr[val][1]
   }
 }
}
console.log(objData)
return objData
}

getData(salesArr,reviewArr,likeArr)

배열없이 reduce는 인덱스를 지정해줘야 한다.
콘솔로 이중for문 같이 어려운 건 찍어본다 다.

sales, review, like 각 배열에 이차원으로 날짜와 값이 오고 날짜를 프로퍼티로 다시 3가지 프러퍼티를 주려고 한다. dateArr를 만들어서 3가지 배열의 들어있는 모든 날짜를 가져왔다. 배열이 3개라 arguments로 주었다. 합쳐지면 안되는 3개의 배열에 뿌려져 있는 날자를 가져오는 더 좋은 방법이 없을까?

그리고 filter와indexOf로 배열 내 중복을 제거하고 objData를 생성한다.

그리고 dateArr에 for of으로 objData[date]에 객체 property로 준다. 여기서부터 정말 반나절 왔다 갔다 했는데 문제는 이제 각 3개의 배열을 돌려서 날짜에 맞는 값을 줘야 하는데 문제는 for of 안에 있는 date값을 기준으로 찾아야 하는 것! 그래서 for문 밖에서 하려다가 date값을 기준으로 주기가 힘들어서 for of 안에 for in 3개를 사용했다. 정말 굉장히 짜증나고 힘들었는데 console 창에 값이 찍히니까 소리라도 지르고 싶을 정도로 무척 행복했다...그런 기쁨도 잠시고 다시 다음 코드를 짜며 이런 게 뭐라고 신나하고 기뻐하나 생각이 들었는데 그래봤자 코드, 그래도 코드 아니겠는가! 뿌우!

배열과 객체 다루기

let scores ={
  '생활속의회계': 'C',
  '논리적글쓰기': 'B',
  '독일문화의이해': 'B+',
  '기초수학': 'D+',
  '영어회화': 'C+',
  '인지발달심리학': 'A+'
  }
  
let requiredClasses = ['영어회화', '기초수학', '공학수학', '컴퓨터과학개론']

function getExamResult(scores, requiredClasses){

let keyScores = Object.keys(scores)
let union = keyScores.concat(requiredClasses)
union = union.filter((item, idx) => union.indexOf(item) === idx)

for(let name of union){
if(scores[name] === undefined){
scores[name] = 0
 }
   if(scores[name] === "A+"){
    scores[name] = 4.5
  } else if(scores[name] === "A"){
     scores[name] = 4
  } else if(scores[name] === "B+"){
     scores[name] = 3.5
  } else if(scores[name] === "B"){
     scores[name] = 3
  } else if(scores[name] === "C+"){
     scores[name] = 2.5
  } else if(scores[name] === "C"){
     scores[name] = 2
  } else if(scores[name] === "D+"){
     scores[name] = 1.5
  } else if(scores[name] === "D"){
     scores[name] = 1
  } else if(scores[name] === "F"){
     scores[name] = 0
  }
 }
return scores
}

getExamResult(scores, requiredClasses)

score 객체에 프로퍼티로는 과목, 값으로 점수가 있다. 먼저 str인 값을 각각에 구간에 맞게 점수로 변환하고 required 배열에 있는 과목들 중 scroe 객체 프로퍼티에 없는 과목을 추가하고 점수로 0을 부여한다.

일단 어려웠던 것은 배열 요소와 객체 요소를 왔다 갔다하는 것이었다. 어제는 진짜 어려웠는데 하루가 지나니까 뭐가 어려웠는지 까먹었네. 다시 풀어봐야겠다.

아무튼 일단 score에서 key만 가져온 배열을 만들고 requried랑 concat, filter, indexOf로 중복을 제거한 새로운 배열을 만든다. 이제 union이란 새로운 과목 배열에 for of문을 하고 name이란 props를 지정한다. 그러면 scores 객체에서도 쓸 수 있다. 그렇게 해서 scores[name] === undefined 즉, scores에 과목이 없으면 scores[name] = 0으로 프로퍼티와 값을 추가했다. 그리고 if로 점수를 변환!

객체를 if처럼 사용할 수 있다. 새로운 객체를 만들어서 바꿀 것을 할당함. 객체["propery name"] 활용해야함.

for in 두 개로 풀 수 있는 문제! 다시 풀어보자.

인덱스 찾기

let idxOfC = -1
let arr = ["a", "b", "c", "d"]

arr.forEach((el,idx) => {
if(el === "c"){
idxOfC = idx
return
}
})
console.log(idxOfC)

출처: 위코드 문제

map으로 배열 요소 변환

const arr = [123, 2, 12, 124, 5, 100]
function moreThan100(arr){

const newArr = arr.map(num => {
  if(num >= 100){
  return true
  }
  else return false
}) 
  
return newArr
}
console.log(moreThan100(arr))

출처: 위코드 문제

map으로 str과 배열 변환

const date = ['2019-03-21', '2019-04-21', '2019-05-21']

function formatDate(date){
const newDate = date.map((str, i) => {
    return `${str.split("-")[0]}년 ${str.split("-")[1]}월 ${str.split("-")[2]}일`
})

return newDate
}


formatDate(date)

// const nickname = "kim"
// const interest = "방탈출,테니스,멍 때리기"
// const handleEdit = (nickname, interest) =>{

// const arrInter = interest.split(",")

// return {
//  nickname: nickname,
//  interests: arrInter,
//  bio: `제 닉네임은 ${nickname}입니다. 취미는 ${interest}입니다.`
// }
// }

// console.log(handleEdit(nickname, interest))


// const arr = [123, 2, 12, 124, 5, 100]
// function moreThan100(arr){

// const newArr = arr.map(num => {
//   if(num >= 100){
//   return true
//   }
//   else return false
// }) 
  
// return newArr
// }
// console.log(moreThan100(arr))