22.06.23 TIL

 

 

- 컴퓨터처럼 사고하는 것이 무엇인지 설명할 수 있다.

 

논리적이며 순차적으로 해결할 수 있도록 문제를 구조화 한다.

작게 쪼개어 분석, 해체, 과거의 문제들과 어떤 연계가 되는지 패턴을 이해

 

 

문제를 이해하고, 문제를 작게 분해해서 어떻게 해결할 지 생각해보자.

 

개발자란? 문제를 해결하는 사람. 

 

 

 

- 객체의 키에 동적(변수)으로 접근하기

 

Object 두번째 강의에서, 객체의 키를 사용하는 여러 방법을 배웠습니다. 이 방법을 사용하면 객체의 특정 키의 값을 가져오는것도 가능하지만, 반대로 객체에 특정 키를 만들고 값을 할당하는것도 가능합니다.

 

const information = {

name: '김개발'

}

여기에 키 하나를 생성하고, 그 키에 값을 할당해주려고 합니다.

그런데 키와 값을 변수를 통해 받아온다면 어떻게 해야할까요?

 

const verb = 'developes'

const project = 'facebook'

verb의 값을 키로 사용해야 하고, project의 값을 그 키의 값으로 사용한다고 했을때

 

information[verb] = project // [A]

information.developes = 'facebook' // [B]

A와 같이 할당이 가능합니다. B의 방식으로도 할당이 가능할 수도 있겠지만, 이 경우 키와 값은 항상 정해져 있게 됩니다.

하지만 A와 같은 방법은 변수 verb와 project가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해집니다.

 

 

 

 

- 배열을 객체로 변환하는 3가지 방법

1. object.assign()
2. array.reduce()
3. spread 연산자 사용

1. object.assign()

const array = ['a','b','c'];

const obj = Object.assign({}, array);

console.log(obj) // {0: 'a', 1: 'b', 2: 'c'}

 

2. array.reduce()

const array = ['a', 'b', 'c']

 

array.reduce(function(object, value, index) {

  object[index] = value;

  return object;

}, {})

// {0: 'a', 1: 'b', 2: 'c'}

여기서 나는 키 값이 1부터 시작하기를 원해서 reduce를 사용해서 변환을 했다.

object[index] -> object[index+1] 로 해주면 {1: 'a', ...} 로 변환 가능하다.

 

3. spread 연산자 사용

const arr = ['a', 'b', 'c'];

const obj = {...arr};

console.log(obj); // {0: 'a', 1: 'b', 2: 'c'}

 

 

 

- 리플잇 js 30번 복습

//배열로 만들어서 풀고, 객체로 변환.

//1. scores객체 (키 + 값)으로된 배열로 변환

//2. 등급값을 따로 빼서 switch로 숫자값으로 변환하기 

//3. requiredClasses 과 비교를 위해서 scores 키 값만 따로 추출

//4. 비교해서 겹치는 값들은 걍 냅두고, 없는 것들은 요소에 0값을 추가해서 배열로 만들어 

// 기존 배열에 추가

// 5. 기존 배열을 오브젝트로 변환

 

 

const getExamResult = (scores, requiredClasses) => {

  let arrayScores = Object.entries(scores);

  console.log(arrayScores)

 

  for (let i in arrayScores) {

    switch (arrayScores[i][1]) {

      case "A+" : 

      arrayScores[i][1] = 4.5;

      break;

      

      case "A" :

      arrayScores[i][1] = 4;

      break;

 

      case "B+" :

      arrayScores[i][1] = 3.5;

      break;

 

      case "B" :

      arrayScores[i][1] = 3;

      break;

 

      case "C+" :

      arrayScores[i][1] =2.5;

      break;

 

      case "C" :

      arrayScores[i][1] = 2;

      break;

 

      case "D+" :

      arrayScores[i][1] =1.5;

      break;

 

      case "D" :

      arrayScores[i][1] = 1;

      break;

 

      case "F" :

      arrayScores[i][1] = 0;

      break;

      

    }

  }

 

  console.log(arrayScores)

 

  

  let arrayScoresKey = []

  

  for (let i in arrayScores) {

    arrayScoresKey.push(arrayScores[i][0])

  }

 

  console.log(arrayScoresKey);

 

let newScores;

  

  for (let i in requiredClasses) {

    if (arrayScoresKey.includes(requiredClasses[i])) {

 

    } else {

      

      arrayScores.push([requiredClasses[i], 0]);

    

    }

  }

 

console.log(arrayScores);

  

const newObj = {};

arrayScores.forEach((key) => {

newObj[key[0]] = key[1]});

console.log(newObj);

 

  return newObj;

}

 

getExamResult(scores, requiredClasses);

 

 

 

key event!

• keydown
• keypress
• keyup

 

addEventListenr("keydown", (event) => {console.dir(event} );

이것을 통해 어떤 값들이 있는지 알 수 있다.

event.key 값은, 유저가 누른 키의 값이다 !

 

키보드의 키를 누르면 keydown 이벤트가 시작됩니다.

방금 누른 키를 놓으면 keyup 이벤트가 시작됩니다.

이 두 이벤트는 상호 작용하는 모든 키에서 작동합니다.

 

그리고, keypress 이벤트는 특별한 이벤트입니다. 

keypress 이벤트는 문자 (문자, 숫자 등)를 표시하는 키를 누를 때만 발생합니다.

문자 y와 같은 키를 눌렀다 놓으면 keydown, keypress 및 keyup 이벤트가 순서대로 실행

 

 

 

 

reduce. array.

 

arr.reduce(callback[, initialValue])

 

callback배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator 누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

 

currentValue처리할 현재 요소.

currentIndex (Optional) 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array (Optional) reduce()를 호출한 배열.

initialValue (Optional) callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

 

 

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

 

 

출처: https://ddorang-d.tistory.com/101 [도라미도라미:티스토리]

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce