배열 매소드(array methods)

자바스크립트에서 기본적으로 제공해주는 함수가 무수하게 많다고 한다

그중에서 실무에서 유용하게 쓰이는 것들만 알아보자

let iveMembers = [

    '안유진',

    '가을',

    '레이',

    '장원영',

    '리즈',

    '이서',

];

console.log(iveMembers);

array타입으로 리스트형식의 오브젝트를 만들었다

[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

// push()

iveMembers.push('갓용환');

console.log(iveMembers);

push () 함수는 array타입에 어그먼트값을 추가한다

.push 라는 함수로 어그먼트값에 '갓용환' 값을 지정하면

[

  '안유진', '가을',

  '레이',   '장원영',

  '리즈',   '이서',

  '갓용환'

]

맨뒤의 index번호로 '갓용환'이 추가된걸 볼 수 있다

console.log(iveMembers.push('갓용환'));

console.log(iveMembers);

그리고 iveMembers.push의 반환값은

7

[

  '안유진', '가을',

  '레이',   '장원영',

  '리즈',   '이서',

  '갓용환'

]

7으로 새로 반환된 array의 길이를 반환해준다

 

// pop()

console.log(iveMembers.pop());

console.log(iveMembers);

pop() 함수는 마지막 index값을 삭제한다

그리고 그 삭제한 값을 반환한다

갓용환

[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

 

// shift()

console.log(iveMembers.shift());

console.log(iveMembers);

shift() 함수는 첫번째 index값을 삭제하고 

삭제한 값을 반환한다

안유진

[ '가을', '레이', '장원영', '리즈', '이서' ]

 

// unshift()

console.log(iveMembers.unshift('안유진'));

console.log(iveMembers);

unshift() 함수는 어그먼트값을 index순서의 맨 첫번째로 지정하고

지정된 array의 길이를 반환한다

6

[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

 

// splice()

console.log(iveMembers.splice(0, 3));

console.log(iveMembers);

splice() 함수는 지정된 index순서부터 지정된 개수만큼 삭제한다

.splice(0, 3) 이 값이므로 0번 index ~ 부터 3개 삭제이므로

안유진, 가을,레이 가 삭제된다

[ '안유진', '가을', '레이' ]

[ '장원영', '리즈', '이서' ]

위의 안유진, 가을, 레이 는 splice함수로 삭제된 값을 반환해준 것이고

밑에 장원영, 리즈, 이서 는 splice함수로 삭제되고 남은 array를 반환해준 것이다

 

현대에서는 한번 선언한 변수값을 바꾸지 않는다고 한다

위에서 작성했던 함수들은 선언한 변수값을 변경할 수 있었다

이제 선언한 변수값을 바꾸지않는 함수를 알아보자

 

// concat()

console.log(iveMembers.concat('갓용환'));

console.log(iveMembers);

concat () 이라는 함수로 '갓용환'이라는 값을 지정하면

[ '장원영', '리즈', '이서', '갓용환' ]

[ '장원영', '리즈', '이서' ]

이렇게 iveMembers라는 array에 '갓용환'이라는 값이 마지막에 추가되어

push형태의 함수이다

하지만 그 다음으로 콘솔창에 iveMembers를 출력했을때는

'갓용환'이 추가되지 않았다

 

그러므로 iveMembers라는 array는 값이 변하지 않았고

concat을 사용한 코드만 array값이 추가된것이다 

그래서 .concat 함수를 사용한 array와 사용하지 않은 array는 

다른 array이다

 

iveMembers = ['안유진', '가을', '레이', '장원영', '리즈', '이서'];

console.log(iveMembers);

console.log('-----------');

그리고 다시 array의 값들을 초기화 시켯다

이때 나는 다시 let으로 선언했는데

SyntaxError: Identifier 'iveMembers' has already been declared

이라는 에라가 떳다 

이 에러는 let과 const는 똑같은 이름의 변수를 재선언 할 수 없는데

재선언 했기 때문에 나타나는 에러이다

그래서 let키워드 없이 위 코드처럼

그냥 변수명과 값을 지정해서 초기화 해야한다

// slice()

console.log(iveMembers.slice(0, 3));

console.log(iveMembers);

slice() 함수는 어그먼트 값에 따라 array의 index순서로 자르는 함수이다

splice의 형태이다

[ '안유진', '가을', '레이' ]

[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

이렇게 0번 부터 1번 2번 index값을 잘라온다

하지만 콘솔창에 iveMembers를 출력하면

값이 변하지 않은걸 볼 수 있다

 

// spread operator

let iveMembers2 = [

      ...iveMembers

]

console.log(iveMembers2);

spread는 퍼트리다 라는 뜻이다

해당 코드처럼 iveMembers2라는 변수를 선언하고

그 값에 array타입인 대괄호 [] 를 사용해서

기존에 있던 array인 iveMembers을 ...(spread 기호는 ...이라고 한다)을 사용해

적용해보면

[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

이렇게 iveMembers의 index값들을 전부 불러올 수 있다

let iveMembers3 = [iveMembers];

console.log(iveMembers3);

만약 ...기호를 쓰지않고 그냥 iveMembers 값들을 저장하라고 하면

[ [ '안유진', '가을', '레이', '장원영', '리즈', '이서' ] ]

이렇게 대괄호 안에 대괄호가 생긴다

이것은 iveMembers3의 index값의 0번 값이 iveMembers 값이 되어 이렇게 출력된다

let iveMembers4 = iveMembers;

console.log(iveMembers4);

그럼 이렇게 변수를 선언하면

[ '안유진', '가을', '레이', '장원영', '리즈', '이서' ]

당연히 iveMembers의 index값들이 출력된다

console.log(iveMembers4 === iveMembers);

그리고 두 array를 비교하면

true

당연히 true가 출력이 된다 

console.log([...iveMembers] === iveMembers);

하지만 ...iveMembers와 iveMembers를 비교하면 어떻게 나올까

false

false가 나온다

그러면 ...iveMembers는 iveMembers와 메모리에 저장된 주소가 다르다는 의미이다

 

 

이제부터는 압도적으로 많이 쓰이는 함수라고 한다

// join()

console.log(iveMembers.join());

join() 함수는 해당 array의 index값들을 하나로 합쳐 string타입으로 변환한다

안유진,가을,레이,장원영,리즈,이서

이렇게 ,(콤마)를 기준으로 array값이 string타입으로 변환되어 출력된다

console.log(typeof iveMembers.join());

typeof으로 자로형을 물어보면

string

string이라고 출력된다

console.log(iveMembers.join('/'));

join의 아그먼트 값으로 나눔의 기준이 되는 문자를 넣을 수 있다

위의 코드처럼 '/' 을 지정하면

안유진/가을/레이/장원영/리즈/이서

이렇게 나눔의 기준이 / 가 된다

console.log(iveMembers.join(', '));

어그먼트 값에 ,와 한칸 띄우면

안유진, 가을, 레이, 장원영, 리즈, 이서

이렇게 ,와 한칸 띄어서 string타입으로 변환된다

 

 

// sort()

// 오름차순

iveMembers.sort();

console.log(iveMembers);

sort() 함수는 array의 배열들을 오름차순으로 정렬해준다

[ '가을', '레이', '리즈', '안유진', '이서', '장원영' ]

이렇게 ㄱ~ㅈ 순으로 순서대로 정렬되어 출력된다

sort() 함수는 기존 array값을 바꾸는 함수이다

console.log(iveMembers.reverse());

반대로 reverse() 라는 함수로

내림차순(역순)으로 정렬할 수 있다

[ '장원영', '이서', '안유진', '리즈', '레이', '가을' ]

ㅈ~ㄱ순으로 역순으로 정렬

 

// indexOf

indexOf는 배열의 제일 첫번째부터 원하는 값을 찾아서 인덱스 번호를 반환해준다

const arr = ['가', '나', '다', '라', '다'];

arr.indexOf('다');

console.log(arr.indexOf('다'));

 

아규먼트 값으로 '다' 를 찾으면 

제일 앞에있는 '다' 를 찾는다

인덱스 번호가 2이므로

2을 반환

2

 

 

// lastIndexOf

lastIndexOf는 배열의 제일 마지막부터 원하는 값을 찾아서 인덱스 번호를 반환해준다

const arr = ['가', '나', '다', '라', '다'];

arr.lastIndexOf('다');

console.log(arr.lastIndexOf('다'));

 

맨 마지막 부터 '다' 를찾아서

마지막 '다'는 인덱스 번호 4이므로

4를 반환

4

 

 

indexOf, lastIndexOf  배열에서 찾고자 하는 값이 없을때

-1 을 반환한다

 

//map()

맵은 해당 배열을 순회하면서 새로운 배열을 생성한다

//map()

const MAP_TEST = iveMembers.map((할당되는변수) => {

  if ('안유진' === 할당되는변수) {

    return `리더 : ${할당되는변수}`;

  }

  return 할당되는변수;

});

이렇게 map함수안에 콜백함수로 할당되는변수 하나 를 지정해주고

if문으로 조건을 걸었다

 

[ '장원영', '이서', '리더 : 안유진', '리즈', '레이', '가을' ]

그럼 if문의 조건에 충족되게 되면 if문의 동작문이 실행되며 배열에 추가된다

 

const MAP_TEST = iveMembers.map((할당되는변수) => {

  return 할당되는변수;

});

그럼 조건을 걸지 않고 바로 리턴값을 주면

[ '장원영', '이서', '안유진', '리즈', '레이', '가을' ]

기존 배열과 당연히 똑같다

 

//filter()

filter 함수도 파라미터값에 함수를 지정하게 된고 배열안에 조건에 맞는 친구들만 골라

새로운 배열을 생성해준다 

//filter()

let numbers = [1, 2, 3, 4, 5, 6, 7];

const FILTER_RESULT = numbers.filter((할당되는변수) => )

이렇게 numbers라는 배열이 있고

filter함수를 사용해서 짝수 or 홀수 or 원하는 조건을 만족하는 친구들 을 꺼내올 수 있다

filter 함수도 파라미터값에 콜백함수를 지정하게 되는데 콜백함수는 하나의 파라미터만 갖는다

콜백함수의 파라미터는 해당 배열을 순회하면서 배열의 순서대로 할당된다

 

//filter()

let numbers = [1, 2, 3, 4, 5, 6, 7];

const FILTER_RESULT = numbers.filter((할당되는변수) => 할당되는변수 % 2 === 0);

console.log(FILTER_RESULT);

해당 filter함수의 조건은 나머지가 0인 친구들이다

즉 조건에 맞는(true) 짝수들만 뽑아 새로운 배열을 만든다

[ 2, 4, 6 ]

 

 

//find()

const FIND_RESULT = numbers.find((할당되는변수) => 할당되는변수 % 2 === 0);

console.log(FIND_RESULT);

find 함수는 filter와 비슷하지만 

배열중 조건에 맞는 가장 앞에있는 값 하나만 반환한다

2

 

//findIndex()

const FIND_INDEX = numbers.findIndex((할당되는변수) => 할당되는변수 % 2 === 0);

console.log(FIND_INDEX);

findIndex 함수는 find와 비슷하지만 find는 값을 반환하고

findIndex는 조건에 맞는 가장 앞에있는 값의 인덱스 번호를 반환한다 

조건에 맞는 값은 2

2의 인덱스 번호는 1이므로 1을 반환할것이다

1

 

 

//reduce()

 

const REDUCE = numbers.reduce(콜백함수, 초기값)

reduce함수는 두개의 파라미터를 갖는데

첫번째는 콜백함수

두번째는 초기값이다

콜백함수는 두개의 파라미터를 갖는데

첫번째는 초기값을 할당받는 변수

두번째는 배열을 순회하면서 하나씩 할당되는 변수이다

const REDUCE = numbers.reduce((초기값, 할당되는변수) => 초기값 + 할당되는변수, 초기값)

이런 식으로 함수를 사용할 수 있고 설명은 위의 사진이다

 

만약 reduce 함수의 초기값이 없을시 배열의 제일 첫번째(index 0번)값이 초기값이 되고

배열의 두번째 (index 1번)이 할당되는 변수에 할당이 된다

그래서 초기 값이 없을시 배열의 길이가 4면 3번 반복하게 된다