Part 2. Javascript 배열, 객체 Ch 1. 배열

Part 2. Javascript 배열, 객체 Ch 1. 배열 입니다.

현재 코드스테이츠 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

학습목표

• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
• length속성을 이용하여 배열의 길이를 조회할 수 있다.
• 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다.
• 배열의 각 요소에 대하여, 반복하는 코드를 실행시킬 수 있다.
• 배열에서 사용되는 다양한 메서드를 알고 사용할 수 있다.
  • split(), join(), slice(), Array.isArray(), push(), unshift(), pop(),shift(), indexOf(), includes()

1. 배열 기초

배열은 순서에 대한 정보(index)를 가지고 있는 (참조형) 데이터 타입입니다.

값을 요소(element)라고 부르며, 순서는 인덱스(index)라고 부릅니다. 순서는 1이 아닌 0부터 번호를 매김니다.
값은 인덱스를 이용해 접근합니다.

let num = [1,2,3,4] 
// 배열의 형태는 대괄호(square bracket)를 이용해서 배열을 만들고 
// 각각의 원소(element)는 쉽표(comma)로 구분해줍니다.

num[3]; // 4
// num라는 배열의 3번째 인덱스의 값 조회

num[3] = 5;
// num라는 배열의 3번째 인덱스의 값 변경
num; // [1,2,3,5]

- 배열로 할 수 있는 것들

1. 길이를 알아낼 수 있습니다

let myNumber = [73,98,86,61];

myNumber.length; //4
// 온점(dot)을 이용해서 변수가 가지고 있는 속성(property)에 접근할 수 있습니다.

2. 요소(element)를 추가할 수 있습니다.

let myNumber = [73,98,86,61];

myNumber.push(96);
myNumber; // [73,98,86,61,96]
// 온점(dot)을 이용해서 변수가 가지고 있는 메서드(method)도 실행할 수 있습니다.

3. 요소(element)를 삭제할 수 있습니다.

let myNumber = [73,98,86,61];

myNumber.pop();
myNumber; // [73,98,86]
// pop()는 배열의 마지막 값을 삭제합니다.

2. 배열의 반복

반복문을 이용해 배열의 요소(element)를 한번씩 출력하려면?

//"배열 myNum의 n번째 인덱스"을 출력하자
// 조건 :
// - 숫자(n)는 0부터 시작한다
// - 숫자(n)를 배열의 길이보다 작을 때까지 반복한다
// - 숫자(n)는 1씩 증가한다

let myNum = [73, 98, 86, 61];

for(let n= 0; n < myNum.length; n++){
	console.log(myNum[n]);
}

3. 배열 메서드

3.1 Array.isArray(obj)

자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있는 메서드 입니다. boolean 값을 반환합니다.

Array.isArray(obj)

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

3.2 Array.prototype.push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환합니다. 원본 배열이 변경됩니다(mutable).

arr.push(element1[, ...[, elementN]])

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

3.3 Array.prototype.pop()

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다. 빈 배열에 사용하면 undefined를 반환합니다. 원본 배열이 변경됩니다(mutable).

arr.pop()

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]

3.4 Array.prototype.shift()

arr.shift()

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 원본 배열이 변경됩니다(mutable).

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

3.5 Array.prototype.unshift()

unshift() 메서드는 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다. 원본 배열이 변경됩니다(mutable).

arr.unshift([...elementN])

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

3.6 Array.prototype.indexOf()

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. 원본 배열은 변경되지 않습니다.(immutable)

arr.indexOf(searchElement[, fromIndex])

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1


// hasElement(배열, 찾으려는 엘리먼트) // true, false

function hasElement(arr, element){
let isPresent = arr.indexOf(element) !== -1;
return isPresent;
}

3.7 Array.prototype.includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. boolean 값을 반환합니다. 하지만 includes는 internet explorer에는 호환되지 않는다는 단점이 있습니다. 원본 배열은 변경되지 않습니다.(immutable)

arr.includes(valueToFind[, fromIndex])

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

3.8 Array.prototype.splice()

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 원본 배열이 변경됩니다(mutable).

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

3.9 Array.prototype.slice()

slice() 메서드는 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. 원본 배열은 변경되지 않습니다.(immutable)

arr.slice([begin[, end]])

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(2, 2));
// expected output: Array []

console.log(animals.slice(3, 20));
// expected output: Array ['duck', 'elephant']

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(2, 0));
// expected output: Array []

console.log(animals.slice(5, 1));
// expected output: Array []

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

3.10 Array.prototype.concat()

concat() 메서드는 인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. 원본 배열은 변경되지 않습니다.(immutable)

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

3.11 Array.prototype.join()

join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만듭니다. 만약 arr.length 가 0이라면, 빈 문자열을 반환합니다. 원본 배열은 변경되지 않습니다.(immutable)

arr.join([separator])

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

3.12 String.prototype.split()

split() 메서드는 String 객체를 지정한 구분자를 이용하여 여러 개의 문자열로 나눕니다.
주어진 문자열을 separator마다 끊은 부분 문자열을 담은 Array을 반환합니다.

str.split([separator[, limit]])

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

const chars = str.split('');
console.log(chars[8]);
// expected output: "k"

const strCopy = str.split();
console.log(strCopy);
// expected output: Array ["The quick brown fox jumps over the lazy dog."]

3.13 String.prototype.reverse()

reverse()메서드는 순서가 반전된 배열을 반환합니다. 원본 배열이 변경됩니다.(mutable)

a.reverse()

const a = [1, 2, 3];
console.log(a); // [1, 2, 3]

a.reverse();
console.log(a); // [3, 2, 1]

3.14 Arr.prototype.sort()

arr.sort([compareFunction])

compareFunction은 정렬 순서를 정의하는 함수입니다. 생략하면 배열은 각 요소의 문자열 반환에 따라 각 문자의 유니코드 값 순서대로 정렬됩니다.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

숫자의 경우 유니코드 값 순서대로 정렬되기 때문에 우리가 원하는 값이 안 나올 수 있습니다. 이럴 때는 compareFunction을 이용합니다.

• sort() 함수로 숫자 오름차순 정렬하기

const arr = [2, 1, 3, 10]
arr.sort(function(a,b) {
	return a - b
})
console.log(arr) // [1, 2, 3, 10]

• sort() 함수로 숫자 내림차순 정렬하기

const arr = [2, 1, 3, 10]
arr.sort(function(a,b) {
	return b - a
})
console.log(arr) // [10, 3, 2, 1]

• sort() 함수로 문자 오름차순 정렬하기

const arr = ['March', 'Jan', 'Feb', 'Dec']
arr.sort()
console.log(arr) // ["Dec", "Feb", "Jan", "March"]

• sort() 함수로 문자 내림차순 정렬하기

const arr = ['March', 'Jan', 'Feb', 'Dec']
arr.sort(function(a,b){
	if(a<b) return 1;
  	if(a>b) return -1;
  	if(a === b) return 0;
})
console.log(arr) // ["March", "Jan", "Feb", "Dec"]

3.15 Array.prototype.findIndex

findIndex() 메서드는 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환합니다. 만족하는 요소가 없으면 -1을 반환합니다.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3