다시 시작하는 자바스크립트 - 배열 퀴즈

 

헷갈리는 것들만 따로 정리할 예정.

deep dive 책을 함께 공부함.

 

 

 

- 퀴즈 1

 

주어진 배열 안의 딸기 아이템을 키위로 교체하는 함수를 만들기
단, 주어진 배열을 수정하지 않도록!
- input: ['🍌', '🍓', '🍇', '🍓']
- output: [ '🍌', '🥝', '🍇', '🥝' ]

 

function replace(array) {
  const replaced = Array.from(array);
  // 기존의 배열을 수정하지 않아야 하므로 새로운 배열을 생성해야 함.
  
  for (let i = 0; i < replaced.length; i++) {
    if(replaced[i] === "🍓"){
      replaced[i] = "🥝";
    }
  }
  return replaced;
}

const array = ['🍌', '🍓', '🍇', '🍓']
let result = replace(array);

console.log(array);
// ["🍌", "🍓", "🍇", "🍓"]
console.log(result);
// [ "🍌", "🥝", "🍇", "🥝" ]

 

여기서 한 번 재사용성을 높여보자.

 

function replace(array, from, to) {
  const replaced = Array.from(array);

  for(let i = 0; i < replaced.length; i++) {
    if(replaced[i] === from) {
      replaced[i] = to;
    }
  }
  return replaced;
}

const array = ['🍌', '🍉 ', '🍇', '🍉 🍋']
let result = replace(array, "🍉", "🍋");

console.log(array);
// ["🍌", "🍉", "🍇", "🍉"]
console.log(result);
// [ "🍌", "🍋", "🍇", "🍋" ]

 

- 퀴즈 2

 

배열과 특정한 요소를 전달받아, 배열 안에 그 요소가 몇 개나 있는지 카운트하는 함수 만들기
- input : [ '🍌', '🥝', '🍇', '🥝' ], '🥝'
- output : 2

 

function counter(array, item) {
  let count = 0;

  for(let i = 0; i < array.length; i++) {
    if(array[i] === item) {
      count++;
    }
  }
  return count;
}

const array2 = [ '🍌', '🥝', '🍇', '🥝' ];
result = counter(array2, "🥝");

console.log(array2);
// [ '🍌', '🥝', '🍇', '🥝' ]
console.log(result);
// 2

 

다른 방식으로도 풀어보고 싶어졌다.

 

function counter(array, item) {
  let count = 0;

  for (let i = 0; i < array.length; i++) {
    if(array[i].includes(item)) {
      count++;
    }
  }
  return count;
}

const array2 = [ '🍌', '🥝', '🍇', '🥝' ];
result = counter(array2, "🥝");

console.log(array2);
// [ '🍌', '🥝', '🍇', '🥝' ]
console.log(result);
// 2

 

하나 더...^.^

썼다... 배열 고차함수...:)

 

function counter(array, item) {
  return array.reduce((sum, fruit) => {
    if(fruit === item){
      sum++;
    }
    return sum;
  }, 0);
}

const array2 = [ '🍌', '🥝', '🍇', '🥝' ];
result = counter(array2, "🥝");

console.log(array2);
// [ '🍌', '🥝', '🍇', '🥝' ]
console.log(result);
// 2

 

- 퀴즈 3

 

배열1, 배열2 두 개의 배열을 전달 받아, 배열1 아이템 중 배열2에 존재하는 아이템만 담고 있는 배열 반환
- input : [ '🍌', '🥝', '🍇' ], [ '🍌', '🍓', '🍇', '🍓' ]
- output : [ '🍌', '🍇' ]

 

function match(array1, array2) {
  const emptyArr = [];

  for (let i = 0; i < array1.length; i++) {
    for (let j = 0; j < array2.length; j++) {
      if(array1[i] === array2[j]) {
        emptyArr.push(array1[i]);
      }
    }
  }
  return emptyArr;
}

const array3 = ["🍌", "🥝", "🍇"];
const array4 = ["🍌", "🍓", "🍇", "🍓"];

result = match(array3, array4);
console.log(array3, array4);
// [ '🍌', '🥝', '🍇' ] [ '🍌', '🍓', '🍇', '🍓' ]
console.log(result);
// [ '🍌', '🍇' ]

 

이것도 식을 조금 더 간소화 시킬 수 있겠다는 생각이 듦.

method를 많이 알게 되니 생각보다 코드 짜는 게 너무 재밌다...ㅠ.ㅠ

이래서 다들 코테를 열심히 푸는 건가? (아님)

 

function match(array1, array2) {
  const emptyArr = [];

  for (let i = 0; i < array1.length; i++) {
    if(array2.includes(array1[i])) {
      emptyArr.push(array1[i]);
    }
  }
  return emptyArr;
}

result = match(array3, array4);
console.log(array3, array4);
// [ '🍌', '🥝', '🍇' ] [ '🍌', '🍓', '🍇', '🍓' ]
console.log(result);
// [ '🍌', '🍇' ]

 

다 풀고나니 느낀점...

고차함수가 존재한다는 것에 참으로 감사합니다...

배열 메소드로만 문제 풀다가는 눈이 빠질 것 같다