배열 - array method에 대하여 (API) - 1

배열 Array

1/ 배열 선언 (string - array)

2/ 배열의 반복문

3/ 더하고 빼고 복사하기

4/ 데이터 검색

 

 

배열 관련 method 공부를 미루다가 이제야 했다.

method는 함수와 같이 데이터를 return하면서 데이터타입을 변형시켜주기도 한다.

 

* 이런 API 공부는 키워드를 VSC에서 키워드를 치고 ctrl을 누른채 클릭하면 무슨 기능을 하는지, 어떤 인자들을 넣어야 하는지 자세히 설명이 나온다. 구글링도 좋은 방법이지만, 직관적으로 내장된 API 사용법을 보는 것도 좋다고 한다..

 

 

1/ 배열 선언

 #1. string을 array로 바꿔주는 방법

 

   1. .split('separator')

 

    separator 구분자를 넣어주지 않으면 문자열이 뭉쳐서 4개 아니라 총 1개의 요소를 가진 배열이 나온다. 

const fruits = '🍎, 🥝, 🍌, 🍒';
const fruits_arr = fruits.split(',')
console.log(fruits_arr)
 // 출력 :(4) ['🍎', ' 🥝', ' 🍌', ' 🍒']

 

반면, array를 string으로 바꿔주려면?

 

 

 #2. array를 string으로 바꿔주는 방법

 

1. new String( )

 

     아래 출력 부분처럼 apple/banana/orange 단어 단위로 쪼개지지 않고, 알파벳 단위로 쪼개졌다.

     이렇게 할 경우 litral, primitive type 즉 원시값이 아니라 object type의 문자열로 변환된다. 

 

let fruits = ['apple', 'banana', 'orange']
let fruits_str = new String(fruits)
console.log(fruits_str)
// 출력
// String {'apple,banana,orange'}
// 0: "a"
// 1: "p"
// ....(생략)
// 17: "g"
// 18: "e"
// length: 19
// [[Prototype]]: String

 

2. .join('separator')

 

배열 뒤에 join을 붙이고 구분자를 인자로 넣어주면 끝

이때 저 separator는 optional한 부분이므로, 비워두면 default로 콤마(,)가 들어간다.

 

let fruits_str2 = fruits.join('/')
console.log(fruits_str2)
// 출력 apple/banana/orange

console.clear()
let fruits_str2 = fruits.join()
console.log(fruits_str2)
// 출력 apple,banana,orange

 

3. .toString( )

 

 join처럼 배열을 문자열로 바꿔주지만, 구분자 옵션은 없어서 기본적인 콤마(,)로 구분되어 return된다.

 

 

2/ 배열의 반복문 

 

1. for

 

자주했던 거라 설명은 생략

 

const fruits = ['apple','banana']
for (let i= 0; i<fruits.length; i++){
  console.log(fruits[i])
}
//출력 
apple
banana
orange

 

2. for of

 

for 문과 흡사하나 살짝 다름

/ for 문 안에서 변수 선언하는 거 까진 같으나, of 를 써서 배열을 낱개의 문자열로 풀어주는 효과 

for (let arr of arrs){ }

 

for (let fruit of fruits){
	console.log(fruit);
    }

 

3. .forEach( )

 

 인자값으로 callback 함수를 받아온다.

=> 배열의 개수 만큼 돌건데 이 함수의 값이 돌거다 라는 뜻

 

forEach의 콜백함수 인자로는 배열의 데이터 / index# / 배열 전체 

 

* 콜백함수 = 함수 내에 매개변수로 들어가는 함수

  콜백함수 용도 = 뭔가 순차적으로 실행하고싶을 때 쓴다. (중요한 내용이라 따로 포스팅해야겠다)

 

콜백함수의 모든 인자를 다 받아올 경우 (배열 내 각각의 데이터 / index / 배열 전체)

fruits.forEach(function(fruit,index,array){
	console.log(fruit,index,array)
    })

아래와 같이 출력

이 때, for과 같이 데이터만 뽑아내고싶으면 인자를 하나만 쓴다.

arrow 함수 써보면,

fruits.forEach((fruit) => console.log(fruit))

아래와 같이 출력

 

** Arrow 함수
함수명이 없는 익명함수 (변수에 함수를 담아 호출하는 형태) 에만 쓰인다.
let/const 변수명 = ( ) => { } 의 형태
좀더 자세히,,
let/const 함수를 담을 변수 선언 = (인자값 넣거나말거나) => {함수 내 출력문}

const printhello = () => console.log('hello!')
const add = (a,b) => a+b;
const multiply = (a,b) => {return a*b}​

 

4. .filter( )

 

arr.filter( )도 콜백함수를 인자로 가져온다.

이 콜백함수의 인자는 처리할 요소들을 넣고, 함수 내의 테스트를 통과해서 true인 요소들만 걸러내주는 메서드이다.

나머지 인자들은 나중에 쓸 때 알아보면 될듯..

 

콜백함수로 익명함수 넣을 시

let cats = ['hoochu', 'dori', 'mongzi', 'pudding', 'cheddar']

let shortname = cats.filter(cat => cat.length < 7)
console.log(shortname)

//출력 : (3) ['hoochu', 'dori', 'mongzi']​

 

콜백함수로 일반함수 넣을 시

function undervalue(value){
  return value >= 10;
}

let filtered = [12, 5, 30, 9, 150, 55].filter(undervalue)
console.log(filtered)
// 출력 : (4) [12, 30, 150, 55]​

 

5. .map( )

 

배열 내의 모든 요소들을 대해서 함수를 호출한 결과를 모아 새로운 배열을 반환해주는 메서드이다.

arr.map( )도 콜백함수를 인자로 데려온다.

 

let num = [1,2,3,4,5]
let doubles = num.map(x=>x*2)
console.log(doubles)
console.log(num)

num 배열의 각 요소들이 함수를 거쳐서 doubles라는 새로운 배열이 담겨 나온다.
num은 그대로 [1,2,3,4,5]를 유지한다.

 

 

6. .reduce( ) 

 

이건 시간날때 알아봐야지,,