[TIL] 엘리스 SW 엔지니어트랙 2기 - Javascript (Week2,Day11)

엘리스 SW엔지니어 트랙 2기 DAY_11

📝 목차

• 오늘의 잡담
• 템플릿 리터럴
• map 
• 화살표
• forEach()
• reduce
• concat 

---

🎤  오늘의 잡담

지난주 addEventListener와 같이 많이 사용되는 친구들 (getElementById, querySelector) 등을 어느정도 이해하고 넘어왔다고 생각했는데, 오늘 또 보니 어떻게 쓰는지 여전히 헷갈리고 ~ 

scope 나오고 화살표 함수 나오고 this 나오고 뭐 나오고 나오고 .. 그래도 그나마 지난주까지는 이고잉님 수업을 따라갔다 생각했는데 이번엔 이고잉님 수업조차도 살짝 버겁다. 물론 코치님 수업은 한귀로 들어오고 한귀로 나감 (죄송ㅜㅜ)

 

---

✍️  템플릿 리터럴(template literal)

템플릿 리터럴(template literal)은 ES6에 도입된 문자열 표현 방식입니다. 이를 이용하면 문자열을 편리하게 작성할 수 있습니다.

템플릿 리터럴은 따옴표가 아닌 백틱(`)을 이용해 표현합니다. 그리고 문자열 중간에 삽입되는 변수를 ${} 기호로 넣어 코드의 가독성을 높입니다.

var learn = '자바스크립트';
var year = 3;

var sentence = `나는 ${learn}를 ${year}년째 공부중입니다.`;
console.log(sentence);

결과

🗺 map함수

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);

결과

➡️  화살표함수 

function 키워드를 생략하고 인자 블록(( ))과 본문 블록({ }) 사이에 =>를 표기해서 화살표 함수를 만듭니다.

화살표 함수로 기본 function에서  저렇게 쓰이는구나 봤다.

물론 아직 적응이 안됨.

//기존의 function
const x = function(x, y) {
   return x * y;
}

//화살표 함수를 썼을 때
const x = (x, y) => x * y;

 

🧑🏻‍💻  forEach() 함수

forEach() 함수를 사용하면 반복문의 순번과 배열의 크기를 따로 변수에 저장하는 과정을 생략할 수 있습니다.

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
  copy.push(items[i]);
}

// 이후
items.forEach(function(item){
  copy.push(item);
});


console.log(copy);

//결과 [ 'item1', 'item2', 'item3' ]

📉  reduce 함수

reduce()는 배열의 각 요소에 대해 주어진 함수를 실행한 후, 하나의 결과값을 반환합니다.

앞에서 학습한 map이 배열의 각 요소를 변형한다면, reduce는 배열 자체를 변형합니다.

const items = [0, 1, 2, 3, 4];

const Allitems = items.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

console.log(Allitems); //결과 10

const items = [0, 1, 2, 3, 4];
const Allitems = items.reduce( (prev, curr) => prev + curr );  //화살표함수 사용 시

console.log(Allitems); //결과 10

// 3. 초기값 '10'을 받았을 경우

const items = [0, 1, 2, 3, 4];

const Allitems = items.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);
console.log(Allitems); //결과 20

 

+보너스 reduce 함수 사용, 중첩함수 풀어헤치기

concat()이라는 메소드 같이 사용해준다.

 

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(accumulator, currentValue) {
    return accumulator.concat(currentValue);
  },
  []
);
// 펼친 결과: [0, 1, 2, 3, 4, 5]

//화살표함수로도 쌉가능

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  ( accumulator, currentValue ) => accumulator.concat(currentValue),
  []
);

 

*참고로 concat()은 배열 이어붙일 때 씀

//concat 예시
const alpha = ['a', 'b', 'c'];
const numeric = [1, 2, 3];

alpha.concat(numeric);
// 결과: ['a', 'b', 'c', 1, 2, 3]

 

오늘 겹겹이 있는 배열도 풀어헤치는 걸 풀어줬지만 내가 아직 이해를 못했음..