JS 내장함수 array편

Array객체란 배열을 다루는 내장함수와 속성에 대한 내용이다.

toString(): 배열안에요소를 문자로 반환하는기능이있다.

ex)

let arr = ["Banana","Orange","Apple","Mango"]

console.log(arr.toString())
console.log(typeof arr.toString())

위코드에서 arr이라는 변수안에 배열을 toString()을이용해 요소들을 문자로 만들었고 typeof 를이용해 확인할 수 있다.

join(): join()은 ()안에 특정문자를 넣어 배열에 요소와 요소사이에 특정문자를 넣어주고 하나의 문자열로 만들어준다

ex)

let arr = ["Banana","Orange","Apple","Mango"]

console.log(arr.join("-"))
console.log(typeof arr.join("-"))

위코드를 실습해보면 요소와요소사이에-가들어가고 하나의 문자열로 출력되는것을 확인 할 수 있다 이때 arr이란변수에서 요소와요소사이에 ,는 왜 출력되지않는지에 대해 의문일수있는데 배열에서,는 요소와 요소를 나눠주는 기능일뿐 요소가아니기때문이다.

pop(): pop()은 배열에 마지막요소를 제거하고 그 요소를 반환한다. 이때 기존에 배열에 영향을 미치기때문에 마지막요소는 기존배열에서 사라지게된다.

ex)

let arr = ["Banana","Orange","Apple","Mango"]
let arr_pop = arr.pop()

console.log(arr_pop)
console.log(arr)

위코드에서 arr_pop은 마지막요소인 Mango를 console창에 출력하고
arr을 console창에 출력해보면 기존에있던 Mango가 없어졌음을 확인 할 수 있다.

push(): push()는 어떠한 내용을 배열에 추가할때 사용하고 추가된배열은 기존배열에 마지막요소 다음에 배치된다. push또한 기존배열에 영향을 미치기 때문에 기본배열에 마지막요소 다음에 새로운요소가 추가된다.
pop과 다르게 추가된 새로운요소는 반환되지않는다.

ex) 

let arr = ["Banana","Orange","Apple","Mango"]
let arr_push = arr.push("Kiwi")

console.log(arr_push)
console.log(arr)

shift():shift()는 배열에서 첫 번째 요소를 제거하고 첫번째 요소를 반환한다.  shift또한 기존 배열에 영향을 미치고 pop과 비슷한 기능을 보이지만 pop은 마지막요소를 제거 반환했다면 shift는 첫번째요소를 제거 반환한다.

ex)

let arr = ["Banana","Orange","Apple","Mango"]
let arr_shift = arr.shift()

console.log(arr)
console.log(arr_shift)

위코드를 보면 Banana가 제거 반환되었음을 확인 할 수 있다.

unshift(): unshift()는 배열에서 첫번째요소 앞에 어떤 요소를 추가한다. 이때 기존배열에 영향을 미친다. push()는 마지막요소 뒤에 요소를 추가하지만 unshift는 첫번째요소 앞에 요소를 추가한다는 차이가있다.

ex)

let arr = ["Banana","Orange","Apple","Mango"]
let arr_unshift = arr.unshift("Kiwi")

console.log(arr)
console.log(arr_unshift)

부가설명 : 배열에서 요소를 추가제거할때 push()와pop()이 배열에 마지막요소 뒤에 요소를 추가 제거하기때문에 하나의짝꿍이고 unshift()와shift()는 배열에서 첫요소 앞에 내용을 추가 제거하기때문에 하나의 짝궁이라 알아두면 좋을듯 싶다.

배열에서 요소를 변경할 때에는 배열에 인덱스 번호를 이용해 새로운 요소를 할당한다.
ex)

let arr = ["Banana","Orange","Apple","Mango"]
arr[0]="Kiwi"

console.log(arr)
위코드와같이 arr이라는 변수에담긴 배열에 0번인 Banana를 인덱스 번호를 이용해 Kiwi로 바꾼것을 확인 할 수 있다.

splice() : splice()는 새로운 요소를 특정 위치에 추가해주는 기능이 있는데 이때 주의점은 기존에있던요소가 삭제 될 수 있다. ()안에 첫번째 파라미터는 배열에서 몇번째에 넣어줄지에대한 내용을적고 두번째 파라미터에는 첫번째파라미터에 인덱스번호를 기준으로 다음 몇개를 지울지에대해
설정하는데 0을쓰면 어떤요소도 삭제되지않는다 세번째요소부터 몇번째까지든 계속 작성할수있는데 이때부턴 넣어주고싶은 내용을 적으면된다.

ex)

let arr= ["Banana","Orange","Apple","Mango"]
arr.splice(2,0,"kiwi","lemon)

console.log(arr)

위코드를 해석하면 arr이라는 배열에 kiwi와 lemon을 넣고싶은데 위치는 arr에 인덱스2번즉 Apple자리에넣고싶어(1번파라미터) 근데 요소를 따로 삭제하고싶지는않네?(2번파라미터) 자이제 kiwi랑 lemon을 넣어줄깨 (3번,4번파라미터)
또한 splice는 기존 배열에 영향을 미친다는점도 주의하자.
 
concat(): concat()은 문자열에대한 내장객체에서도배웠지만 배열에서도 똑같은 기능이다 배열에서 concat은 배열과 배열을 합춰준다.
ex

let arr1= ["Banana","Orange","Apple","Mango"]
let arr2=['a','b','c','d']
let arr3=['1','2','3','4']

console.log(arr1.concat(arr2,arr3))

위코드와같이  ,를기준으로 몇개에 배열이든 합칠 수 있다.

slice():slice() 또한 문자열에서 배웠듯이 배열안에 요소를 잘라내는 기능을한다.  이때 첫번째파라미터에는 시작점(시작점에 요소를 포함한다) 두번째파라미터에는 종료점(종료점에 요소는 포함되지않는다) 
또한 종료점인 두번째파라미터는 생략이 가능한데 생략하게되면 시작점부터 마지막요소까지를 출력한다 또한 기존배열에는 영향을 미치지않는다.

ex)

let arr= ["Banana","Orange","Apple","Mango"]

console.log(arr.slice(3))
console.log(arr.slice(1,3))
console.log(arr)

sort(): sort()는 배열에 존재하는 요소들을 오름차순으로 정렬한다. 즉 작은값이 배열에 시작점 쪽에 배치되고 큰값이 종료점 쪽에 배치된다. 
ex)

let fruits = ["Banana","Orange","Apple","Mango",]
console.log(fruits.sort())

위코드를 해석하면 fruits라는 변수안에 배열을 담았고 console창에 sort()를이용해 정렬할깨 라는 말이되는데 이때 알파벳은 a가 가장 작은값이고 z가 가장 큰값에 해당한다.
오름차순으로 정렬하니 apple,banana,mango,orange순으로 정렬될것이다.

sort()를사용할때 숫자를 정렬할때는 함수를 사용해서 정렬해야한다.
ex)

let points =[100,20,40,10,1]

console.log(points.sort(function(a,b){return a-b}))

위코드에서 숫자가 정렬되는 방식에 대해설명하자면 points를 sort()로 정렬할때 함수를 만들어 a와b라는 파라미터를 설정한다 그럼 sort()는 배열에 담긴 1번째요소를 a 2번째요소를 b라고인지하는것을 시작으로  2번째와3번째 3번째와4번째를 4번째와 5번째를 반복하여 비교한다.
출력값인 return으로 연산을하는데 이떄 값이 음수이면 비교한 요소들에 위치가 바뀌지않고 양수이면 요소의 순서가 바뀐다.

 

1번과정 = 100에서20을 뺸다 즉 100-20= 80이므로 양수에 해당하므로 위치가바뀐다

 

2번과정 = 1번과정에서 100과 20에 위치가 바뀌었으므로 100이 2번째요소에 해당되고 100에서 40을 뺀다 즉 100-40=60이므로 양수이다 100과 40에위치가 바뀐다.

 

3번과정 = 2번과정에서 100과 40에 위치가 바뀌었으므로 100이 3번째요소에 해당되고 100에서 10을 뺀다 즉 100-10=90이므로 양수이다 100과 10에위치가 바뀐다.

 

4번과정 = 3번과정에서 100과 10에 위치가 바뀌었으므로 100이 4번째요소에 해당되고 100에서 1을  뺀다 즉 100-1=99 이므로 양수이다  100과 1에위치가 바뀐다.
1,2,3,4번에과정으로 인데 [20,40,10,1,100] 으로 정렬된다. 

 

sort()는 위에 1,2,3,4번에 과정을 배열안에서 위치변동이 없을때까지 계속반복하여 오름차순으로 정렬시키는 구조를 가진다 
위1,2,3,4번을 위치변동이 없을때까지 반복하면 결과적으로 points = [1,10,20,40,100]으로 정렬된다. 
위 과정에대해 한번 깊게 생각해보는 것을 권장한다. 그래야 이해할수 있고 이해할수있어야 나중에도 잘 써먹을 수 있다.

이때 위 sort()로 정렬된값을 역순으로 표현하고싶다면 reverse()를 사용한다.
ex)

let points = [100,20,40,10,1]
points.sort(function(a,b){return a-b})
console.log(points.reverse())

reverse()를 사용해서 오름차순으로 정렬된값을 역순으로 만들고싶다면  먼저 sort()를 이용해야한다는점을 숙지하자!

filter() :filter()는 어떠한 배열에서 특정 조건을 만족하는 요소를 걸러내어 새로운 배열을 만들어내는 기능을한다. 이때 콜백함수라는것을 사용하는데 내용이 어려워서 이해하기 힘들다면 이렇게 사용하는구나 하고 연습을 반복하길 권한다.

ex)

let words = ['spray','limit','elite','exuberant','destruction','present'];

let result = words.filter(function(word){
  return word.length>6
})
console.log(result)

위코드를 해석하면서 filter함수 사용법을 설명하고자한다.

일단 words라는 변수안에 배열이있다. 필자는 배열안에 요소중에 글자수가 6보다큰 요소를 걸러서 출력하고싶다고 가정하자 

filter()는 새로운 배열을 만드므로 새로운 변수를 하나지정 해준후에 그곳에 words에 fillter()함수를 적용시킨다

 

()안에 function(word)라는것이 콜백함수에 해당하는데 그냥 콜백함수가 뭔지는 일단 신경쓰지않는다.

그후 function에 ()안에 word라는 파라미터를 넣어줬는데 word가 아니라도 어떤 이름을 지정해도 상관없다. 이 word라는 파라미터는 words안에 요소들을 전부 조회하는 기능을 한다고 알아두자 

그후 return을 사용하여 뭔가를 출력할껀데  이return값에는 내가 원하는 조건을 설정해주는 구역이라 생각하면된다. 필자는 글자수가 6보다큰 요소를 출력하고싶기때문에 word.length>6이라했는데 

여기서 이해가 안갈수있는게 word에 뭐가들어있는지 이해가 힘들수있다 그래서 위 글 초반에  word라는 파라미터가 words라는 배열에 요소를 전부 조회한다 설명한것이다 

그렇다 word라는 파라미터는 이미 words라는 배열에 요소들을 전부 조회했기때문에 words에 내용을 전부 알고있다.
그래서 word.length를 이용해 글자가 6글자 이상인 요소를 걸러 result변수에 새로운 배열을 만들어내는 구조라고 말할 수 있다.

map():map()은 배열안에 내용이 객체로 이루어져있을때  배열에담긴 내용을 이용해서 새로운 형태로 수정 할 수 있는 기능을 가진다.

ex)

let userlist = [{
    firstName: "재석",
    lastName: "유",
    email: "yu@gmail.com"
  },

  {
    firstName: "종국",
    lastName: "김",
    email: "kim@gamil.com"
  },

  {
    firstName: "세찬",
    lastName: "양",
    email: "yang@gamil.com"
  },

  {
    firstName: "석진",
    lastName: "지",
    email: "ji@gamil.com"
  },
]

let userlist2 = userlist.map(function(user){
  return {
   fullName:user.lastName+user.firstName,
   firstName:user.firstName,
   lastName:user.lastName,
   email:user.email
  }
})

console.log(userlist2)

위 코드를 해석하면서 map()에 사용법에 대해 이야기해보고자한다 일단 배열안에 객체로 이루어진 형태를 만들어주어야 한다. userlist =[{}] 이러한형태인데 여기서 []는 배열을 구성해주고 {}는 객체를 형성한다.

그렇게 내용(데이터)을 만들어줬는데 필자는lastName과 firstName을 합친 객체을 추가하고싶다고 가정하자 이때 map()을 이용해서 새로운 객체을 만들 수 있다 map()도 filter와 같이 콜백함수를 이용해야하는데 일단 콜백함수가 뭔지는 신경쓰지않는다.

그후에  새로운 객체가 생성된 배열을 담을 변수를 설정해줘야하는데 그것이 userlist2이다 우리는 userlist에 대한 내용을 이용해 새로운 객체를 만들어줄것이기때문에 userlist2 = userlist.map()이라고 작성 해야한다.

이때map()안에는 콜백함수가 들어가기때문에 map(function(user)) 라고 적어준것이고 이 콜백함수에 ()안에 파라미터인 user를 이용해 userlist안에 내용을 조회할 수 있다고 알아두자 파라미터인user은 꼭 user이아니더라도 다른이름을 설정해줘도 상관없다 

 

중요한것은 이름이아니라 이 파라미터가 userlist에 내용(데이터)을 조회한다는것이다. 그후에 return을이용해 출력값으로 새로운 객체가 추가된 배열을 만들어주면 된다. 

reudce() : reduce()는 주로 배열에 담긴 내용(데이터값)에 합계를 구하는데 사용된다. 콜백함수를 사용하고 이함수에 파라미터를 이용해 누적값을 구하는데

1번파라미터는 누적값을 저장하는데 사용되고

2번파라미터는 배열에있는 요소를 하나하나 넣어준다.

3번째파라미터에는 인덱스번호,

4번째 파라미터에는 배열이들어가는데 주로 2번째 파라미터까지만사용하기에 일단은 그렇게 알아주었으면한다.

ex)

let points = [40,100,1,5,25,10]
let sum = points.reduce(function(accumulate,element){
  return accumulate + element
})

console.log(sum)
위코드를 해석하자면 points라는변수에 배열을 담았고 필자는 이값을 전부더하고싶다고 가정하자 이때 reduce()함수를 이용 할수있는데 일단 points에 reduce함수를 쓴다고 컴퓨터에게 알려주기위해 points.reduce()를써준다 

그후에 콜백함수를 사용하는데 일단 콜백함수가 뭔지는 신경쓰지않는다 그후에 파라미터를 지정해줘야하는데 위에서 설명했듯이 1번파라미터는 누적값을 저장하고 2번파라미터는 points에 요소를 하나하나 조회한다.

그후 return이라는 출력값을통해 1번파라미터와 2번파라미터를 더해주면 총액이나오는데 이 과정에서 대해설명하자면 

 

처음에 1번파라미터는 0이다 2번파라미터는 요소하나하나를 조회하기에 처음엔40이들어가고return을통해 두값을 더해주면 0+40=40 이고 누적값인 1번파라미터에 저장된다 

 

그후 누적값인 1번파라미터는 40인상태에서 2번파라미터가 2번째요소인 100을 조회후 return을 이용해 40과 100을 더해준다 40+100= 140이고 이값은 누적값에해당되는 1번파라미터에 저장된다.

이과정을 2번파라미터가 모든요소를 조회할때까지 반복하여 배열안에 요소를 전부 더해주는 구조라고 말 할수있다.

부가적으로 하고싶은말 :  다른 내장함수와 다르게 fillter와 map, reduce는 어렵다(특히 reduce 사람이라면 한대패고싶다.) 필자는 지금까지 쓴 모든 내장함수중에 구조와 사용방식을 이해하는데 fillter와 map,reduce가 가장 어려웠다.

 

하지만 독자가 인강이든 ,책이든 어떠한 자료를 참조하든간에 꾸준하게 반복하고 내용을 이해하려 노력하는 태도를 가진다면 언젠간 자유자제로 쓸수있을거라 생각한다. 

 

필자도 책에 대한 내용을 공부하면서 학습일지식으로 블로그에 글을 올리면서 현재 2회독중인데 1회독했을때보다 구조파악이나 사용방식에 대해서 훨씬이해가 잘된다. 

 

개인적인 생각이지만 컴퓨터 언어에대한 문법을 익히는데 단순히 코딩만해서는 절때 잘할 수 없다고 생각한다.
핵심은 이해이다. 어떻게 사용하는지 구조는 어떤지에대해 생각하라 그래야 비로소 본인에 것이 될수있다. 

 

언젠간 이문법도 올드해지고 사용되지않을 수 있다. 하지만 구조와 사용방식에대해 이해하고자하는 태도를 가지고 꾸준히 연습한다면 JS문법이 아니라 어떤 언어를 하더라도 잘 할수있을것이다.

분명 이 과정에서 뚝배기가 깨질것같고,,, 하기싫어 질수있다. 적어도 필자는 그러하다. 하지만 포기하지않고 꾸준히 하니 필자의 뚝배기를 아프게하고 하기싫었던 JS가 좋아질라한다. 변태인가,,, 

또한 이과정속에서 받는 고통은 공부를 열심히 하고있다는 증거이기도 하기에 나름 명예로운상처가아닌가싶다..ㅎㅎ 여튼 개발공부를 하는 모든이들이 목표지점까지 잘되기를 바란다 이상!