2020년 1월 6일 복기

오늘 테스트를 푸는데

function test2(num) {
  ///TODO: 0일때 num이 -일때 num이 +일때
  if(num === 0) {
    return 0;
  }
  let str = String(num).split('');
  let firstNum = Number(str[0])
  let sum=0;

  if(str[0] === '-') {
    let firstNum = Number(str[0])*-1
  }

  for(let i=1 ; i<str.length;i++) {
    sum += Number(str[i]);
  }

  return firstNum + sum;
}

이렇게 하니까 안됬다 왜일까.

아 저기에 str[0]이 아니고 str[1]이네

function test2(num) {
  let newArr = num.toString().split(''); //Array.isArray(newArr) = true;

  let sum; 
  
  if(newArr[0] === '-') {
    let renewArr= newArr.slice(2);
    let sum =renewArr.reduce((acc,cur) => Number(acc) + Number(cur),0);
    return sum - Number(newArr[1]);
  }
  
  sum = newArr.reduce((acc, cur) =>  Number(acc) + Number(cur),0)

  return sum;
}

수정해버렸다.

그리고 또 푸는 데 안풀린다... 왜그럴까...

function test4(arr) {
  // TODO: 여기에 코드를 작성합니다.
  const container = document.querySelector('#container');

  arr.forEach(function(element){
    const liTag = document.createElement('li');

    const nameATag = document.createElement('a');
    nameATag.classList.add("name");
    nameATag.textContent = element.firstName +' ' +element.lastName;
    nameATag.addEventListener('click', handleClickUser)

    const ageDiv = document.createElement('div');
    ageDiv.classList.add("age");
    ageDiv.textContent = element.age;

    container.append(li);
    liTag.append(a,div); 
  });
}


function handleClickUser () {
  const list_usernames = document.querySelectorAll('.name');

  for(let i=0; i <list_usernames.length; i++) {
    list_usernames[i].onclick = function(event) {

      const target = event.target;
      const clickedUserName = target.textContent;

      const sorteName = arr.filter(function(element) {
        let fullName = element.firstName +' ' + element.lastName;
        if(fullName === clickedUserName) {
          return true;
        }
      });
      printRole(listUserName)
    }
  }
}

하지만 이런 방식의 접근은 잘못되었다.

function printRole(user) {
  // Joe Blow를 클릭하면 clerk 이
  // Mary Jenkins를 클릭하면 manager 가 찍힙니다.
  // 이 함수는 수정하지 마십시오.
  console.log(user.role);
}

function test4(arr) {
  // TODO: 여기에 코드를 작성합니다.
  const container = document.querySelector('#container');

  for(let i=0; i <arr.length; i++) {
    const liTag = document.createElement('li');

    const nameATag = document.createElement('a');
    nameATag.classList.add("name");
    nameATag.textContent = arr[i].firstName +' ' +arr[i].lastName;
    nameATag.addEventListener('click', handleUserClick);

    const ageDivTag = document.createElement('div');
    ageDivTag.classList.add("age");
    ageDivTag.textContent = arr[i].age;

    container.append(liTag);
    liTag.append(nameATag,ageDivTag); 
  
    function handleUserClick() {
      printRole(arr[i])
    }
  };
}

넘나 쉬운것.

test 5 넘나 어렵다.

function test5(arr) {
  // TODO: 여기에 코드를 작성합니다.
  // 먼저 arr을 순회한다 그다음에 arr[i]를 순회한다.
  let newArr =[];

  for(let i=0; i<arr.length; i++) {
    for(let j=0; j<arr[i].length; j++) {
      newArr.push(arr[i][j]);
    }
  }
  return newArr;
}

reduce의 색다른 사용법
배열을 문자열로
수도코드
배열의 각 요소 : 유져 정보
응축하는 방법 (함수) : 하나의 유져의 이름과 쉼표를 이어붙인다(concat)
원하는 형태 : 문자열로 누적한다.
응축된 결과 : 쉼표로 구분되는 모든 유져의 이름
function joinName(resultStr, user) {
resultStr = resultStr + user.name + ', ';
return resultStr;
}

let users = [
{ name: 'Tim', age: 40 },
{ name: 'Satya', age: 30 },
{ name: 'Sundar', age: 50 }
];

users.reduce(joinName, '');
reduce의 콜백 함수 joinName은 총 몇번 실행되나요? 다음 표에 들어가는 값은 각각 무엇인가요?

호출 횟수 resultStr user 리턴 값
1번째 호출 __ __ __
2번째 호출 __ __ __
n번째 호출 __ __ __
최종 리턴 값: __

배열을 객체로
수도코드
배열의 각 요소 : 유져 정보
응축하는 방법 (함수) : 한 유져 이름의 첫 글자를 주소록 객체 속성의 키(key)로, 유져 정보를 주소록 객체 속성의 값(value)으로 추가
원하는 형태 : 주소록 객체에 누적한다.
응축된 결과 : 모든 유져의 정보가 알파벳으로 구분된 주소록
function makeAddressBook(addressBook, user) {
let firstLetter = user.name[0];

if(firstLetter in addressBook) {
addressBook[firstLetter].push(user);
} else {
addressBook[firstLetter] = [];
addressBook[firstLetter].push(user);
}

return addressBook;
}

let users = [
{ name: 'Tim', age: 40 },
{ name: 'Satya', age: 30 },
{ name: 'Sundar', age: 50 }
];

users.reduce(makeAddressBook, {});
직접 따라해보세요
reduce의 콜백 함수 makeAddressBook은 총 몇번 실행되나요? 다음 표에 들어가는 값은 각각 무엇인가요?

호출 횟수 addressBook user 리턴 값
1번째 호출 __ __ __
2번째 호출 __ __ __
n번째 호출 __ __ __
최종 리턴 값

{
T: [
{ name: 'Tim', age: 40 }
],
S: [
{ name: 'Satya', age: 30 },
{ name: 'Sundar', age: 50 }
]
}

Javascript Fibonacci using Closures
2
I am to write up some code using Javascript. Here is what we are to do:

"Implement a javascript Fibonacci numbers using closures. Specifically, write an function that stores two consecuitive Fibonacci numbers, initially 0 and 1. The function also defines and returns a nested function getNext(). The getNext() function updates the two stored Fibonacci numbers to the next two Fibonacci numbers and returns the current one. E.g. on the first call to getNext() the return value is 0, on the next call it is 1, then 1 again, then 2, etc."

I kind of understand this but not really. Could someone maybe help clarify? Thanks!

function test5(arr) {
  let newArr = [];
  arr.map(function(el){ /// map을 통하여서 el를 순회한다. 1번째 arr 제거 
    let obj = {};
    el.reduce(function(acc , val){ /// reduce를 통하여서 property를 순회 2번째 arr 제거
      obj[val[0]] = val[1] // 객체로 만들어준다.
    },0)
    newArr.push(obj); // 새로 담아준다. 왜??
  })
  let sortArr = newArr.sort(function(a,b){
    if(a.age > b.age) {
      return 1
    } if(a.age <b.age) {
      return -1
    }
  });
  console.log(sortArr)
  let nameArr =[];
  for(let i=0; i <sortArr.length; i++) {
    let firstname = sortArr[i].firstName;
    let lastname = sortArr[i].lastName;
    if(firstname && lastname) {
      nameArr.push(firstname +' ' +lastname)
    }
    if(!lastname) {
      nameArr.push(firstname);
    }
    if(!firstname) {
      nameArr.push(lastname);
    }
  }
  return nameArr;
}