some 배열 매서드 함수를 공부하던 중.. true / false를 나오게 코드를 짰는데, 자꾸 안되서 console.log를 찍어가며 테스트를 해보니..
Unreachable code.
이 뜨는 것이다 ;;
const handleSome = () => {
const newSome = array.some((item) => array.includes(query));
console.log(newSome);
if (newSome === true) {
console.log(newSome);
console.log(newSome);
return setResult("true");
} else {
console.log(newSome);
return setResult("false");
}
console.log(newSome);
};
이게 문제의 코드였는데, handleSome함수 안에 if{}else{}문이 있었고, 함수가 실행될 때의 true, false 두가지 경우의 수로 어떻게든 return할 수 있는 범위를 설정해 놨기 때문에, else 밑에 있는 console은 어느 경우든 절대 찍히지 않고, else 밑의 return 위의 console은 찍힐 가능성도 있기에
Unreachable code가 찍히지 않은 것이다.
함수는 무조건 return값이 출력되면 종료되는걸 잊지 말자!!!
이 기본을 지킨다면 console을 어디에 찍어야하는지 감이 제대로 올 것이다
그리고 some 매서드가 제대로 실행되지 않았는데, 원인을 찾아보자면
const newSome = array.some((item) => array.includes(query));
이 부분인데, some 뒤 콜백함수의 인자에 item을 넣어놨으면서 return 값엔 array.includes(query)가 문제였다.
some의 첫번째 인자는 element 즉, 배열의 values들을 가리키고 있으므로, 그 해당 배열 값이 query(여기서 query는 input 입력 value)에 포함되나 안되나를 확인했어야 하는데, array에서 찾았던 것이다.
find든 some이든 배열을 순회하면서 값을 찾는 것이기 때문에 꼭 콜백함수 인자로 들어간 item의 includes를 리턴해야만 한다.
// const newSome = array.some((item) => item.includes(query));
// const newSome = array.some(() => array.includes(query)); - 다 false
// const newSome = array.some((item) => array.includes(query)); - 다 false
const newFind = array.find((item) => item.includes(query));
// const newFind = array.find((item) => array.includes(query)); - 결과값 안나옴(undefined)
// const newFind = array.find(() => array.includes(query)); - undefined / 결과값 안나옴
위의 다양한 시행착오를 겪었었는데 사실 item을 콜백함수의 인자로 넣었으면, item.includes도 당연한건 알았지만 왜 array. 이라던가 ()괄호를 비우면 안되는지에 대해서도, 냉정하게 따지만 매서드 함수가 콜백함수의 인자를 위해 순회하는 매서드이기 때문에 저 규칙을 내 맘대로 벗어나면 안된다!
이정도로 생각하면 될 것 같다
이런 모든 경우의 수를 줄여나가기 위해 튜터님께 질문을 많이 했는데,
너무 나의 머리에 있는 내용을 장황하게 설명만 했는데, 이미 정답과 많은 시행착오를 겪으신 튜터님은 질문의 요점을 듣기도 전에 많은 나의 가설을 듣다보니 요점을 파악하기 어려울 수 있으니, 꼭 궁금한 문장을 일목정연하게 물어보자!!!!
