IT 수업 8주차 (8) ObjectArray

 

 

 

여러 데이터 타입들을 배열안에 넣어 본다.

 

 

 

< 실행화면 >

그러면 이렇게 콘솔창에 다양한 데이터 타입으로 나타나게 된다.

 

 

 

이번에는 배열에 추가로 넣고 싶을때 사용하는 방법이다.

현재 배열 크기는 이렇게 나타난다.

 

 

여기에 값을 추가한 뒤 사이즈를 보면 늘어 난 것을 볼 수 있다.

JS 배열은 동적확장이 가능하기 때문이다.

 

 

 

 

 

다음은 반복문으로 요소를 탐색하는 것이다.

 

● 요소탐색(반복문)은

for(초기값; 조건식; 탈출연산){} 공식을 사용하면 된다.

 

 

 

 

 

 

이렇게도 할 수 있다.

 

 

 

 

 

 

< 배열관련 메서드 >

 

● push() - 끝에 요소 추가

 

 

크기가 7이었던 배열에 '1234'라는 값이 들어가면서 배열의 크기가 8이 됐다.

 

 

 

 

 

● pop()

 

pop은 꺼내는 것이다.

값이 빠져나가 전체 크기가 하나 줄은 것을 볼 수 있다.

 

 

 

 

 

● forEach()

forEach(){} 는 forEach()=>{} 와 같다.

 

문법은 arr.forEach((요소) => {처리되는 로직}); 으로 하면 된다.

 

 

 

 

 

 

 

● sort()

기본 sort 함수는 요소를 문자열로 변환 이후 사전편찬 순서대로 오름차순으로 정렬한다.

arr2.forEach(()=>{});에서 라인이 1개면 괄호 생략 가능하다.

 

 

여기서 

arr3.sort((a, b)=> { 
            return a-b; 
            return b-a;

        }); 

대신 arr3.sort(); 으로 바꾸면 이렇게 맨 첫 숫자 기준으로 오름차순이 된다.

 

 

 

 

 

 

 

 

● filter()

filter는 조건식을 만족하는 요소만 필터링해서 따로 배열에 저장하는 것이다.

 

arr4.filter((요소)=>{return 조건식}) : 라인이 여러개면 return 적어야 한다.

arr4.filter(요소=> 조건식) : 라인이 1개라면 괄호 빼고 return 제외하고 사용가능 하다.

 

 

여러 타입의 데이터들을 배열안에 넣어놓고 number 값만 추출하면 이렇게 나온다.

 

이번에는 boolean 값만 가져와본다.

 

 

또 object 값만 가져와본다.

 

 

 

 

숫자 값들만 뽑아와 오름차순 하는 것이다.

(a-b는 오름차순, b-a는 내림차순)

이렇게도 할 수 있다. (같은 코드임)

 

 

 

 

● reduce()

공식 : reduce((누산변수, 요소변수)=>{return 연산로직}, 누산변수초기값)

 

reduce 메서드는 자신을 호출한 배열의 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다. 이때 원본 배열은 변경 되지 않는다.

 

 

여기서 console.log(sum); 을 없애주면 이렇게 값만 나오게 된다.

 

 

 

 

● 배열 객체 반복하기

 

배열에서 특정요소만 뽑기

배열에서 name과 location만 가져와 볼 것이다.

 

 

 

 

 

● map()

      : 함수의 반환 값으로 새로운 배열을 생성

-  Filter vs Map 
 Filter : 조건식의 true/flase 배열
 Map : 리턴되는 결과물 자체(여러 산술된 인자)를 받아서 배열 만듬(조건식도 포함)

 

 

원하는 값만 빼서 보기

 

 

 

 

 

! 중요 !

forEach((item) => {logic})
filter((item) => {condition})
map((item) => {logic})
reduce((누산변수,item) => {logic}, 누산변수초기값)

 

 

 

 

 

 

 

 

● 유사배열 객체 - {}.forEach (x)
                             {}.map (x), reduce(x)...

 

 

배열함수인 forEach는 사용이 불가하기 때문에 에러가 난다.

 

 

 

그래서 이렇게 사용해주면 된다.