JavaScript _배열 [Array].join, split, sort, reverse

 join  

• 배열 → 문자열
• 요소들을 연결해 하나의 값으로 만들 때

array.join(매개변수: 각 요소를 구분할 문자열)

( 매개변수를 생략하면 배열의 원소들의 쉼표로 구분한다.)

 

const arr = ['하나', '둘', '셋'];

console.log(arr.join());
// 하나,둘,셋

console.log(arr.join(''));
// 하나둘셋

console.log(arr.join('-'));
// 하나-둘-셋

 split  

• 문자열→ 배열
• 문자열을 나누거나 구분하는 방법이 필요할 때

str.split('구분의 기준이 되는 문자열')

const beforeStr = "010-123-4567";

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

//['010', '123', '4567']

---

 sort  

: 배열의 요소를 정렬한 후 그 배열을 반환하는 것이다.

 

▶︎ 기본구조     

arr.sort(compareFunction)

 

▶︎ compareFunction 무엇일까?

: 비교하는 로직을 담고 있는 함수를 의미한다. 

• 음수일 경우 a<b 순서가 바뀜
• 양수일 경우 a>b 순서가 바뀌지x
• 0일 경우 동일한 크기이기 때문에 바뀌지 X

 //기본 원리(오름차순)-> 내림차순은 부등호 반대  
 function compare(a, b) {
  if (a가 b보다 작다.) {
    return -1;
  }
  if (a가 b보다 크다.) {
    return 1;
  }
  // a가 b와 동일한 경우
  return 0;
}

// 오름차순 
arr.sort(function(a, b)  {
  return a - b;
});

//내림차순 
arr.sort(function(a, b)  {
  return b-a;
}); 

//완전 간결하게 쓸수도 있다!!
arr.sort((a,b) => a-b);
arr.sort((a,b) => b-a);

 

✨  실무에서 쓰는 방법

: 브라우저마다 동일 값에 대한 순서를 정하는게 다르기 때문에!!

 

//오름차순 
arr.sort((a, b) => (a[key] < b[key] ? -1 : (a[key] > b[key] ? 1 : 0))) 

//내림차순 
arr.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key] ? 1 : 0)))

---

 

 reverse 

• 배열의 순서를 거꾸로 뒤집고 싶을 때 
• 원본 배열이 변형된다. 그대로 유지하고 싶을시 원본배열을 복사해서 사용해야한다!

const cafe = ['coffee', 'cake', 'tea', 'cookie'];
cafe.reverse();  //['cookie', 'tea', 'cake', 'coffee']

// 결과를 보면 뒤집어진 채로 원본 배열이 변형된다 
cafe  // ['cookie', 'tea', 'cake', 'coffee']

// 원본 배열을 유지하고 싶을시 원본배열 복사해서 사용하기 
const reverse = cafe.reverse();

 

+ 배열을 뒤집는건 for 문으로도만 구현할 수 있는지 알았다..  

const reverse = [];
for(let i=cafe.length-1; i >= 0; i--) {
  reverse.push(cafe[i]);
}
// reverse
// ['cookie', 'tea', 'cake', 'coffee']