자바스크립트 배열

 

자바스크립트 배열: 다양한 값을 하나의 변수에 담는 상자

자바스크립트 배열은 여러 개의 값을 하나의 변수에 담아 관리할 수 있는 유용한 자료형입니다. 마치 여러 개의 사과를 한 상자에 담아두는 것처럼, 배열은 다양한 데이터를 효율적으로 관리할 수 있도록 해줍니다.

배열 생성하기

JavaScript

let fruits = ["사과", "바나나", "딸기"];

코드를 사용할 때는 주의가 필요합니다.

 

위 코드는 "사과", "바나나", "딸기"라는 문자열들을 하나의 배열 fruits에 담았습니다. 배열은 대괄호 [] 안에 값들을 쉼표(,)로 구분하여 표현합니다.

배열 요소에 접근하기

배열의 각 값을 요소라고 부릅니다. 요소에 접근하려면 배열 이름 뒤에 대괄호 안에 인덱스를 넣으면 됩니다. 인덱스는 0부터 시작하는 숫자입니다.

JavaScript

console.log(fruits[0]); // 사과
console.log(fruits[1]); // 바나나

코드를 사용할 때는 주의가 필요합니다.

 

쉬운 예제 3가지

1. 과일 장바구니 만들기
    

     //일반변수 선언으로 출력
     var 과일1 = "사과";
     var 과일2 = "바나나";
     var 과일3 = "딸기";
     
     document.write("과일종류 : "+과일1+" "+ 과일2+" "+과일3 +"<br>");
     document.write(과일2);
   
     //----------------------------------------
     // 배열을 만들어서 출력
     document.write("</p>");
     var fruits = ["사과","바나나","딸기"];
     document.write("과일종류 : "+fruits);
     document.write("</p>딸기출력 : "+fruits[2]);  //[1] 인덱스라 부르고 0부터시작

    
2. 배열 추가삭제 예제
    

    
        // 배열 생성
        let cars = ['현대', '기아', 'BMW'];
   
   	// 배열의 끝에 요소 추가
   	cars.push('아우디');
   	console.log(cars); // 출력: ['현대', '기아', 'BMW', '아우디']
   
   	// 배열의 특정 위치에 요소 추가
   	cars.splice(1, 0, '벤츠'); // 인덱스 1에 '벤츠' 추가
   	console.log(cars); // 출력: ['현대', '벤츠', '기아', 'BMW', '아우디']
   
   	// 배열의 마지막 요소 제거
   	let lastCar = cars.pop();
   	console.log(lastCar); // 출력: '아우디'
   	console.log(cars); // 출력: ['현대', '벤츠', '기아', 'BMW']
   
   	// 배열의 특정 위치의 요소 제거
   	cars.splice(2, 1); // 인덱스 2의 요소 제거
   	console.log(cars); // 출력: ['현대', '벤츠', 'BMW']

    
3. To-Do 리스트 만들기
    

   let todoList = ["과제하기", "운동하기", "책 읽기"];
   console.log("오늘 할 일:", todoList);
   
   // 할 일 목록에서 첫 번째 항목 제거하기
   todoList.shift();
   console.log("업데이트된 할 일 목록:", todoList);
   

    

다양한 배열 메소드

자바스크립트 배열은 push, pop, shift, unshift, splice, slice 등 다양한 메소드를 제공하여 배열을 조작할 수 있습니다. 이러한 메소드들을 활용하면 배열의 요소를 추가, 삭제, 변경 등 다양한 작업을 수행할 수 있습니다.