Array 객체 (JavaScript)

Goal 

 - 자바스크립트의 Array 객체에 대해 알아본다

 - Array 객체를 사용하는 방법을 알아본다 (Stack, Index 방식)

 - Array 객체를 초기화하는 방법을 알아본다

 - Array의 데이터를 삭제하고 추가하는 splice() 메소드에 대해 알아본다

1. Array 객체

 

1-1 push / pop 메소드를 이용한 데이터 관리 : Stack

 - Array의 데이터 관리를 Stack형식으로 자료를 push하고 pop으로 꺼냄.

var nums = new Array();

nums.push(5);
alert(nums);

nums.push(10);
alert(nums);

nums.push(21);
alert(nums);

var n1 = nums.pop();
alert(nums);

var n2 = nums.pop();
alert(nums);

var n3 = nums.pop();
alert(nums);

 

1-2 인덱스를 이용한 데이터 관리 : List

 

var nums = new Array();

nums[0] = 5;
alert(nums);

nums[1] = 10;
alert(nums);

alert(nums[0]);

alert(nums[1]);

var nums = new Array();
nums[3] = 5; // 바로 크기3을 대입하면 자연스럽게 0, 1, 2배열을 채워준다(값이 비어있음)

alert(nums.length);; //따라서 길이를 출력하면 4가 나온다.

 

1-3 배열 객체 초기화

 

var nums = new Array(); // 배열 생성
var nums = new Array(5); // 크기가 5인 배열 생성
var nums = new Array(5, 10, 21); // 5, 10, 21의 데이터를 가진 크기가 3인 배열 생성
var nums = new Array(5, 10, 21 , "hello"); // 다른 데이터타입도 하나의 배열에 저장가능
alert(typeof nums[3]); // 해당 데이터가 어떤 타입인지 확인가능
var nums = new Array(5, 10, 21, "hello", new Array(2, 3 ,4)); // 배열안에 배열 생성가능
alert(nums[4][1]); // 2차원 배열의 출력처럼 배열안의 배열요소 출력

1-4 splice() 메소드를 이용한 데이터 관리 : List

var nums = new Array(5, 10, 21 "hello");

nums.splice(1) // 인덱스 1번째 이상 데이터 삭제
nums.splice(1, 1) // 인덱스 1번째 데이터 삭제
nums.splice(1, 2) // 인덱스 1번째 부터 2번째 까지 삭제
nums.splice(2, 1) // 인덱스 2번째 1개 삭제
nums.splice(2, 1, "hoho") // 인덱스 2번째 1개 삭제 후 "hoho"삽입
nums.splice(2, 0, "hello) // 삭제되는 것 없이 2번째에 "hello" 중간에 삽입

 

* 실습 툴

VS코드로 실습

Live server를 통해, 작성한 JS내용을 Http 프로토콜을 이용한 서버로 돌릴 수 있게함. 

로컬에서 돌리면 보안상의 문제가 있기 때문에 보안 서비스를 제공하는 Http 프로토콜로 전환!