코드스테이츠 11일차 ([JavaScript] 배열)

배열은 순서가 있는 값. 순서는 인덱스 라고 부름. 0부터 번호를 매긴다. 값은 인덱스를 이용해서 접근을 한다.

pop() 

pop() 메서드는 배열에서 마지막 요소를 제거하고 그 요소를 반환. 빈 배열의 경우 undefined 를 반환한다.

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

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

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

push()

push() 메서드는 배열의 끝에 하나 이상의 요소를 추가하고, 배열의 새로운 길이를 반환한다.

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"]

Array.isArray()

Array.isArray() 메서드는 인자가 Array(배열)인지 판별한다. 객체가 Array라면 true, 아니라면 false를 반환한다.

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

shift()

shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 연이은 나머지 값들의 위치를 한칸 씩 앞으로 당긴다.

그리고 제거된 요소를 반환한다. 이 메서드는 배열의 길이를 변하게 한다. 빈 배열의 경우 undefined 를 반환한다.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

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

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

unshift()

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

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]

indexOf()

indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환한다.

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

저 2번째 인자는 탐색을 시작할 위치를 나타낸다. 2번째줄 코드를 예로 들면 2번째 인덱스부터 탐색을 시작한다는 의미.

 

includes()

includes() 메서드는 배열이 특정 요소를 포함하고 있는지 판별합니다. 반환값은 boolean.

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

2번째 인자값은 탐색 시작할 위치 근데 배열의 길이와 같거나 크다면 false를 반환한다. 

 

Array.from()

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해

새로운Array 객체를 만듭니다.

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

첫번째 줄 코드는 문자열을 인자로 받아 이를 배열로 반환하는것이고

2번째줄 코드는 첫번째 인자로 배열을, 두번째 인자로 각각의 배열에 적용할 함수를 건내주고 있다.

--추후 수정-- 

 

slice()

slice() 메서드는 어떤 배열의 begin부터 end까지(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(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

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"]

음수 인덱스는 배열의 끝에서부터의 길이를 나타냅니다. slice(-2) 는 배열에서 마지막 두 개의 엘리먼트를 추출

두번째 인자를 넘기지 않으면, 시작 인덱스가 가리키는 값부터 배열의 마지막 값까지 모두 복사 (ex. slice(2))

첫번째 인자도 넘기지 않으면, 배열의 처음 값부터 마지막 값까지 전체를 복제해버리는 효과를 낼 수 있습니다. (ex. slice())

아무리 많이 호출해도 원본 배열의 값은 절대 건드리지 않는다. 원본 배열이 그대로 보존되야 하는 상황에서 매우 유용하게 사용

splice() 

 배열로 부터 특정 범위를 삭제하거나 새로운 값을 추가 또는 기존 값을 대체할 수 있다.

반환값으로는 제거한 요소를 담은 배열. 하나의 요소만 제거한 경우 길이가 1인 배열을 반환한다.

아무 값도 제거하지 않았으면 빈 배열을 반환한다.

첫번째 인자로 시작 인덱스(index), 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을

가변 인자로 넘길 수 있다. 

const num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
nums.splice(5, 3)
[5, 6, 7]
nums
[0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19] 
// 삭제된 3개의 값을 담고 있는 배열이 반환되며, 원본 배열로 부터 3개의 값이 빠져나간 것을 알 수 있다.

nums.splice(5, 0, -5, -6, -7)
[]
nums
[0, 1, 2, 3, 4, -5, -6, -7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
// 삭제된 값이 없으므로 빈 배열이 반환되고, 이전에 값이 삭제된 자리에 -5, -6, -7을 들어간 것을 알 수 있다.

nums.splice(10, 2, -10, -11)
[10, 11]
nums
[0, 1, 2, 3, 4, -5, -6, -7, 8, 9, -10, -11, 12, 13, 14, 15, 16, 17, 18, 19]
// 삭제된 2개의 값을 담고 있는 배열이 반환되며, 원본 배열의 10, 11이 있던 자리에 -10, -11에 들어가 앉아있는 것을 볼 수 있다.

splice() 함수를 사용할 때 가장 주의할 부분은 삭제된 값을 담고 있는 새로운 배열이 반환될 뿐만 아니라 원본 배열에도 변경이 가해진다는 점. 

출처 : https://www.daleseo.com/js-array-slice-splice/   

 

concat()

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

추가된 새로운 배열을 반환을 한다.

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"]

mutable vs immutable 

mutable => 변할 수 있다는 뜻, 참조타입, 해당 데이터 주소를 찾아서 값을 변경함 

immutable => 불변, 변할 수 없다는 뜻,  원시타입,  해당 데이터 주소와 별개의 새로운 주소에 값이 할당

immutable

• Array.concat()
• Array.slice()

mutable

• Array.splice()
• Array.unshift()
• Array.shift()
• Array.push()
• Array.pop()