자바스크립트 5일차 배열

배열

배열이란?

• 배열이란 쉽게 말하면 창고(저장장소)라고 생각하면 된다.

배열 선언하는 방법은 2가지로 나눠진다.

1. 리터널 방식으로 만들기
2. Array 객체의 인스턴스로 만들기

예로 한번 살펴보자!

1. 리터널 방식
var numbers = ['one', 'two' , 'three'];
numbers 

결과값 : ['one', 'two' , 'three']

2. Array 객체의 인스턴스
var numbers = new Array("one", "two", "three");
number

결과값 : ["one", "two" , "three"]

배열 호출하는 방법

위의 예제를 재활용하여 설명하겠습니다.

var numbers = ['one', 'two' , 'three'];

numbers의 첫 번째 저장장소에는 'one'이 있습니다. 사람들이라면 그러면 1번쨰 저장장소에는 'one'이
있네요라고 할 겁니다.

하지만 컴퓨터는 첫 번째 장소라고 하지않고 0번째 저장장소라고한다. 이유는 컴퓨터가 0부터
숫자를 시작하기 때문이다.

고로 numbers 0번째는 'one'이 된다.

그러면 'three'는 몇 번째일까?
답은 numbers의 2번째가 'three'가 된다.

호출방법 : 변수명 [ 인덱스(저장위치) ]

var numbers = ['one', 'two' , 'three'];로 호출해보자

'one'을 호출할려고 하면 변수명 number이고 인덱스(저장위치)가 0번째이였으니 number[0]을 입력하면
'one'이 호출된다.

concat

concat

• 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수
• 원본(원래 배열)을 건들이지 않는다!

var nums = ["1","2","3"];
var chars = ["a","b","c","d"];
nums.concat(chars);  //nums 배열에 chars 배열 연결

결과값 : ["1", "2", "3", "a", "b", "c", "d"]

join

join

• 배열  요소를 연결해서 나열할 때 각 요소 사이에 넣을 구분 기호가 필요한데  join() 은 이 기호를 직접  지정할 수 있음
• 원본(원래 배열)을 건들이지 않는다!

예)

var num = [1,2,3,4]; 
num.join('-');

결과값 : "1-2-3-4";

결과값처럼 배열의 요소 사이사이에 넣을 수 있다.

num.join('');

결과값 : "1234";

또한 요소없이도 붙일 수 있다.

push와 pop

push

• push는 배열의 맨 끝에 새로운 요소를 추가하는 함수
• 새 요소가 추가된 후의 배열 요소의 개수가 반환됨
• concat( ), join( ) 과 다르게  원본(원래 배열)이 바뀜

var nums = ["1","2","3"]
nums.push("4") //nums 배열 맨 끝에 "4"와 "5"요소 추가
nums //호출

결과값 : ["1", "2", "3", "4"]

원본이 바뀌어 호출이 추가된 상태로 나옴

pop

• pop은 배열의 맨 끝에 요소를 제거하는 함수
• 맨 끝 요소가 제거된 후의 배열 요소의 개수가 반환됨
• push와 같은 원본(원래 배열)이 바뀐다.

var nums = ["1", "2", "3", "4"]
nums.pop("4") //nums 배열 맨 끝에 "4"와 "5"요소 추가
nums //호출

결과값 : ["1","2","3"]

원본이 바뀌어 호출이 됨

unshift와 shift

unshift

• 배열의 맨 앞 에 새로운 요소를 추가하는 함수
• 새 요소가 추가된 후의 배열 요소의 개수가 반환됨
• 원본(원래 배열)이 바뀐다.

var nums = ["1", "2", "3"]
nums.unshift("4") //nums 배열 맨 끝에 "4"와 "5"요소 추가
nums //호출

결과값 : ["4", "1", "2", "3"]

shift

• 배열의 맨 앞 요소를 제거하는 함수
• 맨 앞 요소가 제거된 후의 배열 요소의 개수가 반환됨
• 원본(원래 배열)이 바뀐다.

var nums = ["4", "1", "2", "3"]
nums.shift("4") //nums 배열 맨 끝에 "4"와 "5"요소 추가
nums //호출

결과값 : ["1", "2", "3"]

splice, slice, substr

splice

• splice는 배열의 중간 부분에 요소를 추가하거나 삭제할 때 사용
• 한꺼번에 2개 이상의 요소 를 추가하거나 삭제할 때도 사용
• 원본(원래 배열)이 바뀐다.

1. 인수가  **** 1 개일 때
   • 괄호 안의 인수는 그 배열의 인덱스 값을 가리킨다. 이 때  인수가 가리키는 인덱스의 요소 ~ 배열의 끝 요소까지 삭제 함

var numbers = [0,1,2,3,4,5];
numbers.splice(2); //인덱스 2(세 번째 요소)부터 끝까지 삭제

결과값 : [2, 3, 4, 5]

numbers;

결과값 : [0, 1] //원본이 바뀐다.

1. 인수가 2 개 일 때
   • splice(첫번째 인수 : 인덱스 값, 두번째 인수 :  삭제할 개수)

var study = ["html", "css", "web", "jQuery"];
study.splice(2,1);

결과값 : ["web"];

study

결과값 : ["html", "css", "jQuery"];

1. 인수가 3개 이상일 때
   • splice(첫번째 인수 : 인덱스 값, 두번째 인수 :  삭제할 개수, 세번째 인수 : 앞서 삭제한 위치에 새로 추가할 요소를 지정)

study.splice(2, 1, "js");

결과값 : ["jQuery"]

study

결과값 : ["html", "css", "js"]

• 기존 배열의 요소를 삭제하지 않고 새로운 요소 추가할 때는 삭제할 개수를 지정하는 두 번째 인수에 0을 입력

study.splice(2, 0, "jQuery")

결과값 : []

study

결과값 : ["html", "css", "jQuery", "js"]

slice

• slice는 여러 개의 요소를 꺼낸다 ( 삭제 X)
• 배열에서 요소를 꺼낸다는 점은 pop(), shift() 와 같음
• 첫번째 인수 : 시작 인덱스 값, 두번째 인수 : 끝 인덱스 값 -1 ( 끝 인덱스 값의 직전 까지만 추출 )
• 원래 배열은 변경되지 않음 =>  진짜 ' 추출 ' 만 함

var colors = ["red", "green", "blue", "white", "black"];
colors.slice(2);

결과값 : ["blue", "white", "black"]

colors

결과값 : ["red", "green", "blue", "white", "black"]

연습문제

위에 연습했던 colors 배열에서 “blue”와 “white”만 추출하려면 slice() 함수를 어떻게 지정해야 할까요

정답 : colors.slice(2,4);

결과값 : ['blue', 'white']