1015 TIL

kimhr08·2021년 10월 15일
0

자바스크립트 독학

목록 보기
32/44

모르는 문제 많이 보고 많이 물어보기

문제 1

// 아래 함수를 작성해주세요.
function totalIngredients() {
  let result = pasta.concat(pizza); // ['tomato', 'basil', 'onion','chicken','tomato', 'cheese', 'onion','olive','beef']
  let newResult = result.filter((x, index) =>
    result.indexOf(x) === index);
// 중복되는 요소가 있어도 맨 앞에 있는 요소 하나만 가져온다.
  return newResult
}

console.log(totalIngredients())

코드해석:
indexOf는 element를 넣어주면 배열에 해당 element가 존재하는 제일 맨 앞의 인덱스를 반환해주는건데
토마토가 뒤에 또 있어도 앞에 있는 토마토의 인덱스 0만 반환이 된다.
x에는 tomato, onion ~ 값이 들어가게 되는거고,
들어온 x값을 indexOf에 넣었기 때문에 tomato가 0에 있는지 1에 있는지를 알 수 있고 그게 지금 자기 자신의 위치와 다르게 나오면 중복값이 있다고 판단해서 배열에 넣지않고 빼는 로직이다.
x의 배열 안에 있는 값들이 하나씩 들어오고 x에 있던 양파(2)를 index(2)랑 같은지 판단해고, 같아서 패스하는데
뒤에 오는 양파의 index는 6이고, indexOf('양파')의 값이 2인거라서 둘이 맞지 않아서 중복을 빼버린다.
indexOf는 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다.
filter 내부에 이제 사용자가 자기가 원하는 로직을 작성할 수 있는데 [이제 6번째 있는 양파를 검사할 때는 indexOf('양파')는 2인데 indexOf는 6이니까 다른 값이고] 이런 이유로 값이 중복되어있다고 판단해서 거르는 것이다.

result.filter((x, index) =>
result.indexOf(x) === index
이렇게 쓰면 중복 제거가 된다는 걸 암기하자.

function totalIngredients () {

  let result = pasta.concat(pizza);

  let newResult = [...new Set(result)];

  return newResult;

---->

  return [...new Set(pasta.concat(pizza))];

}

[...new Set( )] : 중복된 값을 제거 하고 싶을 때 사용

문제 2

시장을 봐왔는데 바구니를 보니 곰팡이가 피어있습니다.

바구니에서 곰팡이를 제거하는 함수를 작성해주세요!

let basket = [['양파','곰팡이'],['곰팡이','빵','딸기잼'],['귤','곰팡이','사과']];

function removeGerm(arr) {
  // 여기에 코드를 작성해주세요!
  for(let i = 0; i < arr.length; i++){
    for(let j = 0; j <= arr[i].length; j++){
      if(arr[i][j] === '곰팡이'){
        arr[i].splice(j, 1);
        j--;
      }
    }
  }

  return arr;
}

console.log(removeGerm(basket));

코드해석:
arr는 [['양파','곰팡이'],['곰팡이','빵','딸기잼'],['귤','곰팡이','사과']] 다.

arr[0] = ['양파','곰팡이']
arr[1] = ['곰팡이','빵','딸기잼']
arr[2] = ['귤','곰팡이','사과']
arr 배열을 0,1,2 인덱스로 값을 꺼내면 저렇게 나온다.
arr가 배열이 3개니까 index로 0,1,2 다. 그래서 .length의 길이는 3이 되는 것이다.
그래서 for(let i = 0; i < arr.length; i++) 에서 i는 0,1,2가 되는것.
따라서 첫번째 반복문으로 ['양파','곰팡이']를 꺼내서 그것의 길이(2)만큼 반복하면서 꺼내면 양파가 꺼내지고 그 다음에 곰팡이가 꺼내지는데, 여기서 곰팡이라는 문자일 경우에는 이제 배열에서 삭제하는 코드이다.

i가 0일때 j가 0,1 돌고
i가 1일때 j가 0,1,2 돌고
i가 2일때 j가 0,1,2 도는건데
i가 0일때는 양파랑 곰팡이 2개 밖에 없으니까 길이가 2이다. 그래서 i에 따라서 j가 0,1 일수도 있고 0,1,2 일수도 있는 것

j--를 주는 이유는

만약에 마지막에 [귤,곰팡이,곰팡이,사과] 라고 배열이 나와있으면
j = 0 => 귤이니까 삭제 안됨
j = 1 => 곰팡이니까 삭제
[귤, 곰팡이, 사과] 이렇게 배열이 조정됨.
근데 여기서 곰팡이가 j = 1 위치에 와있는데. 이미 j = 1 위치를 검사한 상태이다.
따라서 곰팡이를 없앤 곳이 1인데 j++로 인해서 곰팡이를 발견하지 못하고 2로 갈 위기에 처했고 그렇다면 두번째 곰팡이를 없애지 못할테니까 j--를 해서 곰팡이를 없애야하는 1 로 다시 옮긴다는 뜻

profile
프론트엔드 개발자를 꿈꾸는 도화지 위를 달리는 여자

0개의 댓글