안녕하세요 오늘도 자스 연습을 해보도록 하겠습니다
JavaScript 30
Build 30 things with vanilla JS in 30 days with 30 tutorials
javascript30.com
목차 바로가기
| 1. 오늘의 과제는? |
| 2. 내가 만든 파일 |
| 3. finished파일 리뷰 |
| 4. 배운 점 & 느낀 점 |
1. 오늘의 과제는?
오늘은 몇가지 데이터를 가지고 자바스크립트 배열 메서드에 대해 알아보게 된다.
시작파일은 이러하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Array Cardio 💪💪</title>
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
<script>
// ## Array Cardio Day 2
const people = [
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
{ name: 'Lux', year: 2015 }
];
const comments = [
{ text: 'Love this!', id: 523423 },
{ text: 'Super good', id: 823423 },
{ text: 'You are the best', id: 2039842 },
{ text: 'Ramen is my fav food ever', id: 123523 },
{ text: 'Nice Nice Nice!', id: 542328 }
];
// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?
// Array.prototype.every() // is everyone 19 or older?
// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
// find the comment with the ID of 823423
// Array.prototype.findIndex()
// Find the comment with this ID
// delete the comment with the ID of 823423
</script>
</body>
</html>주석을 보시고 해당 과제를 수행하시면 됩니다.
2. 내가 만든 파일
// Some and Every Checks
// Array.prototype.some() // is at least one person 19 or older?
const isAdult = people.some(person => {
const currentYear = (new Date()).getFullYear();
if(currentYear - person.year >= 19) {
return true;
}
});
console.log({isAdult});먼저 some() 메서드입니다. some을 통해서 배열의 요소들 중에 최소한 하나가 19살이 넘는지 알 수 있었습니다.
// Array.prototype.every() // is everyone 19 or older?
const everyAdult = people.every(person => {
const currentYear = (new Date()).getFullYear();
if(currentYear - person.year >= 19) {
return true;
}
});
console.log({everyAdult});every() 메서드도 위와 거의 동일합니다. 이건 배열 요소들 모두가 해당 함수를 통과해야 true를 반환합니다.
// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
//filter와 비슷하지만 당신이 찾는 단 하나만 반환한다.
// find the comment with the ID of 823423
const findId = comments.find(comment => comment.id === 823423);
console.log(findId);find() 메서드를 통해서 해당 아이디값을 가지고 있는 요소를 반환해서 출력할 수 있었습니다.
다음은 findIndex() 함수인데 이건 다음 장에서 설명하도록 하겠습니다.
3. finished파일 리뷰
// Array.prototype.findIndex()
// Find the comment with this ID
// delete the comment with the ID of 823423
const findIndex = comments.findIndex(comment => comment.id === 823423);
console.log(comments.slice(0, findIndex));
console.log(comments.slice(findIndex + 1));
const newComments = [
...comments.slice(0, findIndex),
...comments.slice(findIndex + 1)
];
console.log(newComments);여기서는 세 가지 중요한 포인트가 있습니다.
1. findIndex() 메서드
2. slice() 메서드
3. ... spread 연산자
findIndex를 통해서 해당 아이디값을 가진 요소의 Index값을 저장하고
slice() 메서드를 통해서 findIndex로 찾은 요소를 제외한 배열을 출력하게 됩니다.
...comments.slice(0, findIndex),
...comments.slice(findIndex + 1)
첫번째는 0번째 부터 findIndex 개수의 요소를 삭제하고 그것을 반환합니다.
두번째는 findIndex + 1 부터 마지막 까지를 반환합니다.
이 둘을 ... 연산자로 0개 이상의 요소로 확장했고 그것을 newComments 배열에 저장했습니다.
4. 배운 점 & 느낀 점
| some() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some 배열안의 최소 하나 이상의 요소가 주어진 콜백함수를 통과하는지 여부를 테스트한다. 통과 시 true반환 // Arrow function some((element) => { ... } ) some((element, index) => { ... } ) some((element, index, array) => { ... } ) |
| every() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every 배열내의 모든 요소가 주어진 콜백함수를 통과하는지 여부를 테스트한다. 통과 시 true반환 // Arrow function every((element) => { ... } ) every((element, index) => { ... } ) every((element, index, array) => { ... } ) |
| find() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find filter()와 비슷한 메서드이다. 배열에서 주어진 함수를 통과하는 제일 처음 요소를 반환한다. // Arrow function find((element) => { ... } ) find((element, index) => { ... } ) find((element, index, array) => { ... } ) |
| findIndex() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex 배열에서 주어진 함수를 통과하는 제일 처음 요소의 Index를 반환한다. 반면에, 찾을 수 없다면 -1을 반환한다. // Arrow function findIndex((element) => { ... } ) findIndex((element, index) => { ... } ) findIndex((element, index, array) => { ... } ) |
| spread ... - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax 한국어로 전개구문 배열이나 문자열 등을 0개 이상의 인수나 요소로 확장한다. 몇 가지 예제 function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args); 🔽 function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args); |
| splice() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice 배열의 요소들을 제거하거나 대체하면서 새로운 요소를 추가 문법 splice(start) splice(start, deleteCount) splice(start, deleteCount, item1) splice(start, deleteCount, item1, item2, itemN) start는 배열 change가 시작되는 곳의 Index deleteCount는 start로 부터 제거해야하는 요소의 수를 지칭 item1, item2, ... 는 배열에 추가할 요소들. 따로 이러한 요소를 특정하지 않으면 splice는 배열의 요소를 제거하는데만 쓰이게 된다. 반환값 제거된 요소들이 포함된 배열을 반환한다. 예제1 let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] let removed = myFish.splice(3, 1) // myFish is ["angel", "clown", "drum", "sturgeon"] // removed is ["mandarin"] 예제2 let myFish = ['angel', 'clown', 'drum', 'sturgeon'] let removed = myFish.splice(2, 1, 'trumpet') // myFish is ["angel", "clown", "trumpet", "sturgeon"] // removed is ["drum"] |
여기까지 입니다
읽어주셔서 감사하고 좋은 하루 보내시길 바랍니다.
