[자바스크립트] 내장객체 - Array(배열)

Gammi·2022년 10월 1일
0

JS

목록 보기
7/22
post-thumbnail

< 자바스크립트의 대표적인 내장 객체 >

1. Array : 배열을 관리하는 객체
2. Date : 날짜 및 시각 정보를 관리하는 객체




📂 Array 객체


  • 배열을 다루는 객체

  • Array 객체 인스턴스 생성을 통한 배열 생성 가능

  • 인덱스 번호는 [0] ~ [length-1]


< 배열 생성 기본 문법 >

데이터타입 배열명 = new Array();
// 크기가 지정되지 않은 배열 생성
데이터타입 배열명 = new Array(n);
// 크기가 n인 배열 생성

< 배열 생성 및 초기화 >

데이터타입 배열명 = Array(값1, 값2, ...생략... 값n);
데이터타입 배열명 = [값1, 값2, ...생략... 값n];
// 둘 중에 아무 방법이나 사용하면 됨
// 초깃값이 있는 경우에는 new가 붙지 않음





✔ for문을 사용한 배열 접근


1. for문을 사용한 배열 접근


  • 제어변수 i 값을 0부터 마지막 인덱스까지 1씩 증가하며 차례대로 접근

  • 원하는 범위의 인덱스만 접근 가능


var fruitsArr = ["사과", "배", "딸기", "바나나"];

for(var i = 0; i < fruitsArr.length; i++) {
  document.write(i + " : " + fruitsArr[i] + "<br>");
}


2. for...of문을 사용한 배열 접근


  • 일반적인 환경에서 많이 사용

  • 자동으로 배열 내의 요소를 차례대로 받아와서 사용

    -> 인덱스 지정 불가

  • 자바의 향상된 for문(foreach문)과 동일한 방식


< 기본 문법 >

for(변수 선언 of 배열명) {
	// 반복 실행할 문장들...
}

-> 우변의 배열로부터 데이터를 차례대로 하나씩 꺼내서 좌변의 변수에 저장을 반복

for(var element of fruitsArr) {
  document.write(element + "<br>");
}




✔ 자바의 배열과 다른 점


  1. 생성된 기존 배열에 새로운 요소 추가 가능
  • 기존 배열 크기와 상관없이 추가되는 데이터에 따라 공간이 확장됨
fruitsArr[4] = "레몬";
// 현재 fruitsArr 배열의 크기는 4, 인덱스는 3번까지 존재하지만
// 4번 인덱스에 새로운 데이터(레몬) 추가 가능

  1. 배열의 length 속성을 사용하여 배열 크기를 강제 변경 가능
fruitsArr.length = 10;
// 배열 크기 5에서 10으로 변경

fruitsArr.length = 0;
// 배열 크기를 0으로 변경할 경우 배열 초기화 가능

  1. 배열에 저장되는 요소들의 데이터타입에 대한 제약이 없음
  • 정수, 문자열, 논리타입 뿐만 아니라 객체, 배열, 함수까지도 저장 가능

  • 자바는 같은 데이터타입만 하나의 배열로 만들 수 있음

var allTypeArr = ["홍길동", 10, true, function() {alert("배열 내의 함수");} ];
// 오류 발생하지 않음




✔ 배열을 다루는 연산자 및 메서드


  • 배열명.메서드명( ) 형태로 호출

  1. delete 연산자
  • delete 배열명[인덱스]; 으로 사용

  • 지정된 인덱스에 해당하는 배열 요소 삭제

    -> 해당 요소만 삭제되고 공간은 그대로 유지됨


⭐ 입력

delete fruitsArr[2];
document.write(fruitArr);

📌 출력

사과,배,,바나나
// ,,로 딸기의 공간 남아 있음

  1. splice() 메서드
  • 배열명.splice(인덱스, 요소개수) 로 사용

  • 인수가 3개이상인 경우 사용

  • 데이터 삭제 시 해당 공간 자체를 삭제


⭐ 입력

fruitsArr.splice(2,1);
// 2번 인덱스부터 1개 요소 삭제
document.write(fruitArr);
fruitsArr.splice(2,2);
// 2번 인덱스부터 2개 요소 삭제
document.write(fruitArr);

📌 출력

사과,배,바나나
// 딸기의 공간 삭제됨
사과,배
// 1번 인덱스(딸기)부터 2개의 요소 삭제했으므로 바나나도 같이 삭제됨

🔗 참고

매개변수 = 인수 = 파라미터 = 아규먼트

책을 보는데 메서드 인수라는 말이 나오길래 저게 대체 뭐지? 했음...ㅎ 찾아보니까 파라미터랑 똑같은 말이더라구 매개변수랑 파라미터는 수업 시간에 많이 사용하는 용어라서 익숙한데 인수는 처음 본 거라서 적어놓기ㅎㅎ


  1. slice() 메서드
  • 데이터타입 변수명 = 배열명.slice(시작인덱스, 끝인덱스); 로 사용

  • 시작인덱스 ~ 끝인덱스-1 까지 부분 배열 추출


⭐ 입력

var fruitSlice = fruitsArr.slice(0,2);
// 0번부터 1번 인덱스 추출
document.write(fruitSlice);

📌 출력

사과,배
profile
개발자가 되었어요⭐️

0개의 댓글