귤귤의 대모험

배열 뒤에 요소를 추가하는 방법으로 push를 알아보도록하자

자바스크립트 배열 자료형은 Linked List 자료구조 형태를 갖고 있다.

따라서 배열 앞과 뒤에서 요소를 추가하는 것이 가능하다

Array 내장객체 메소드 push는 배열 뒤에서 요소를 추가한다

const festa = ['mang'];

festa.push('chimmy');

festa.push('tata')

festa.push('cooky');

festa.push('shooky');

festa.push('koya');

festa.push('rj');

festa.forEach(name => {

  console.log(name);

});

//결과

mang

chimmy

tata

cooky

shooky

koya

rj

문장 순서대로 festa 배열 뒤에 요소를 추가한다

반복문을 이용하여 festa 배열의 요소들을 콘솔로 출력한다.

위 코드를 크롬 콘솔에서 확인하면 결과가 위와 같이 나온다

아래와 같은 코드를 다시 보며 잘 생각 해보자

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하고 나머지를 변수에 저장한다

const array2 = ["b", "c", "d"];

const a9 = array2.push("e"); 

//배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다

배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다

2020/06/02 - [JavaScript/splice 배열 인덱스로 특정요소 수정하기] - splice - 배열 인덱스로 특정 요소 수정하기

배열 push(), pop(), unshift(), shift()

배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하고 나머지를 변수에 저장한다

const array2 = ["b", "c", "d"];

const a9 = array2.push("e"); 배열의 요소 "e"가 마지막 배열 인덱스에 추가되고 배열길이 값을 a9에 저장된다

const a8 = array2.pop(); "e"는 변수 a8에 저장되고 마지막 배열인 "e"가 제거된다

const a7 = array2.unshift("a"); 배열 요소 "a"가 제일 첫 배열 인덱스에 추가하고 배열길이 값을 a7에 저장된다

const a6 = array2.shift() "a"는 변수 a6에 저장되고 첫번째 배열인 "a"가 제거된다

배열의 끝에 여러 요소 추가하기 concat()

concat 메서드는 배열의 끝에 여러 요소를 추가한 사본을 반환한다

const array3 = [1, 2, 3];

const a5 = array3.concat(4, 5, 6); 

const a4 = array3.concat([4, [5, 6]]);

변수 a5에 두개의 문자열을 합쳐서 저장하고 array3의 원본값은 변경되지 않는다

배열에 배열을 묶어 합치게 되어 [1, 2, 3, 4, [5, 6]] 사본이 a4에 저장된다

배열 일부 가져오기 slice()

const array4 = [1, 2, 3, 4, 5];

const b3 = array4.slice(1,3);

변수 b3에 array4 배열 인덱스 1부터 3까지 요소를 저장하고 원본은 변동이 없다

첫 번째 매개변수 어디서 부터 가져올지 정하며 두번째는 어디까지 가져올지를 정한다

splice() 임의의 위치에 요소 추가하거나 제거하기

const array5 = [1, 3, 5, 7];

const b4 = array5.splice(1, 2);

매개 변수 첫번째 값은 배열의 인덱스 넘버부터 두 번째 인자값의 숫자만큼 요소를 제거한다

제거하고 남은 변수 b4에 저장한다 이 예제에서는 [3, 5]이다

(매개변수 세번재, 네번째는 추가할 요소를 지정할 수 있다)

첫 번째 매개변수 어디서부터 가져올지 정하며 두 번째는 어디까지 가져올지를 정한다

배열정렬과 역순정렬 sort() reverse()

array4.reverse(); array4는 이제 [5, 4, 3, 2, 1] 입니다

array4.sort(); array4는 이제 [1, 2, 3, 4, 5] 입니다

const array8 = [{ name : "Suzanne" }, { name : "Jim" }, { name : "Taervor" }, { name : "Amanda" }];

array8.sort((a, b) => a.name > b.name ); array8은 name 프로퍼티의 알파벳 순으로 정렬됩니다.

array8.sort((a, b) => a.name[1] < b.name[1] );

array8은 name 프로퍼티의 두번째 글자의 알파벳 역순으로 정렬됩니다

some, every

단지 조건에 맞는 요소가 있는지 없는지 확인만 필요할 때 사용하는 메서드

some은 조건에 맞는 요소를 찾으면 즉시 검색을 멈추고 true를 반환하며, 찾지 못하면 false를 반환한다.

const array12 = [5, 7, 12, 15, 17];

array12.some(x => x %2 === 0); true; 12는 짝수입니다.

array12.some(x => Number.isInteger(Math.sqrt(x))); false; 제곱근 수가 없다.

every는 배열의 모든 요소가 조건에 맞아야 true를 반환하여 그렇지 않다면 false를 반환합니다.

every는 조건이 맞지 않는 요소를 찾아야만 검색을 멈추고 false를 반환합니다.

const array13 = [4, 6, 16, 32];

array13.every(x => x%2 === 0); true; 홀수가 없습니다.

array13.every(x => Number.isInteger(Math.sqrt(x))); false; 6은 제곱수가 아닙니다.

map과 filter * 가장 유용한 메서드이다

map과 filter 메서드는 모두 사본을 반환하며 원래 배열은 바뀌지 않으며 함수로 구성된 배열을 말한다

함수로 구성된 배열이 있는데 프라미스가 필요하다면, 일정한 형식의 배열을 다른 형식으로 바꿔야 한다면,

Map을 사용하기 바랍니다. 아래의 예제를 참고하세요

const cart = [{ name : "Widget", price : 9.95 }, { name : "Gadget", price : 22.95 }];

const names = cart.map( x => x.name ); ["Widget", "Gadget"];

const prices = cart.map( x => x.price ); [9.95, 22.95];

const discountPrices = prices.map( x => x * 0.8 ); [7.96, 18.36];

콜백 함수는 각 요소에서 호출될 때 요소 자체와 요소 인덱스, 배열전체를 매개변수로 받는다

map()는 배열의 정보들을 가지고와서 새로운 문자열을 이나 배열을 만들기에 효율이 높다

그리고 map이 배열의 각 요소를 변형한다

const items = ["Widget", "Gadget"];

const price = [9.95, 22.95];

const cart = items.map((x, i) => ({ name : x, price : price1[i]}));

위의 결과 cart : [{ name : "Widget", price: 9.95 }, { name : "Gadget", price : 22.95 }]

객체를 괄호로 감싼 이유는 화살표 표기법에서 객체 리터럴의 중괄호를 블록으로 판단하기 때문

아래의 예제와 같이 map와 filter를 결합하면 다양한 일을 할 수 있다

const cards = [];

for(let suit of ['H', 'C', 'D', 'S'])

for(let value = 1; value <= 13; value++)

cards.push({ suit, value });

value가 2인 카드

let valueNumber = cards.filter(c => c.value === 2); c.value값이 2인것을 찾아내어 변수에 저장

cards.filter(c => c.suit === 'D');

cards.filter(c => c.value > 10);

cards.filter(c => c.value > 10 && c.suit === 'H');

function carToString(c){

const suits = { 'H' : '\u2665', 'C' : '\u2663', 'D' : '\u2666', 'S' : '\u2660' };

const values = { 1: 'A', 11 : 'J', 12 : 'Q', 13 : 'K' };

for(let i = 2; i <= 10; i++)

values[i] = i;

return values[c.value] + suits[c.suit];

}

const k = cards.filter(c => c.value === 2 ).map(carToString);

const k1 = cards.filter(c => c.value > 10 && c.suit === 'H').map(carToString);

splice()

- 특정 시작 인덱스부터 인덱스까지 값을 추가하거나 그 자리에 있는 값을 삭제할 수 있는 메서드

- 배열. splice(시작 인덱스, 삭제할 요소의 개수, 추가될 요소들)

• 첫번째 인자인 시작인데스는 배열 요소가 변경될 시작 지점입니다. splice는 특정 위치의 요소를 지정하는 것이 필수라 반드시 첫 번째 인자 값은 배열 길이보다 작아야 유효합니다
• 두 번째 인자인 삭제할 요소의 개수는 시작 인덱스의 위치부터 삭제하고자 하는 개수만큼 요소를 제거합니다. 이때 해당 요소가 제거됨과 동시에 메서드 호출 결과로 값을 반환합니다
• 세 번째 인자에 추가될 요소들을 지정하면, 시작 인덱스부터 해당 요소들이 추가됩니다.

const fruits = ['melon', 'lemon', 'source', 'apple', 'juice']

fruits.splice(4, 1) // ['melon', 'lemon', 'source', 'apple']

fruits.splice(4, 0, 'grape') // ['melon', 'lemon', 'source', 'apple', 'grape']

fruits.splice(2, 1, 'mandarin', 'strawberry', 'watermelon') 
	// ['melon', 'lemon', 'mandarin', 'strawberry', 'watermelon', 'apple', 'grape']

//결과
// ['melon', 'lemon', 'mandarin', 'strawberry', 'watermelon', 'apple', 'grape']

- splice(4, 1)를 실행하면 과일이 아닌 juice 문자열이 추출됩니다.

- splice(4, 0, 'grape')는 삭제할 개수를 지정하지 않아 추출되는 요소가 없습니다. 그러나 세번재인자로 인해 시작 인덱스에 grape 문자열이 추가됩니다.

배열. indexOf("A")의 활용

- indexOf()는 배열에 해당하는 문자를 찾아서 인덱스 값을 반환한다

- splice와 응용하여 시작인덱스 값을 구할 수 있다

var arr = ["A", "C", "D", "A", "E", "F", "A"];

var arr_splice = arr.splice(1, 3) // 1번부터 3개의 요소 ["C", "D", "A"] 꺼낸다

console.log(arr); // ["A", "E", "F", "A"] console.log(arr_splice) - ["C","D","A"]

arr.splice(arr.indexOf("A"), 1, "a"); // "A"를 찾아서 "a"로 변경한다.

배열의 마법사 reduce 매우 중요하다

Array 객체의 메소드  reduce는 배열 요소를 순환하면서, 정의된 callback 함수에 의해 단일 값으로 누적시킬 수 있다

reduce 메소드의 형태는 인자로 callback 함수와 초기값을 받는다

첫 번째 callback 함수는 기존과 메소드와 달리 여러 매개변수를 정의 한다

아래와 같이 최대 4개까지 매개변수를 받고,  첫 번째 누적된 값과 현재 요소 값은 필수이다

reduce 메소드가 처음에 실행할 때, 누적된 값은 두번째 인자(초기값)을 할당 받는다

이후에는 배열 순환이 끝날 때까지  callback 함수에서 반환된 값을 재할당된다

배열 내 값을 누적시키기

const numArr = [1, 2, 3, 4, 5];

const result  =  numArr.reduce((acc, el) => {

      return acc + el

}, 0);

console.log(result);

결과 15

숫자형 값이 나열된 배열 리터럴을 numArr 변수에 대입한다

reduce의 callback 함수 매개변수로, 첫 번째 acc(누적된 값)과 el(현재 요소값)을 정의한다

매개변수로 전달된 acc와  el를 합산하여, callback 함수 결과 값으로 반환한다

이렇게 반환된 값은 reduce로 순환된 다음 요소 차례에서 acc으로 할당되어 전달된다.

즉, return으로 반환된 값은  다음 배열요소의 acc가 된다는 의미이다.

또한, 배열의 모든 요소들을 순환하고 난 마지막 반환값이 바로 reduce 메소드의 결과 값이 된다.

초기값으로 숫자 0을 대입한다. 이 초기값은 첫 번째 요소에서는 acc로 대입된다.

따라서 배열의 각 요소를 순환하며 초기값 0부터 각 요소의 값들을 합산하게 되었을 때, 

0 + 1, 1 + 2, 3 + 3, 6 + 4, 10 + 5와 같이 진행된다 

배열의 마법사 reduce 활용하기

const array = [5, 7, 2, 4];

const sum = array.reduce((a, x) => a += x, 0);

위의 예제를 자세히 해석해봅시다

1. 첫 번째 배열 요소 5에서 (익명) 함수를 호출한다. a의 초깃값은 0이고 x의 값은 5이다.

함수는 a와 x(5)의 합을 반환한다 이 값은 다음 단계에서 a의 값이 된다

2. 두 번째 배열 요소 7에서 함수를 호출한다. a의 초깃값은 이전 단계에서 전달한 5이고

x의 값은 7이다 함수는 a와 x의 합 12를 반환한다 이 값은 다음 단계에서 a의 값이 된다.

3. 세 번째 배열 요소 2에서 함수를 호출한다. 이 단계에서 a는 12이고 x는 2이다.

함수는 a와 x의 합인 14를 반환한다

4. 네 번째이자 마지막 배열 요소인 4에서 함수를 호출한다. a는 14이고 x는 4이다.

함수는 a와 x의 합인 18을 반환하며 이 값은 reduce의 값이고 sum에 할당되는 값이다.

reduce는 보통 숫자나 문자열 같은 원시 값을 누적값으로 사용하지만, 객체 또한 누적값이 될수 있다

이를 통해 아주 다양하게 활용할 수 있다는 것을 간과하지 말지 말자 아래의 예제를 보자

const words = ["Beachba111", "Rodeo", "Angel", "Aardvark", "Xylophone", "November", "Chocolate",

"Papaya", "Uniform", "Joker", "Clover", "Bali"];

const alphabetical = words.reduce((a, x) => {

if(!a[x[0]]) a[x[0]] =[];

a[x[0]].push(x); 

return a; 

}, {}); 

배열의 문자열 한글자에 인덱스 넘버 0부터 시작된다

if(![a[x[0]])의 뜻은 첫 번째 배열의 첫 번째 요소가 있는지 확인하는 것이다

a[x[0]]는 "Beachba111"의 B를 찾아 그 이름으로 배열을 저장한다

거기에 push()로 x를 a[x[0]]에 저장한다 그렇게 되면 결과적으로 B : "Beachba111"되고

a를 리턴하여 alphabetical에 저장되어 중첩되고 words 배열에 요소가 없으면 끝이 난다

두번째 매개변수의 뜻은 {}에 기본 값을 설정하는 한다는 뜻이다

reduce는 통계에서도 사용할 수 있다. 예를 들어 데이터 셋의 평균과 분산을 계산한다고 생각해보자 아래의 예제를 보자

const data = [3.3, 5, 7.2, 12, 4, 6, 10.3];

const stats = data.reduce((a, x) => {

a.N++; 수학적 공식이라서 그냥 활용방법만 확인하자

let delta = x - a.mean;

a.mean += delta/a.N;

a.M2 += delta * (x - a.mean);

return a;

}, { N : 0, mean : 0, M2 : 0 }); -> 초기값을 설정합니다

if(stats.N > 2){

stats.variance = stats.M2 / (stats.N -1);

stats.stdev = Math.sqrt(stats.variance);

}

reduce의 유연성을 알아보기위해 예제를 더 살펴 보자

const longWords = words.reduce((a, w) => w.length > 6 ? a +" "+ w : a, "").trim();

logWords : Beachball Aardvark Xylophone November Chocolate Uniform

삭제되거나 정의되지 않은 요소들

Array 메서드는 삭제되거나 정의되지 않는 요소들을 다룰 때 쫌 당혹스럽게 동작하곤 한다

const array = Array(10).map((x) => 5); 이렇듯 array 요소는 전부 undefined이다 이와 비슷하게

배열 중간의 요소를 삭제하고 map을 호출하면 배열 가운데 undefined가 생긴다

const arr4 = [1, 2, 3, 4, 5];

delete arr4[2];

arr4.map(x => 0); // [0, 0, undefined, 0, 0];

일반적으로 배열을 다룰때는 정의된 배열을 다루고, 의도적으로 배열안에 빈 부분을 만든다 하더라도 delete를 사용하지 않는다

그래서 현실적으로 이런 동작이 문제를 일으킬 가능성은 거의 없다 하지만 알아서 나쁠 것은 없으니 알아두자