본문 바로가기

FrontEnd/Javascript

JS 유용한 배열 메서드 정리. forEach, map, reduce, find, filter 등등

// forEach는 map과는 다르게 반환값이 없음. 따라서 return해도 undefined가 나옴.
let answer=[3,2,1,4];
let attempt=[1,2,3,4];
let strike=0;
let ball=0;

for(let i=0;i<attempt.length;++i){
    let idx=answer.indexOf(attempt[i])
    if(idx>-1){
        if(idx==i){
         strike+=1;
         continue;  
        }
        ball+=1;
    }
}

attempt.forEach((value, idx)=>{
    let index=answer.indexOf(value);
    if(index>-1){
        if(idx==index){
           strike+=1;
        }
        else{
            ball+=1;
        }
    }
});
let arr2=[1,2,3,4,5];
/*
아래 세 표현식은 모두 같은 표현식이다. 주의할 것은 중괄호와 return문이 붙어져서 나오면 생략할 수 있다는 것이다
*/
// let result=arr2.reduce((acc,cur)=>acc+cur);
// let result=arr2.reduce((acc,cur)=>{return acc+cur});
// let result=arr2.reduce((acc,cur)=>{acc+=cur; return acc});
// console.log("result: "+result)//15

console.log(result);
// 배열의 유용한 함수정리. map, reduce

//map은 기본적으로 아래와 같이 반환값이 있다. 재밌게도 return을 통해 나오는 것이 배열의 각 인자에 대응하는 반환값이다. 이 인자들이 합쳐져서 결과적으로는 map은 새로운 배열을 반환한다.
let arr=[1,3,5,7];
let newArray=arr.map((value,index)=>{
  console.log(value, index);
  return value+1;
});
console.log(arr); //[1,3,5,7]
console.log(newArray); //[2,4,6,8]
 
let userList=[{name:"mike", age:30}, {name: "tom", age:10}, {name: "kile", age:15}, {name:"susan",age:32},{name:"steve",age:43}];
let result2=userList.map((value, idx)=>{
  return Object.assign({}, value,{isAdult: value.age>19, idx:idx});
});
//위에서 중괄호와 return이 붙여져 사용되었으므로 간단히 아래와 같이 표현가능
/*
let result2=userList.map((value, idx)=>Object.assign({}, value,{isAdult: value.age>19, idx:idx}));
  */
 

console.log(result2);
console.log(userList);//기존의 userList는 변경되지 않았음
let arr2=[1,2,3,4,5];
/*
아래 세 표현식은 모두 같은 표현식이다. 주의할 것은 중괄호와 return문이 붙어져서 나오면 생략할 수 있다는 것이다
*/
// let result=arr2.reduce((acc, cur)=>acc+cur);
// let result=arr2.reduce((acc, cur)=>{return acc+cur});
// let result=arr2.reduce((acc, cur)=>{acc+=cur; return acc});
// console.log("result: "+result)//15

console.log(result);
        

let userList=[{name:"mike", age:30}, {name: "tom", age:10}, {name: "kile", age:15}, {name:"susan",age:32},{name:"steve",age:43}];
//reduce를 사용하여 성인만 출력하기.(아래와 같이 reduce는 반환값을 가지고 초기값도 가질수 있다. 필요한 객체들만을 모아주기 위해 빈배열을 초기값으로 두었다)
//만약 return 문이 없다면 돌아는 가지만 원하는 것을 얻지 못한다. 초기값이 없어도 돌아는 가지만 원하는 것을 얻지 못한다.
let result2=userList.reduce((accu, cur)=>{
  if(cur.age>19){
    accu.push(cur);
  }
  return accu;
},[]);

console.log(result2);
  /*
[
  { name: 'mike', age: 30 },
  { name: 'susan', age: 32 },
  { name: 'steve', age: 43 }
]
   */
 
//배열을 객체로 바꾸는데 사용될 수 있는는 reduce
//경우에 따라 return 문을 생략할 수도 있지만 여기서는 중괄호와 return 이 떨어져 있으므로 생략하면 오류남. 중괄호와
//return이 붙어있으면 생략가능함!!!
 
arr=[ 'Joe', 'Han''Trump', 'Bush' ];
let obj=arr.reduce((a,c,i)=>{a[i]=c; return a}, {});
console.log(obj);

결과: { '0': 'Joe', '1': 'Han', '2': 'Trump', '3': 'Bush' }

// find()함수는 배열에 객체가 들어있어 indexOf로는 원하는 값을 얻을 수 없을때 사용된다. (단 찾고자 하는 모든 객체를 찾아주지않고 가장 먼저 발견된
//하나의 객체만을 반환해 준다). findIndex의 경우 조건에 맞는 객체의 인덱스를 반환해줌. find, findIndex모두 조건에 맞는 값이 없으면 undefined를 반환함.
let userList2=[{name:"Mike",age:30}, {name:"Jane",age:34},{name:"koko",age:14},{name:"lala",age:12}];

let result3=userList2.find((user)=>{
  if(user.age<19){
    return true;
  }
  return false;
});
console.log(result3);
//find와 달리 배열에 조건을 만족하는 모든 객체를 가지고 싶다면 filter를 쓰면 된다. filter, find모두 해당하는 조건에 맞는 데이터이면 return값으로
// true를 주고 그렇지 않으면 false를 준다.

let arr4=[1,2,3,4,5,6];
const result=arr4.filter((item)=>{
  return item%2===0;
});
console.log(result); //[2,4,6]
//배열 =>문자열 join을 사용하고(default는 쉼표임), 문자열 => 배열 로 변환할 때는 split을 사용한다.
let arr=["Hi","I'm","Joe"];
let str=arr.join("");
console.log(str);

let str2="a,b,c,d"
let arr2=str2.split(" ");
console.log(arr2);
// //배열 =>문자열 join을 사용하고(default는 쉼표임. 즉 쉼표를 넣어가면서 문자열을 만든다는 것이다. join의 인자를 문자열 중간중간에 넣어가면서
문자열이 만들어지는 것임),
let arr=["Hi","I'm","Joe"];
let str=arr.join("");
console.log(str);

// 문자열 => 배열 로 변환할 때는 split을 사용한다(split의 인자를 문자열에서 찾아 그것을 기준으로 배열의 각인자가 만들어 지는것).
let str2="a,b,c,d"
let arr2=str2.split(",");
console.log(arr2);
//JS에서는 배열, 객체모두 그 타입이 Object이기 때문에 어떤것이 배열인지 구분하기 위해서 isArray배열을 사용함.
let user={name:"mike",age:15};
let arr=[1,2,3,4];

console.log(typeof user);
console.log(typeof arr);

console.log(Array.isArray(user));
console.log(Array.isArray(arr));