JS 배열 함수

1. 배열의 내장 함수 활용

• map() 함수 메서드: 배열을 대상으로 반복문 (속도 빠름)
• filter() 함수 메서드: 배열을 대상으로 조건문

console.log([0, 1, 2, 3, 4, 5, 6].concat(7, 8, 9));
console.log([0, 1, 2, 3, 4, 5, 6].concat({name: "홍당무"}));
console.log([0, 1, 2, 3, 4, 5, 6].map(function(x){return x*2}));
console.log([0, 1, 2, 3, 4, 5, 6].map(x => x*2));

console.log([0, 1, 2, 3, 4, 5, 6].filter(function(x){return x%2 === 0}));
console.log([0, 1, 2, 3, 4, 5, 6].filter(x => x%2 == 0));

console.log([0, 1, 2, 3, 4, 5, 6].filter(() => false)); // [] : 배열 초기화시킨다
console.log([0, 1, 2, 3, 4, 5, 6].filter(() => true)); // [0, 1, 2, 3, 4, 5, 6]

실습 과제

map() 함수 메서드를 활용하여 기존 배열 데이터의 결과값을 제곱근으로 배열화시킴

const number1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.time("반복진행"); // 통과시키는 시간
const doubleNumber1 = number1.map(v => v*v);
console.timeEnd("반복진행"); // 통과시키는 시간
console.log(doubleNumber1); // [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]

실습 문제

• tel의 value 값인 번호의 좌측에 ‘010-‘를 추가하여 배열로 받아오기
• map() 함수 활용
• 1차 배열의 데이터들은 객체

const user1 = [
    {name: "홍길영", age: 25, kor: 95, eng: 80, tel: "2222-3333"},
    {name: "홍길일", age: 16, kor: 45, eng: 78, tel: "2233-3344"},
    {name: "홍길이", age: 37, kor: 82, eng: 75, tel: "3434-3434"},
    {name: "홍길삼", age: 30, kor: 76, eng: 94, tel: "4411-1112"}
];

const telModify1 = user1.map(function(v) {
    v.tel = "010-" + v.tel;
    return v;
});
console.log(telModify1);

const telModify2 = user1.map( v => {
    v.tel = `010 - ${v.tel}`;
    return v;
});
console.log(telModify2);

실습 문제

• map() 함수를 활용하여 국어와 영어의 total값을 구하라.

  {name: "홍길영", age: 25, kor: 95, eng: 80, tel: "2222-3333"}

const user1 = [
    {name: "홍길영", age: 25, kor: 95, eng: 80, tel: "2222-3333"},
    {name: "홍길일", age: 16, kor: 45, eng: 78, tel: "2233-3344"},
    {name: "홍길이", age: 37, kor: 82, eng: 75, tel: "3434-3434"},
    {name: "홍길삼", age: 30, kor: 76, eng: 94, tel: "4411-1112"}
];

const total = user1.map(v => {
    v.total = v.kor + v.eng;
    return v;
});
console.log(total);

---

REFERENCE
뷰(Vue.js) 프로그래밍 과정 _ 하이미디어 아카데미