2021-08-26 TIL

Facts (사실, 객관)

• 벨로퍼드와 함께하는 모던자바스크립트 1장을 끝냈다.
• week3 과제를 제출했다.

Feelings (느낌, 주관)

• 과제를 어찌 어찌 해서 제출했다. 그렇게 잘 한 거 같지 않아 빨리 피드백을 받고 수정하고 싶다.
• JS 공부를 하고 있다. JS로 코테 준비를 하려 했지만 아직 부족한 부분이 느껴져 공부를 하고 시작하려 한다.

Findings (배운 점)

객체 구조 분해

• 객체 비구조화 할당을 사용하여 코드를 더 짧고 보기 좋게

function print(hero) {
  const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
    hero.actor
  } 입니다.`;
  console.log(text);
}

function print(hero) {
  const { alias, name, actor } = hero;
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}
// 파라미터 단계에서 비구조화 할당
function print({ alias, name, actor }) {
  const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
  console.log(text);
}

getter setter in ES6

• 사용자가 얻고싶은 정보에 대해 과정에 있는 내부적인 일을 감추기 위해.(캡슐화의 이점인 정보은닉)
• 변수 관계에 있어서, 일관성을 깨뜨리지 않기 위해.

class Time { 
  constructor(start, end) { 
    this._start = start; 
    this._end = end;
    this._duration = end - start;
  } 
  set start (newStart) { 
    this._start = newStart; 
    this._duration = this._end - this._start; 
  } 
  get start () { 
    return this._start; 
  } 
} 
const time = new Time(0, 20); 
time.start = 5; 
console.log(time.start);

forEach

• for문을 대체

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];

superheroes.forEach(hero => {
  console.log(hero);
});

map

• 배열 안의 각 원소를 변환 할 때 사용

const squared = array.map(n => n * n);
console.log(squared);  

shift, unshift

• 첫번째 원소 배열에서 추출/추가

const numbers = [10, 20, 30, 40];
const value = numbers.pop();
console.log(value);
console.log(numbers);

reduce

• 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환.
• 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Affirmation(자기 선언)

• 꾸준히 계속해서 노력하자!!