JavaScript Replit - array methods 중 Assignment 포스팅입니다.
처음에 Arrow function이 헷갈려서 ES5 함수 표기법을 적용하여 풀어보았다.
1-1. 처음 작성한 코드
const arr = [100, 9, 30, 7];
const moreThan100 = arr.map(function (x) {
if (x >= 100) {
return true;
} else {
return false;
}
});
console.log(moreThan100);
console.log(typeof moreThan100);우선 map의 작동방식을 이해하기 위해 함수를 생각하지 않고 구글링을 통해 코드를 작성했다.
또 배열 arr을 미리 선언한 상태로 풀어보았다.
1-2. 결과
출력에는 성공했으나 타입이 'object'로 나왔다. (function이 출력되야 함)
이번에는 미리 선언해두었던 arr 배열을 지우고
console.log(moreThan100([100, 9, 30, 7])); 을 입력해보았다.
먹히지 않았다. 🤔
2-1. 두 번째 시도
const moreThan100 = function(nums) {
nums.map(function (x) {
if (x >= 100) {
return true;
} else {
return false;
}
})
}
console.log(typeof(moreThan100))
const result = moreThan100([100, 9, 30, 7]);
console.log(result);(배열 arr => nums로 변경)
배열 nums를 미리 선언하지 않고 인자로 받도록 설정했다.
그리고 typeof를 찍었을 때 object가 아닌 function이 나오도록
function(nums) {}를 추가했다.
2-2. 결과
type은 function으로 출력되었으나 result가 출력되지 않았다. 😧
3-1. 세 번째 시도
function moreThan100(nums) {
return nums.map(function (x) {
if (x >= 100) {
return true;
} else {
return false;
}
});
}
const result = moreThan100([100, 9, 30, 7]);
console.log(result);
console.log(typeof moreThan100);함수의 형식을 달리해서 다시 작성해보았다.
3-2. 결과
원하던 대로 출력되었다. 😀
4. ES6 버전의 Arrow Function으로 변경
const moreThan100 = nums =>
nums.map(x => {
if (x >= 100) {
return true;
} else {
return false;
}
});
console.log(typeof moreThan100);
console.log(moreThan100([100, 9, 30, 7]));5. Review
첫 번째 시도
우선 map 메서드에 익숙해지기 위해 구글링을 통해 코드를 작성해 보았다.
출력은 동일하게 나왔으나 type이 object로 나왔고 배열을 입력값으로 주었을 때 작동하지 않았다.
두 번째 시도
Replit 코드 작성란에 아래와 같이 함수의 기본 형식이 적혀있었다.
그래서 위 함수 형식을 유지하여 문제를 풀어야 하는구나 하고 생각했다.
Arrow Function이 아직 익숙하지 않아서 ES5 버전의 함수 표기법으로 작성한 뒤
나중에 Arrow Function으로 수정하자고 생각했다.
두 번째 작성했던 코드의 함수 형식이 Replit 코드 작성란에 적혀있던
ES6 버전의 Arrow Function과 일치하는 함수였다.
그러나 이상하게 배열을 인자로 주었을 때 'undefined'가 나왔다.
세 번째 시도
기존에 Replit 코드 작성란에 적혀 있던 함수 형식은 무시하고 함수의 형식을 변경해 보았다.
그랬더니 원하던 결과가 출력되었다.
미리 이 문제를 푸셨던 동기생 지형님의 코드를 봤을 때 기존 함수 형식이 바뀌어 있던 것을 보고
시도해본 것이었다.
그런데 아직도 두 번째 함수 형식에서는 출력값이 'undefined'가 뜨는건지 이해되지 않았다.
내일 멘토님께 질문해봐야겠다..
다시 코드를 찬찬히 보다가 두 번째 시도에서 안됐던 원인을 찾았다.
두 번째 코드는 함수를 변수에 담은 것이고, 세 번째 코드는 함수 자체에 이름을 설정하여 작성한 것이다.
결국 똑같은 코드인데 두 번째 코드에서 return을 작성해주지 않아 안됐었던 것이다.. 😅
번외
Arrow Function 작성법이 아직 많이 헷갈린다. 추후 다시 내용을 정리해서 포스팅해야겠다.
