Coding (164)

06
27

1. map을 이용한 객체의 알맞은 키값을 수정하여 원래 객체를 리턴하기.

  • 고차 함수 안에서 원하는 데이터를 가져와 알맞게 수정한 후에 다시 리턴하여 값을 수정하게 된다.
  • 키값이 배열인 데이터를 받아서 더해 평균을 구해 다시 할당한 후에 수정된 객체를 리턴할 수 있다.
  • 아래의 예시 문제를 볼 수 있다.
  • 학생들의 이름(name)과 성적(grades)을 가진 객체들을 입력받아 성적을 평균으로 바꿔서 리턴한다.
function studentAvgGrades(students) {
  students.map(students => { // 모든 학생들의 정보. 즉, 객체안의 키들의 값을 수정하기 위해 map 으로 모든 키를 선택한다.
    let sumGrades = students.grades.reduce((acc, cur) => acc + cur) // 안의 성적들을 모두 더하기 위해 성적을 뽑아 reduce로 또 더한다.
    let avgGrades = sumGrades / students.grades.length // 다 더해준 성적들을 평균으로 만들기 위해 길이(더한 성적의 수)로 나눠준다.
        students.grades = avgGrades; // 학생들의 성적 배열이었던 것을 구해준 평균으로 할당한다.
  })
    return students; // 할당을 다시 해준 학생들의 정보가 담긴 객체를 리턴한다.
}
  • 이처럼, 내부에 map 으로 객체의 값을 수정하기 위한 준비를 하고, 안에서 데이터를 가공하여 다시 할당하였다.
  • 이중 고차 함수와 함께 다양한 방법으로 데이터를 가공할 수 있음을 알게 되었다!
  • 조금 더 익숙하게 할 수 있도록 연습하면 좋겠다.
COMMENT
 
06
27

1. 이중고차함수?

  • 이중 반복문처럼, 고차 함수 안에 고차 함수를 또 사용해서 내가 원하는 객체 안의 데이터까지 접근하여 수정하는 방법.
  • 아마 원래 이름은 어떻게 표현하는지 모르겠다. 하지만 일단 나는 이렇게 부른다.
  • 아래의 예시 문제를 보면 알 수 있다.
  • 아래의 arr는 2차원 배열이다. 즉, 배열 안에 배열이 또 있다.
  • 배열을 입력받을 때, 그 안의 2차원 배열에는 여러 가지 타입의 데이터가 있고, 그중 number 타입만 받아서 모두 더한 값을 리턴한다.
function arrayInArray(arr) {
  let onlyNum = arr.map(arr => arr.filter(newArr => typeof(newArr) === 'number')) 
  // map으로 모든 배열을 순회하면서 그 안에 타입이 number 인 데이터를 가진배열만을 얻는다.
  let sumObj = onlyNum.reduce((acc, cur) => acc.concat(cur))
  // 나온 배열을 모두 합쳐서 하나의 배열로 만든다.
  let result = sumObj.reduce((acc, cur) => acc + cur, 0)
  // 배열안의 number 을 모두 더해준다.
  return result;
}
  • 이처럼 map과 filter 두 가지 고차 함수를 사용하여 원하는 데이터를 얻을 수 있었다.
  • 다른 경우도 있을 수 있지만, 가장 많이 같이 사용할 수 있는 것은 map과 filter이다.

갑자기 깨달았다! 어? 하고 생각해 보니 원하는 바와 같이 작동하고 있었다!
역시 console.log를 어떻게 어디서 사용하는지를 보면 이해에 도움이 많이 된다!
더 자주 사용해서 응용력을 올리자.

COMMENT
 
06
26
본 내용은 우분투 기준으로 정리된다. 왜? 내가 우분투라서...맥북으로 바꾸면 다시 정리 할 것이다.
하지만 그것이 언제가 될지... 하지만 대부분 Ctrl 이나 Alt 키를 맥의 커멘드 키로 바꿔주면 대충 맞는듯 하다.

1. Command Palette

  • 커멘드 : Ctrl + P
  • 파일 이름만 치면 왼쪽의 네비게이션창에서 찾을 필요 없이 바로 열 수 있다. 자동완성도 된다!

2. Toggle Sidebar

  • 커멘드 : Ctrl + B
  • 왼쪽의 창을 껏다 켰다 한다. Ctrl + `(백틱이다) 은 아래의 터미널 창을 껐다 켰다 한다.

3. Beginning & End of file

  • 커멘드 : Ctrl + Home || Ctrl + End
  • 파일의 제일 처음과 제일 마지막으로 한번에 이동한다.
  • Ctrl 빼고 그냥 Home || End 버튼은 행의 가장 처음과 가장 뒤로 커서를 옮긴다.
  • Shift 를 누르고 움직이면 전부 선택도 가능하다.

4. Move Word

  • 커멘드 : Ctrl + → || ←
  • 단어별로 이동된다.
  • 물론 Shift 가능

5. Move line down & up

  • 커멘드 : Alt + ↑ || ↓
  • 커서가 있는 행을 옮긴다.
  • 블럭 자체를 선택해서 옮기는 것도 가능하다.

6. Copy line down & up

  • 커멘드 : Shift + Alt + ↑ || ↓
  • 커서가 있는 행을 복사해서 위나 아래에 행에 넣는다.
  • 역시 블럭도 가능

7. Multi Selection

  • 커멘드 : Ctrl + D
  • 선택된 단어와 똑같은 단어를 선택해 준다.
  • 계속 누르면 파일 안의 모든 같은 단어를 다 선택해서 다 동시에 수정할 수 도 있다.

8. Undo last Cursor

  • 커멘드 : Ctrl + U
  • 이 전의 커서의 위치로 돌아간다.

9. Insert cursor

  • 커멘드 : Alt + Click
  • 커서를 여러곳에 두어 한번에 수정 할 수 있게 만든다.
  • Shift, Shift + Alt + 드레그, Shift +Alt + I 키로 해당 행의 가장 끝에 커서를 만들 수 있다.

10. 모든 단축키를 확인하자.

  • 상단 상태 바에서 => Code(File) => Preferences => Keyboard Shortcuts
  • 필요한거 찾아서 쓰면 된다. 하지만 앞의 9가지만으로도 충분히 강력할 것이다!
COMMENT
 
06
24

1. getElementsLessThan100AtProperty

  • lessThan100 함수는 number 를 인자로 받으며 number < 100 을 리턴한다.
  • getElementsLessThan100AtProperty 함수는 인자로 obj(객체) 와 property(string) 을 받는다.
  • 이때, obj의 키가 property 와 같으면, 그 중 number 타입의 요소만 getElementsLessThan100AtProperty 함수를
    사용하여 배열로 리턴해야 한다.
function lessThan100(number) {
  if(typeof(number) === 'number') { // number 라고 했다고, 모두 number 타입만 나오는 것은 아니기 때문에 타입이 number인 조건을 넣는다.
    return number < 100;
  }
}
function getElementsLessThan100AtProperty(obj, property) {
  if(!Array.isArray(obj[property])) { // 배열만을 리턴해야 하기 때문에, 배열이 아닌 경우는 제외한다.
    return [];
  } else {
    let result = obj[property].filter(lessThan100) // filter 로 obj 중에 키가 property 인 것 중에, lessThan100 함수를 사용한다.
    return result;
  }
}
  • 처음에는 obj의 키를 얻어 내기 위해 닷 노테이션을 사용했지만 변수로 property 를 비교 해야 하기 때문에 브라켓 노테이션으로 바꿨다.
  • 이후, lessThan100 함수에서 타입이 맞지 않는 경우를 제외 하기 위해 number 타입이 아니면 빼버렸다.
  • 실행 결과를 계속 실행해 가면서 점점 상황을 줄여 나가서 풀 수 있었다.
COMMENT