240729 걷기반 수업

오늘은 배열메서드 총 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);