Javascript 배열 ,배열메서드(Array.isArray, pop, shift......)

배열이란?

순서가 있는 값

배열에서 순서는 index 로 사용되며 값은 index 로 조회 및 제거, 변경이 가능

또한 길이를 알아내서 사용도 가능 - length

이중 배열로 사용가능

 

배열안에서 사용 가능한 메서드

1. Array.isArray

2. indexOf

3. includes

4. pop, shift

5. push, unshift

6. join

그외 

concat, split, slice, splice...

 

메서드 마다 어떤 특징을 가지고 있는지 알아보자

 

• Array.isArray

Array.isArray 는 주어진 값이 배열인지 아닌지를 판별해서 Boolean 형태로 출력해준다

const arr = [1,2,3,4,5];
const str = "string";
const obj = {key:"value"};
const num = 123;
const bool = true;

console.log(Array.isArray(arr)); //true
console.log(Array.isArray(str)); //false
console.log(Array.isArray(obj)); //false
console.log(Array.isArray(num)); //false
console.log(Array.isArray(bool)); //false

 

배열이 아닌 문자열, 객체, 숫자, Boolean 모두 배열이 아니기에 false 출력

 

• indexOf

주어진 값이 배열안에 있는지 있다면 몇번째에 있는지 index 로 출력

단 베열안에 주어진 값과 똑같은 값이 중복된다면 제일 앞에서 중복된 값의 index 출력

만약 배열안에 같은 값이 없다면 -1 출력 (0 ~ ...n까지중에 없기에 -1 출력)

const idxOf = 3;

/* 한개만 중복될떄 */
let arr = [1,2,3,4,5];
//세번째에서 중복 단 index는 0부터 시작
console.log(arr.indexOf(idxOf)); // 2

/* 여러개 중복될떄 */
arr = [1,3,2,3,5];
//3이라는 숫자가 2번 반복이 되지만 제일 앞에서 중복되는 index 1 이 출력이 됨
console.log(arr.indexOf(idxOf)); // 1

 

• includes

배열안에 있는 값중에 같은 값이 있는지 확인하여 Boolean 으로 출력

let arr = [1,2,3,4,5];
console.log(arr.includes(1)); // true
console.log(arr.includes(6)); // false

 

• pop, shift

배열안에 요소를 제거하는 메서드

let arr = [1,2,3,4,5];
arr.pop();
console.log(arr); // [ 1, 2, 3, 4 ]

pop() 은 배열 맨 뒤의 요소 삭제

let arr = [1,2,3,4,5];
arr.shift();
console.log(arr); // [2,3,4,5]

shift()는 배열 맨 앞의 요소 삭제

• push, unshift

배열안에 요소를 추가 하는 메서드

let arr = [1,2,3,4];
arr.push(5);
console.log(arr); //[1,2,3,4,5]

push() 는 n 이라는 인자 배열 맨 뒤에 요소 추가

let arr = [1,2,3,4];
arr.unshift(5);
console.log(arr);//[5,1,2,3,4]

unshift() 는 n 이라는 인자 배열 맨 앞에 요소 추가

• join

배열을 문자열로 합침

let arr = [1,2,3,4];
console.log(arr.join("")); //1234

• 그외 ( concat, split, slice, splice... )

split - 문자열을 공백 기준으로 잘라 배열로 만들어줌

let word = "I am not Array"
console.log(word.split(" ")) // -> ["I", "am", "not", "Array"]

참고로 이렇게 출력이 된다고 해서 word 가 배열로 바뀐것이 아님. 저 상태로 console 찍어보면 string 으로 출력됨
그렇기에 새로운 변수에 결과값을 할당을 해줘야 함

let word = "I am not Array";
console.log(word.split(" ")); // -> ["I", "am", "not", "Array"];
console.log(typeof word);
let arr = word.split(" ");
console.log(arr);

여기서 알고 가야 하는건 arr 은 지금 배열임
하지만 콘솔로 arr 을 typeOf 로 출력해보면 object 로 출력됨 그렇기에 지금 이 변수가 배열인지를 확인하기 위해서는 Arrray.isArray 사용해야함

console.log(typeof arr); // object
console.log(Array.isArray(arr)); //true

 

concat - 한개 이상의 배열을 합쳐줌

let arr = [1,2]
let arr2 = [2,3]
console.log(arr.concat(arr2)) // [1,2,3,4]

 

slice - 배열의 요소를 지정한 부분을 잘라냄

let arr = [1,2,3,4,5];
console.log(arr.slice(0,1)) // 1

slice( a , b ) slice 안에는 두개의 인자가 들어감(선택하고자 하는 index).

a는 시작지점 (위의 코드를 예시로 들면 0번째부터~)  b는 종료지점 

단 b 는 인자값 앞부분으로 잘림. 즉 b 부터 뒤에는 제거됨

 

여기서 가장 많이 사용하는 팁중 하나는 바로 맨 뒤에를 자르고 싶다! 하면 아래처럼 하면 됨!

let arr = [1,2,3,4,5];
console.log(arr.slice(0, -1)); // [1,2,3,4]

slice(0, -1) 으로 사용하면 맨뒤에 요소를 제거하고 출력함

 

---

가끔 배열관련 문제를 풀다보면 배열의 최댓값을 구하라는 것이 있음

이건 Math.max() 를 사용해서 푸는 방법이 있음

 

일단 Math,max() 는 어떻게 사용하는 걸까?

console.log(Math.max(1,2,3,4,5)) // 5

이처럼 숫자중에 가장 큰값을 출력한다

 

하지만 배열을 그냥 넣어버린다면 어떻게 되는걸까? 

let arr = [1,2,3,4,5];
console.log(Math.max(arr)) //NaN

Math 는 숫자를 인자로 가져야 구동이 된다. 보통 Math 객체의 메서드들은 기본적으로 숫자를 인자로 생각함

 

배열안에 있는 숫자 요소중 가장 큰 값을 구하고 싶을떈 전개연산자를 사용해야함

let arr = [1,2,3,4,5];
console.log(Math.max(...arr)) // 5

 

여기서 전개 연산자란??

Spread Operator(전개 연산자)는 ES6 문법으로 '...' 이렇게 점 3개로 표현하고,

객체나 배열의 원소들을 하나씩 꺼내어서 펼쳐서 리턴함