14일차 - 2022.03.14

오늘 공부한 내용 요약

어제 마무리하지 못했던 퀴즈를 마무리해보겠다.

< 퀴즈 >

1~100까지 숫자가 들어있는 배열을 생성한 후 map을 사용해 짝수만 담긴 배열을 얻어라.

1~100 숫자가 들어있는 배열 생성 방법 중 1번이였던 arr.push를 이용하고

let arr1 = [];

for (let i = 1; i <101; i++) {
  arr1.push(i);
}

이제 map을 사용해 짝수만 담길 배열을 얻어보자

1) filter()이용

let arr1 = [];

for (let i = 100; i > 0; i--) {
  arr1.unshift(i);
}


let arr2 = arr1.filter( function(n) {
  if(n % 2 == 0) {
    return n;
  }
});

alert(arr2);   // 2,4,6...100

어제 풀이했던 fillter 활용방법이다.

이제 map()을 이용할 수 있게 고민해보았다. 그 결과 효율적으로 보이진 않지만 답을 구할 수 있는 방법을 찾을 수 있었다.

2) map()과 filter() 이용

let arr2 = arr1.map(function(n) {
  if(n%2 == 0) {
    return n; 
  }
});
  
let arr3 = arr2.filter(function(n) {
  return (n !== undefined);
});

alert(arr3);            // 2,4,6...100

map을 활용해서 답을 구했으나 다른 방법도 있을까 공부했던 부분들을 돌아보다가 다른 방법을 발견했다.

3) reduce 이용

let arr1 = [];

for (let i = 1;i < 101; i++) {
 arr1.push(i);
}

let arr2 = arr1.reduce((a,b) => {
  if (b % 2==0) a.push(b);
  return a;
},[]);

alert(arr2);				// 2,4,6...100

map과 forEach를 사용해도 가능한지 모르겠지만 구현해보는데 실패했다

---

( 모던 JavaScript 튜토리얼 학습 )

1. new function 문법

함수 표현식과 함수 선언문 외에 함수를 만드는 또하나의 방법
(인수를 한꺼번에 모아 전달 가능한 방법)

• 문법

let func = new Function ([arg1, arg2, ...argN], functionBody

functionBody = 함수 본문

• 아래 3개는 동일

new Function('a', 'b', 'return a + b'); // 기본 문법
new Function('a,b', 'return a + b'); // 쉼표로 구분
new Function('a , b', 'return a + b'); // 쉼표와 공백으로 구분

• 기존의 사용법과 new function을 사용한 방법의 큰 차이점은 런타임에 받은 문자열을 사용할수 있다는 점이다.
  어떤 문자열도 함수로 가능
  전달받은 문자열로 새로운 함수를 만들고 이를 실행하는 것도 가능합니다.

• 클로저
  New function 함수의 경우에는 함수의 [[Environment]] 프로퍼티가 현재 렉시컬 환경이 아닌 전역 렉시컬 환경을 참조하게 되고,
  new Function을 이용해 만든 함수는 외부 변수에 접근할 수 없으며 오직 전역 변수에만 접근할 수 있습니다.

function getFunc() {
  let value = "test";

  let func = new Function('alert(value)');

  return func;
}

getFunc()(); 

• 실무에서 쓰인다고 하는데 주의할 점은 이렇게 만들어진 함수가 기존 스크립트와 문제없이 상호작용 되어야 한다는 점이다.

참고 사이트

reduce 활용

코어 자바스크립트

---

위의 내용은 공부중 본인이 이해한 내용으로 몇몇 틀린 내용이 있을 수 있습니다.
회독중 발견시 수정하겠습니다