오늘은 배열메서드 총 5가지에 대해서 배워보았다.
.push()
.pop()
.forEach()
.map()
.filter()
1. push 메서드: 배열의 마지막에 새로운 요소를 추가한 후, 변경된 배열을 반환
2. pop 메서드: 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환 하거나 변경된 배열을 반환
const fruits = [30, 1, 2, 5, 40];
fruits.push(100); // 100을 끝에 넣기 -> [30, 1, 2, 5, 40, 100]
const pop = fruits.pop(); // 100을 빼내서(pop) 변수에 할당하기
console.log(pop); // 할당한 100을 console.log();에 찍어보기 -> 100
3. forEach 메서드
- 배열의 메서드이다.
- 이 배열 메서드는 매개변수(input)에 함수를 가진다.(매개변수로 들어오는 함수 = 콜백함수)
- 매개변수로 들어온 콜백함수는 또 매개변수(input)을 가진다.
- 그 매개변수에는 호출의 주체가 된 배열의 각 요소가 차례대로 할당된다.
- forEach는 returen을 하지 않는다.
const fruits = ["사과", "바나나", "키위"];
// 배열의 요소를 순회하면서 그대로 출력해보세요.
fruits.forEach(function (아무이름) {
console.log(아무이름);
});
// 예상 출력: 사과 바나나 키위
const testArr = ["윤창식", "최원장", "박가현", "김병연"];
// 배열의 이름을 빼내어 문장 속에 넣어서 출력해보세요.
testArr.forEach(function (name) {
console.log(`안녕하세요. ${name}님 만나서 반갑습니다.`);
});
// 예상 출력:
// 안녕하세요. 윤창식님 만나서 반갑습니다.
// 안녕하세요. 최원장님 만나서 반갑습니다.
// 안녕하세요. 박가현님 만나서 반갑습니다.
// 안녕하세요. 김병연님 만나서 반갑습니다.
const testArr = [
{
name: "홍길동",
age: 21,
},
{
name: "홍길순",
age: 23,
},
{
name: "김르탄",
age: 40,
},
];
// 나이가 30살 이상인 경우만 이름을 출력해보세요.
testArr.forEach(function (q) {
if (q.age >= 30) {
console.log(q.name);
}
});
// 예상 출려: 김르탄
4. map 메서드
- 원본 배열의 길이만큼 새로운 배열을 만들어내는 배열의 메서드이다.
- 만들어진 배열을 return한다.
const people = [
{
id: 1,
name: "홍길동",
age: 30,
},
{
id: 2,
name: "홍길순",
age: 15,
},
{
id: 3,
name: "김르탄",
age: 16,
},
];
// 배열 복사
const newPeople = people.map(function (person) {
const newPerson = {
id: person.id,
name: person.name,
age: person.age,
isAdult: person.age >= 20, // +새롭게 추가 (성인이면 true를 반환해줘!)
};
return newPerson;
});
console.log(newPeople);
// 예상 출력:
// [
// { id: 1, name: '홍길동', age: 30, isAdult: true },
// { id: 2, name: '홍길순', age: 15, isAdult: false },
// { id: 3, name: '김르탄', age: 16, isAdult: false }
// ]
const testArr = ["윤창식", "최원장", "김병연", "박가현"];
// 배열의 요소를 객체 하나하나로 만들어 새로운 배열을 만들어보세요.
const newArr = testArr.map(function (a) {
newTest = {
name: a,
job: "tutor",
};
return newTest;
});
console.log(newArr);
// 예상 출력:
// [
// { name: '윤창식', job: 'tutor' },
// { name: '최원장', job: 'tutor' },
// { name: '김병연', job: 'tutor' },
// { name: '박가현', job: 'tutor' }
// ]
5. filter 메서드
- 배열의 요소를 순회하면서 콜백함수를 사용하여 원하는 조건에 따라 필터링하는 메서드이다.
- 필터링 된 배열을 return한다.
const testArr = [30, 10, 25, 7];
// 배열의 숫자가 20이상인 숫자만 출력해보세요.
const newArr = testArr.filter(function (숫자) {
return 숫자 >= 20;
});
console.log(newArr); // 예상 출력: [30, 25]
const tutors = [
{
name: "윤창식",
job: "tutor",
},
{
name: "최원장",
job: "developer",
},
{
name: "김병연",
job: "tutor",
},
{
name: "박가현",
job: "tutor",
},
];
// jop이 "tutuor"인 사람만 출력해보세요.
const realTutors = tutors.filter(function (t) {
if (t.job === "tutor") {
return true;
} else {
return false;
}
return t;
});
console.log(realTutors);
// 예상 출력:
// [
// { name: '윤창식', job: 'tutor' },
// { name: '김병연', job: 'tutor' },
// { name: '박가현', job: 'tutor' }
// ]
더 간단하게 쓰려면 아래의 코드를 보면 된다.
const realTutors = tutors.filter(function (a) {
// console.log(a);
return a.job === "tutor";
});
console.log(realTutors);
'수준별 분반' 카테고리의 다른 글
240731 걷기반 수업 (0) | 2024.07.31 |
---|---|
240730 걷기반 실습 (0) | 2024.07.30 |
240726 걷기반 실습 (1) | 2024.07.26 |
조건문과 반복문 문제 풀어보기 (2) | 2024.07.25 |
JavaScript 문법 걷기반 실습(백틱 사용법, 깃허브 처음연결코드) (4) | 2024.07.24 |