TIL/멋쟁이사자처럼 FE스쿨 2기

[Day 26] JS 객체자료형 - Array

Dahee.jo 2022. 5. 3. 17:32
SMALL

지난 시간엔 원시자료형에 배웠다면

오늘은 객체자료형에 대해 배웠다.

 

객체자료형(참조자료형)

객체를 생성하여 값을 할당하고 그 값을 복제하면 값 자체를 복제하는 것이 아니라

그 값이 위치한 주소를 복사한다.

리터럴표현: {}

 

객체자료형 중에서도 오늘은 Array란 무엇이고 내장 함수/메서드에 대해 알아보고 실습하는 시간을 가졌다.

 

배열이란?

한마디로 데이터의 집합이다. 여러 데이터를 하나의 이름으로 묶어 사용할 수 있도록 도와준다.

데이터엔 원시자료형도 올 수 있고 객체자료형도 올 수 있다.

배열 안에 있는 데이터를 element라고 부른다.

리터럴표현:[]

 

많은 내장함수들이 있는데,

(더 많은 함수들이 궁금하다면 아래 클릭!)

https://daheejo.tistory.com/13?category=1249834 

 

[JS]어쩌다 까먹는 자바스크립트 배열 메소드/함수 총정리

.pop 맨 뒤에 있는 원소를 추출하고 그 원소는 제거된다. const numbers = [10, 20, 30, 40]; const value = numbers.pop(); console.log(value); //40 console.log(numbers); //[10, 20, 30] .push 추가하고 싶은..

daheejo.tistory.com

 

그중에서도 자주 쓰이는 함수들

pop

push

splice

var avengers = ['spiderman', 'ironman', 'hulk', 'thor'];
        // splice() : 기존의 요소를 삭제하거나, 교체하거나, 새 요소를 추가합니다. 인덱스, 카운트, 아이템 순서로 인자를 전달합니다.
        // 아이템 삭제. 
        avengers.splice(3, 1); // 3번 인덱스 요소 하나만 삭제
        avengers.splice(3); // 3번 인덱스부터 전부 삭제
        // 아이템 추가
        avengers.splice(3, 0, 'blackwidow');
        // 아이템 교체
        avengers.splice(1, 1, 'hulk');

//시작 아이템 하나만 쓰면 스타트에서 끝까지 다 삭제!

slice

수업 중 실습한 것.. 주의할 점은 인덱스를 -값을 써도 자르는 순서는 양의 방향이다!
sort와 그 안의 compare function

 

오늘 배운 메소드 중 가장 중요한 내용을 다뤘던 sort!

배열 안 요소들을 정렬할 때 쓰는 element다

문제는 숫자를 정렬할 때는 유니코드 순서대로 정렬이 되기 때문에

오름차순, 내림차순대로 제대로 정렬이 안된다.

 

이런 숫자형 데이터 정렬의 단점을 해결하기 위해선

sort 함수 안에다 비교함수(compare function)을 사용할 수 있다!

 

arr.sort (
 functijon (a,b) {
		return a-b;
 } //오름차순
)

arr.sort (
 functijon (a,b) {
		return b-a;
 } //내림차순
)
   var arrNum = [13, 9, 10, 2];
   
           arrNum.sort(function (a, b) {
            if (a < b) {  
                return -1
            } else if (b < a) {
                return 1;
            } else {
                return 0;
            }
        });
        
        //내림차순은 등호 반대로
반응형