배열이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다.
변수가 하나의 데이터를 저장할 수 있었다면, 배열은 여러 개의 데이터를 하나의 그릇에 담는 것이 가능하다.
var 배열명 = [데이터1, 데이터2, 데이터3, ...]
var a = [1,2,3]; //대괄호[]를 사용하여 배열 생성
var b = new Array(1,2,3); //생성자 함수를 사용하여 배열 생성
var c = new Array(); // 빈 배열을 생성 후 배열 값 추가
c.push(1);
c.push(2);
c.push(3);
배열의 생성은 대괄호[]를 통해 가능하다.
안에 들어가는 데이터 값은 쉼표(,)를 통해 구분해준다.
이렇게 생성한 배열의 데이터 값들을 원소(element)라고 하며, 배열에 저장되는 데이터는 순서에 따라 번호가 배정된다.
이 번호값을 index(색인) 라고 하며, 번호는 0부터 부여된다.
var member = ['데이터1', '데이터2', '데이터3']
console.log(member[0]); // 데이터1
console.log(member[1]); // 데이터2
console.log(member[2]); // 데이터3
배열명에 대괄호를 붙인 뒤 부르고자 하는 index번호를 넣어 해당 데이터를 호출 할 수 있다.
회원 아이디를 제공해야 할 때 함수 사용 예시
function get_member1(){
return '데이터1';
}
console.log(get_member1()); // 데이터1
function get_member2(){
return '데이터2';
}
console.log(get_member2()); // 데이터2
function get_member3(){
return '데이터3';
}
console.log(get_member3()); // 데이터3
함수는 여러 개의 입력값을 받을 수 있지만 출력값은 하나의 값만을 가질 수 있기 때문에
각각의 회원정보를 출력하는 함수를 만들어야 한다.
이런 한계를 극복하고 간단한 코드 표현이 가능하도록 배열을 이용할 수 있다.
function get_members(){
return ['데이터1', '데이터2', '데이터3'];
}
var members = get_members();
console.log(members[0]); // '데이터1'
console.log(members[1]); // '데이터2'
console.log(members[2]); // '데이터3'
배열은 구현이 쉬우며 연관되어 있는 정보를 한번에 다룰 수 있도록 해준다
배열을 순회 할 때 '배열 + 반복문' 의 조합으로 배열에 담겨 있는 값들을 하나씩 꺼내서 처리 할 수 있다.
function get_members(){
return ['데이터1', '데이터2', '데이터3', '데이터4'];
}
var members = get_members();
// .length; 배열에 담겨있는 값(원소)이 몇개 인지 알려주는 함수
for( var i = 0; i < members.length; i++){
console.log(members[i]);
}
for( var i in members ){
console.log(members[i]);
}
// 해당 배열의 인덱스에 직접 접근한다. => 반복 횟수는 해당 배열의 길이가 된다.
직접 숫자를 통해 조건을 걸었다면 배열에 데이터가 추가 되었을 때 추가된 값이 출력되지 않았을 것이지만 .length;함수를 통해 길이값을 통해 자동적으로 추가된 배열만큼 가변적으로 늘어나게 할 수 있다.
배열에 담겨 있는 데이터를 추가/ 수정/ 삽입/ 변경 / 정렬 과 같은 일을 할 수 있도록 돕는 내장함수가 있다.
원소를 배열의 끝에 밀어 넣는 것
전달된 값을 배열에 추가하는 명령으로 .push(); 사용
var li = ['a', 'b', 'c'];
li.push('d');
console.log(li);
결과 => a,b,c,d
원소를 배열의 시작 지점에 밀어 넣는 것
전달된 값을 배열의 첫번째 원소로 추가하는 명령으로 .unshift(); 사용
var li = ['a', 'b', 'c'];
li.unshift('z');
console.log(li);
결과 => z,a,b,c
복수의 원소를 배열에 한번에 추가하는 명령으로 .concat(); 사용
var li = ['a', 'b', 'c'];
var li = li.concat(['d', 'e']);
console.log(li);
// 기존의 배열과 추가하는 배열을 연결하여 하나의 배열로 만든 다음 return
특정 위치의 원소를 변경(제거 + 추가) 할 수 있는 명령으로 .splice(); 사용
// .splice(index, howmany, element)
// 1. index : 추가할 배열의 위치
// 2. howmany : index에서부터 삭제할 원소의 수, 0이면 삭제하지 않는다.
// 3. element : 추가하고자 하는 원소( 복수 가능 )
var li = ['a', 'b', 'c', 'd'];
li.splice(1, 2, 'O');
console.log(li);
결과 => a,O,d
배열의 첫번째 원소를 제거하는 명령으로 .shift(); 사용
배열의 맨 끝 원소를 제거하는 명령으로 .pop(); 사용
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
console.log(li);
결과 => b,c,d,e
var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
console.log(li);
결과 => a,b,c,d
순서대로 오름차순 정렬하는 명령으로 .sort(); 사용
역순서로 내림차순 정렬하는 명령으로 .reverse(); 사용
var li = ['d', 'e', 'b', 'c', 'a'];
li.sort();
console.log(li);
결과 => a,b,c,d,e
var li = ['d', 'e', 'b', 'c', 'a'];
li.reverse();
console.log(li);
결과 => e,d,c,b,a
배열은 index에 순서가 담긴 값을 자동으로 부여 받는다.
즉, 배열은 저장된 데이터들이 순서를 가진다.
객체는 순서 없이 key와 value가 저장된다.
index로 문자를 사용할 수 있다.
var 변수명 = {'데이터1' : 값1, '데이터2' : 값2, '데이터3' : 값3};
// key,value
var 변수명 = {}; // 비어있는 객체 활용
변수명['데이터1'] = 값1; // []를 사용해 접근
변수명['데이터2'] = 값2;
변수명['데이터3'] = 값3;
var 변수명 = new Object();
변수명['데이터1'] = 값1;
변수명['데이터2'] = 값2;
변수명['데이터3'] = 값3;
'데이터2'이름으로 저장된 값 가져오기
var 변수명 = {'데이터1' : 값1, '데이터2' : 값2, '데이터3' : 값3};
console.log(변수명['데이터2']);
객체에 저장된 데이터를 기준으로 반복작업을 하는 방법
var grades = {'데이터1' : 값1, '데이터2' : 값2, '데이터3' : 값3};
for(var name in grades){
console.log('key : '+name+'value :'+grades[name]);
결과 => key : 데이터1 value : 값1
key : 데이터2 value : 값2
key : 데이터3 value : 값3
// in 뒤에 따라오는 배열의 key값을 in 앞의 변수에 담아서 반복문을 실행한다.
반복문이 실행될 때 변수 name값으로 데이터1, 데이터2, 데이터3 이 순차적으로 할당되기 때문에
grades[name]를 통해서 객체의 값을 알아 낼 수 있게 되는 것이다.
객체 안에는 문자, 숫자 뿐 아니라 객체도 담을 수 있고, 함수도 담을 수 있다.
var grades = {
'list' : { 데이터1' : 값1, '데이터2' : 값2, '데이터3' : 값3 },
'show' : function(){
console.log('show 실행됨');
}
};
console.log(grades['list']['데이터1']);
console.log(grades['show']());
결과 => 10 , show 실행됨
this는 함수가 속해 있는 객체를 가리키는 변수이다.
var grades = {
'list' : { 데이터1' : 값1, '데이터2' : 값2, '데이터3' : 값3 },
'show' : function(){
console.log(this.list);
}
};
grades['show']();
console.log 안에 있는 this는 grades를 의미하고
그것은 console.log(grades.list)와 같은 코드이다.