본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 배열 객체

Array 객체

배열 객체(Array Object)는 여러 개의 데이터를 저장하기 위한 객체입니다.


Array 객체 생성

var 변수 = new Array();

Array 객체 속성
속성 설명
length 배열 요소의 개수를 알아냅니다.
Array 객체 메서드
함수 설명
concat() 여러 개의 배열을 새 배열로 반환합니다.
copyWithin() 두 배열의 조합으로 구성된 새 배열을 반환합니다.
entries() 배열의 각 인덱스에 대한 키와 값을 반환합니다.
every() 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트합니다.
fill() 배열의 시작 인덱스부터 끝 인덱스까지 하나의 값으로 채웁니다.
filter() 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
find() 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다.
findIndex() 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다.
flat() 모든 하위 배열까지 하나의 배열로 반환합니다.
flatMap() 각 엘리먼트에 대해 map 수행 후, 결과를 새로운 배열로 반환합니다.
forEach() 배열 요소 각각에 대해 실행합니다.
includes() 배열에 특정 요소를 포함하고 있는지 판별합니다.
includes() 배열에 특정 요소를 포함하고 있는지 판별합니다.
indexOf() 배열에서 지정된 요소를 찾을 수있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다.
join() 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다.
keys() 배열의 각 인덱스를 키 값으로 가지는 새로운 배열을 반환합니다.
lastIndexOf() 지정된 요소가 배열에서 발견 될 수있는 마지막 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다.
map() 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.
pop() 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다.
push() 배열 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다.
reduce() 배열의 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환합니다.
reduceRight() 누적기에 대해 함수를 적용하고 배열의 각 값은 값을 단일 값으로 줄입니다.
reverse() 배열의 순서를 반전합니다.
shift() 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다.
slice() 배열의 일부분을 선택하여 새로운 배열 객체로 반환합니다.
some() 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트합니다.
sort() 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다.
splice() 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
toLocaleString() 배열의 요소를 나타내는 문자열을 반환합니다.
toString() 지정된 배열 및 그 요소를 나타내는 문자열을 반환합니다.
unshift() 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다.
values() 배열의 각 인덱스에 대한 값을 가지는 새로운 객체를 반환합니다.

Sample1

concat()를 이용하여 여러 개의 배열을 새 배열로 반환하는 예제입니다.

결과
1,2,3,4,5,6,7,8,9,10
1,2,3,4,5,6,7,8,9,10,11,12,13,14,15
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>concat()</title>
    <script>
        var array1 = [1,2,3,4,5];
        var array2 = [6,7,8,9,10];
        var array3 = [11,12,13,14,15];
        
        document.write(array1.concat(array2));
        document.write(array1.concat(array2, array3),"<br>");
    </script>
</head>
<body>
      
</body>
</html>

Sample2

join()를 이용하여 여러 개의 데이터를 문자형 데이터로 반환하는 예제입니다.

결과
1,2,3,4,5
12345
1 2 3 4 5
1,2,3,4,5
1+2+3+4+5
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>join()</title>
    <script>
        var array1 = [1,2,3,4,5];
        
        document.write(array1.join(),"<br>");
        document.write(array1.join(''),"<br>");
        document.write(array1.join(' '),"<br>");
        document.write(array1.join(','),"<br>");
        document.write(array1.join('+'),"<br>");
    </script>
</head>
<body>
    
</body>
</html>

Sample3

배열에서 많이 사용하는 예제입니다.

결과
현재 배열 :1,2,3,4,5,6,7,8,9
반대로 출력[reverse()] : 9,8,7,6,5,4,3,2,1
현재 배열 :9,8,7,6,5,4,3,2,1

현재 배열 :9,8,7,6,5,4,3,2,1
오름차순 출력[sort()] : 1,2,3,4,5,6,7,8,9
현재 배열 :1,2,3,4,5,6,7,8,9

현재 배열 :1,2,3,4,5,6,7,8,9
마지막 요소를 제거하고 그 요소를 반환[pop()] : 9
현재 배열 :1,2,3,4,5,6,7,8

현재 배열 :1,2,3,4,5,6,7,8
배열 끝에 하나 이상의 요소를 추가[push(9)] : 9
현재 배열 :1,2,3,4,5,6,7,8,9

현재 배열 :1,2,3,4,5,6,7,8,9
첫 번째 요소를 제거하고, 제거된 요소를 반환[shift()] : 1
현재 배열 :2,3,4,5,6,7,8,9

현재 배열 :2,3,4,5,6,7,8,9
새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환[unshift(1)] : 9
현재 배열 :1,2,3,4,5,6,7,8,9

현재 배열 :1,2,3,4,5,6,7,8,9
지정된 요소를 찾아서 인덱스를 반환[indexOf(5)] : 4
현재 배열 :1,2,3,4,5,6,7,8,9

현재 배열 :1,2,3,4,5,6,7,8,9
특정 항목을 제거[splice(2,1)] : 3
현재 배열 :1,2,4,5,6,7,8,9

현재 배열 :1,2,4,5,6,7,8,9
특정 항목을 제거[splice(2,1,3,4)] : 4
현재 배열 :1,2,3,4,5,6,7,8,9

현재 배열 :1,2,3,4,5,6,7,8,9
일부분을 선택하여 반환[slice(1,3)] : 2,3
현재 배열 :1,2,3,4,5,6,7,8,9
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reverse(), sort()</title>
    <script>
        var array1 = [1,2,3,4,5,6,7,8,9];
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("반대로 출력[reverse()] : " + array1.reverse(),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("오름차순 출력[sort()] : " + array1.sort(),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("마지막 요소를 제거하고 그 요소를 반환[pop()] : " + array1.pop(),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("배열 끝에 하나 이상의 요소를 추가[push(9)] : " + array1.push(9),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("첫 번째 요소를 제거하고, 제거된 요소를 반환[shift()] : " + array1.shift(),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환[unshift(1)] : " + array1.unshift(1),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("지정된 요소를 찾아서 인덱스를 반환[indexOf(5)] : " + array1.indexOf(5),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("특정 항목을 제거[splice(2,1)] : " + array1.splice(2,1),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("특정 항목을 제거[splice(2,1,3,4)] : " + array1.splice(2,1,3,4),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
        
        document.write("현재 배열 :" + array1,"<br>");
        document.write("일부분을 선택하여 반환[slice(1,3)] : " + array1.slice(1,3),"<br>");
        document.write("현재 배열 :" + array1,"<br><br>");
    </script>
</head>
<body>
    
</body>
</html>

참고(Reference)

  • MDN JavaScript

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기