들어가기 앞서..
오늘은 배열의 심화 배열의 프로퍼티에 대해서 배웁니다. 배열을 프로퍼티를 사용하여 가지고 놀아봅시다.
오늘은 무엇을 배울까 ?
.join , split .reverse .slice .splice .find .filter .map .every .some .reduce .sort
.join
배열을 스트링으로 변환 하기 위해서 어떻게 해야 할까 ?
(array) -> (string)
join을 사용하면 변환이 가능하다.
아래 예시를 보자 .
const fruits = ['a','b','c']
const result = fruits.join();
//예시의 값의 안은 비어 있지만 값안의 값으로 구분자를 넣을수 있다.
기호를 넣으면 그 기호를 구분자로 선택하여 구분하여 준다.
.split
그렇다면 스트링을 array로 변환 하려면 어떻게 해야 할까 ?
split을 이용해서 가능하다.
const fruits = 'a,b,c,d'; // 스트링 값을 설정한다.
const result = fruits.split()
()안의 값으로 구분자와 개수를 정할수 있다. 개수는 옵션값이다.
.reverse
배열을 뒤집을수 있다면 어떻게 할까 ?
.reverse값을 이용하여 배열을 뒤집을수가 있다
즉 역배치 할수 있다.
const array = [1,2,3,4,5];
const result = array.reverse();
값은 [5,4,3,2,1] 로 나온다.
하지만 주의할것이 있다. 이는 원본 배열을 변화시키기 때문에 주의해야 한다.
console.log(array) === console.log(result) 값이 같다.
//원본 배열도 변화시킨다.
.slice ? .splice ?
기존 배열에서 배열을 빼내어 새로운 배열을 만들수 있을까 ?
배열의 두가지 요소를 제외하고 나머지 배열을 만들어 보자.
splice
const array = [1,2,3,4,5];
const result = array.splice(0,2);
splice를 이용하여 인덱스 0부터 2개의 요소를 분리시켰다.
하지만 이 방법은 배열의 원본도 변화시키기 때문에 잠깐 사용하기에는 불리하다.
slice
const result2 = array.slice(2,5);
이와 반면에 slice 는 특정한부분을 리턴해주고 원본은 건드리지 않는다.
또 다른 특징이 있다면 end값은 배제가 되서 +1값으로 작성해야 한다는 점이다.
예시에서 나온것처럼 시작값이 인덱스 2 부터 end값은 5인덱스이다.
앞에서 설정한 array의 길이는 4 인데 end값은 1을 추가한 5를 작성해야 한다.
이번에는 함수 에서 가지고 놀아보자.
아래처럼 함수를 설정해 주었다.
const students = [ new student('A',29,true,45), new student('B',28,false,80), new student('C',30,true,90), new student('D',40,false,66), new student('E',18,true,88), ];
함수에서 특정값 찾기
.find
함수에서 특정값만 찾아보자. 함수에서 80점인 학생을 찾아보자
.find를 사용하면 특정값을 찾을수 있다.
const result = students.find(function(student)){
return student.score ===90;}
find 함수는 콜백함수를 갖는다. 콜백함수가 리턴되면서 설정한 조건값의 true값을 찾고 true값을 만나게 되면 리턴한다.
조건을 보면 A는 넘어가고 B에서 발견했기에 B를 리턴한다.
그리고 함수는 종료된다.
.filter
함수를 하나의 값만 찾지 않고 여러개의 값을 찾아야 할때는 어떻게 할까 ?
const result = students.filter((student)=>student.enrolled);
filter 값을 활용하면 특정조건의 값을 찾고 true값 요소들을 배열로 만들어준다.
화살표 함수를 사용하였다.
.map
그렇다면 함수값중에서 특정 요소들만 불러와주거나 요소 값을 변경하고 싶을 때는 어떻게 할까 ?
.map을 이용하여 맵핑을 해주면 가능하다.
const result = students.map((student)=> student.score*2);
맵핑은 함수처럼 기존의 값들을 우리가 설정해준 조건으로 맵핑하여서 변환해준다. 위의 식은 점수들의 *2한 값들을 받을수 있다.
조건을 수정해주면 우리는 다양한 값들을 얻을수 있다.
every ? some?
특정 조건에 맞는 값들이 있는지 아는 방법에는 무엇이 있을까 ?
원하는 조건을 설정하여 배열에 원하는 값이 있는지 확인할수 있다.
const result = students.some((student) => student.score<50);
조건값이 있는지 확인해준다.
하나라도 맞으면 ture가 도출된다.
일부만 만족될 경우 some을 사용한다.
const result2 = students.every((student) => student.score<50);
every의 경우에는 조건이 모두 맞아야 ture 값이 나온다.
모든조건이 만족해야 할경우 사용 한다.
.reduce
평균값을 알고 싶으면 어떻게 할까 ?
.reduce를 사용하면 누적의 값을 알수 있다. 값이 누적이 되는데 왜 reduce를 사용했는지 모르겠다.
const result = students.reduce((prev,curr) => {
console.log('-------');
console.log(prev);
console.log(curr);
return prev + curr.score;
},0);
.reduce는 콜백함수를 전달, 콜백함수에서 리턴할때 누적된 값을 전달한다.
return값을 다시 앞의 prev값으로 전달하여서 누적하는 형태이다.
마지막 0을 넣으면 prev 초기값을 0으로 전달한다.
.sort
배열을 오름차순 혹은 내림차순으로 정렬하고 싶을 경우에는 어떻게 할까 ?
.sort 는 정렬에 도움을 준다 .
const result = students .map((studnet)=>student.score) // 원하는 값을 분리 .sort((a,b)=> b-a) //정렬 .join(); // 스트링으로 변환
오름차순은 b-a로 사용되고 내림차순은 a-b로 작성하면 된다.
오늘 배운 내용들은 마지막 예시처럼 여러개 적용하면서 사용할수 있다.
업계에서도 자주 쓰이기 때문에 반복 숙달이 필요하다 !!
열공 화이팅 !!
