2020-02-05 JavaScript-배열

생활코딩의 JavaScript 강의를 들으면서 나름대로 정리한 내용이다.

https://opentutorials.org/course/743/4736

배열 - 생활코딩

// 배열 1강 배열의 문법
배열(array) : 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입
변수가 하나의 데이터를 저장하기 위한 것이라면 배열은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다.

배열의 생성
예를 들어보자. 헬스장 회원 정보에서 여러 개의 닉네임들을 효율적으로 관리할 수 있는 방법은 없을까?
배열을 쓰면 된다.
변수 member에 회원정보를 담아보자.
let member = ['ronny', 'susan', 'tom'];
하나의 변수에 3개의 데이터를 담았다. 각각의 데이터를 원소(Element)라고 부른다.
이 데이터를 어떻게 하면 꺼내올 수 있을까?
member[0] // ronny
member[1] // susan
member[2] // tom
배열 안의 원소들은 각각 숫자로 된 이름표를 가지고 있다. 그 이름표는 색인(Index)라고 한다.
컴퓨터는 숫자를 셀 때 항상 0부터 세기 시작한다. 따라서 배열 안 원소들의 Index number는 0부터 시작한다.
우리는 색인(index)을 이용해서 배열에 저장된 값을 가져올 수 있다.

//배열 2강 배열의 효용
배열이 없다면 어떻게 될까?
배열 없이 헬스장 회원들의 이름을 제공하는 함수를 제공해야 한다고 해보자.
하지만 함수의 경우 오로지 하나의 값만을 반환할 수 있다.
function get_member1( ) {
    return 'ronny';
}
document.write(get_member1( ));

function get_member2( ) {
    return 'susan';
}
document.write(get_member2( ));

function get_member3( ) {
    return 'tom';
}
document.write(get_member3( ));
하나의 함수는 하나의 값만을 반환할 수 있기 때문에 위와 같이 각각의 회원정보를 반환하는 함수를 만들었다.

배열이 있다면?
function get_members( ) {
    return ['ronny', 'susan', 'tom'];
}
let members = get_members( );
document.write(members[0]);
document.write(members[1]);
document.write(members[2]);

//배열 3강 배열과 반복문의 조우
배열과 반복문이 함께 어우러지면, 반복문을 이용하여 배열 안에 담긴 정보들을 하나씩 꺼내서 처리할 수 있다.
function get_members( ) {
    return['ronny', 'susan', 'tom'];
}
let members = get_members( );
for(let i = 0; i < members.length; i++) { 
// members.length는 배열에 담긴 값들의 개수를 알려준다. 여기서는 element가 3개이므로 members.length = 3이 된다.
    document.write(members[i]);
    document.write('
');
}
결과는,
ronny
susan
tom
과 같다.

반복문을 이용해서 배열 members의 정보들을 하나씩 꺼낸 후에 차례로 출력하고 있다.
정리하면, 배열이란 연관된 정보를 하나의 그룹으로 관리하기 위해서 사용한다. 그리고 그 정보를 처리할 때는 반복문을 이용한다.

배열의 제어
배열은 연관된 데이터들을 효율적으로 관리, 전달하기 위한 목적으로 생겨난 데이터 타입이다. 따라서 데이터의 추가/수정/삭제와 같은 일을 편리하게 할 수 있도록 돕는 다양한 기능을 가지고 있다.

// 배열 4강 원소의 추가
다음은 배열의 끝에 원소를 추가하는 방법이다.
push( )메서드 : 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.
배열에 element를 추가하기
const myFavoriteFood = ['chicken', 'pizza', 'bulgogi', 'porkBelly'];
let total = myFavoriteFood.push('ramen');
console.log(myFavoriteFood); // ['chicken', 'pizza', 'bulgogi', 'porkBelly', 'ramen']
console.log(total); // 4, the new array length

두 개의 배열을 합치기
두 번째 배열의 모든 element를 push하기 위해 apply( )를 사용한다.
const foods = ['chicken', 'pizza', 'bulgogi'];
const moreFoods = ['porkBelly', 'ramen'];

// 첫번째 배열에 두번째 배열을 합친다.
// foods.push('porkBelly', 'ramen'); 하는 것과 동일하다.
Array.prototype.push.apply(foods, moreFoods);

console.log(foods); // ['chicken', 'pizza', 'bulgogi', 'porkBelly', 'ramen']


다음은 복수의 원소를 배열에 추가하는 방법이다.
concat( )메서드 : 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다.
기존배열을 변경하지 않습니다. && 추가된 새로운 배열을 반환합니다.
배열 두 개 이어붙이기
const myFavoriteFood = ['chicken', 'pizza', 'bulgogi', 'porkBelly'];
myFavoriteFood.concat(['ramen', 'kimchiFriedRice']); 
// 결과 : ['chicken', 'pizza', 'bulgogi', 'porkBelly', 'ramen', 'kimchiFriedRice'] , 차례대로 myFavoriteFood의 뒷부분에 추가된다.
console.log(myFavoriteFood); // ['chicken', 'pizza', 'bulgogi', 'porkBelly'], 기존의 배열은 건드리지 않는다. 

배열 세 개 이어붙이기
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

num1.concat(num2, num3); // 결과 : [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(num1); // 결과 : [1, 2, 3], 기존의 배열은 건드리지 않는다.

배열에 값 이어붙이기
const num = [1, 2, 3];

num.concat('a', ['b', 'c']); // 결과 : [1, 2, 3, 'a', 'b', 'c']
console.log(num); // 결과 : [1, 2, 3], 기존의 배열은 건드리지 않는다.


다음은 배열의 시작점에 원소를 추가하는 방법이다.
unshift( )메서드 : 인자로 전달한 값을 배열의 첫번째 원소로 추가하고, 새로운 길이를 반환한다.
arr.unshift([...elementN]) // elementN : 배열 맨 앞에 추가할 요소
let myFavoriteFood = ['chicken', 'pizza', 'bulgogi', 'porkBelly'];
myFavoriteFood.unshift('ramen');
console.log(myFavoriteFood.unshift('ramen'));
// expected output: 5
console.log(myFavoriteFood);
// expected output : Array ['ramen', 'chicken', 'pizza', 'bulgogi', 'porkBelly']

let arr = [2, 3];

arr.unshift(0, 1); // result of call is 4, the new array length
// arr is [0, 1, 2, 3]

arr.unshift([-1]); // result of call is 5, the new array length
// arr is [[-1], 0, 1, 2, 3]


// 배열 5강 원소의 제거와 정렬
원소의 제거
다음은 배열의 첫 번째 원소를 제거하는 방법이다.
shift( ) 메서드 : 0번째 위치(첫 번째)의 요소를 제거하고 연이은 나머지 값들의 위치를 한 칸씩 앞으로 당깁니다.
그리고 제거된 값을 그대로 반환합니다. (첫 번째 요소가 객체라면 객체 그대로, 문자열이라면 문자열 그대로, 숫자라면 숫자 그대로 반환해준다.)
만약 배열의 length가 0이라면(빈 배열이라면) undefined를 반환합니다.

배열에서 한 요소 제거하기

const array = [2, 4, 6];

let firstElement = array.shift( );

console.log(array);
// 결과 : Array [4, 6]

console.log(firstElement);
// 결과 : 2

혹은

const language = ['korean', 'english', 'chinese', 'spanish'];

console.log('language before: ' + language);
// "language before: korean,english,chinese,spanish"
let shifted = language.shift( );
shifted;
// "korean"
console.log('language after: ' + language);
// "language after: english,chinese,spanish"
console.log('Removed this element: ' + shifted);
// "Removed this element: korean"

while 반복문 안에서 shift( ) 사용하기
shift( ) 메서드는 while문의 조건으로 사용되기도 합니다.

const language = ['korean', 'english', 'chinese', 'spanish'];

while( (i = language.shift( )) !== undefined ) {
    console.log(i);
}
//  korean, english, chinese, spanish

다음은 배열의 마지막 요소를 제거하는 방법이다.
pop( )메서드 : 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다. 
빈 배열에 pop( )을 호출하면, undefined를 반환합니다.

배열의 마지막 요소 제거

const language = ['korean', 'english', 'chinese', 'spanish'];

let popped = language.pop( );

console.log(language);
// ['korean', 'english', 'chinese']
console.log(popped);
// 'spanish'



배열의 정렬
다음은 정렬하는 방법이다.
sort는 배열 요소의 순서를 정렬한다. 
const li = ['d', 'f', 'e', 'c', 'a', 'b'];
li.sort( );
console.log(li);
// ["a", "b", "c", "d", "e", "f"]

reverse는 배열 요소의 순서를 반대로 바꾼다.
const li = ['d', 'f', 'e', 'c', 'a', 'b'];
li.reverse( );
console.log(li);
// ["b", "a", "c", "e", "f", "d"]