Array에 대한 이해와 메소드 실습(filter, map, forEach, sort)

1. Array란?

여러 개의 값을 나열한 인덱스로 찾을 수 있는 자료구조이다. 타언어와는 달리 배열타입이 아닌 객체타입으로 되어있다.
원시타입이 아니기 때문에 값 변경 가능하다.

2. 메소드 실습

1) filter

filter는 말그대로 조건에 맞게 걸러내는 것이다. find 또한 조건문에 따라 찾아내지만 find는 값을 순회하면서 조건문에 맞는 값을 발견하면 바로 하나만 반환하는 대신 filter는 조건문에 맞는 모든 값을 새로운 배열로 만들어서 반환한다.

{'name':'yeongju','age':51,'data':3}]

예시코드를 보면 filter안에 들어간 조건을 통해서 myarr안의 3보다 큰 값을 걸러내고 있다. 따라서 [4,5] 가 반환된다.

myarr=[{'name':'yeeun','age':23,'likefood':'pizza'},
		{'name':'inseop','age':22,'likefood':'pasta'},
    	{'name':'yeongju','age':51,'likefood':'icecream'}];

myarr.filter(i=>i.age>30);
//{'name':'yeongju','age':51,'likefood':'icecream'}

배열안에는 객체도 들어갈 수 있기 때문에 이러한 형식으로 값을 걸러내는 것 또한 가능하다.

 

2) map

map은 배열의 각 원소에 접근하는 함수이다. 새로운 배열을 반환한다. 객체로 이루어져 있다면 일부 값을 뽑아낸다든지 하는 것이 가능하다. 무슨 말인지 이해가 안간다면 코드를 보면 이해가 갈것이다.

 const myarr=[
         {'data':1,'name':'dog'},{'data':2,'name':'cat'},{'data':3,'name':'frog'},{'data':4,'name':'rabbit'}
        ];
 myarr.map(i=>i.data)]; // {data:1},{data:2},{data:3},{data:4}

위 코드와 같이 사용할 수가 있다. 배열에서 data값만 뽑아내고 싶어서 map(i=>i.data)를 사용해주었다.

 

3) forEach

forEach는 map과 유사하게 각 원소를 순회한다. 차이점은 새로운 배열로 반환하지 않고 순회만 한다는 것이다. 각각의 요소를 실행하고 싶을 때 사용한다.

 const myarr2=[{
            'name':'lisa','age':16,'phone':8677},
         {'name':'ben','age':35,'phone':0900},
         {'name':'yeeun','age':23,'phone':9888}
    ];
 myarr2.forEach(i=>console.log(i.name));

forEach는 배열로 반환이 안되기 때문에 값을 보기 위해서는 console.log를 사용해주어야 한다.

 

4) sort

sort는 정렬 함수이다. 간단하지만 자바스크립트에서는 이 함수가 한가지 단점이 있다. 배열안에 숫자를 넣고 정렬을 하고 싶을 때 그냥 배열.sort()만 사용하면 제대로 정렬이 되지 않는 것을 확인할 수 있다.

myarr=[110,20,30,80];
myarr.sort(); //[110, 20, 30, 80]

이유는 바로 이 숫자를 문자열로 인식하기 때문이다. 문자열에 해당하는 유니코드를 기준으로 정렬하기 때문에 값이 이상하게 나오는 것이다. 이 문제를 해결하기 위해서는 간단한 함수를 sort안에 넣어줘야 한다.
배열.sort((a,b)=> a-b) 이렇게 써주면 오름차순 정렬이 된다. 자세한 작동원리는 배열 안의 각 원소를 두개씩 비교해서 큰 쪽이 뒤로 가게 정렬하는 버블정렬 방식이라고 하는데 이것까지 알 필요는 없고 이렇게 써줘야 한다는 것만 알아두면 된다. 반대로 내림차순 정렬은 배열.sort((a,b)=> b-a) 이다.

const myarr3=[110,28,34,4];
myarr3.sort((a,b)=>a-b); //오름차순 정렬
console.log(myarr3); //[4,28,34,110]
myarr3.sort((a,b)=>b-a); //내림차순 정렬
console.log(myarr3); //[110,34,28,4]

그리고 다음 코드와 같이 응용하는 것도 가능하다.

myarr4=[{'name':'yeeun','age':25,'data':1},{'name':'haeun','age':24,'data':2},{'name':'yeongju','age':51,'data':3}];
myarr4.sort((a,b)=>a.age - b.age); //이렇게 객체 key를 짚어서 정렬하는 것도 가능
console.log(myarr4); 
	//[{'name':'haeun','age':24,'data':2},{'name':'yeeun','age':25,'data':1},`{'name':'yeongju','age':51,'data':3}];

이렇게 객체의 key를 짚어서 하나의 원소를 기준으로 정렬할 수도 있는 것이다.