JavaScript - Array 내장함수 정리

많이 사용 되는 array 내장함수에 대해 정리해보고자합니다!

내장 함수란?
프로그래밍 안에서 별도로 import 없이 사용 할 수 있는 함수

---

toString() : 배열에 있는 내용을 문자열로 바꿔줌

→ ex) 배열.toString()

var fruits1 = ["Banana", "Orange", "Apple"];
console.log(fruits1.toString());  // BananaOrangeApple

---

join() : 사용자가 지정한 문자열로 이어줌

→ ex) 배열.join("연결할 문자")

var fruits1 = ["Banana", "Orange", "Apple"];
console.log(fruits1.join(" "));  // Banana Orange Apple

---

push() : 배열의 가장 마지막에 새로운 항목을 추가함

→ ex) 배열.push()

var fruits2 = ["Banana", "Orange", "Apple"];
fruits2.push("Kiwi");
console.log(fruits2);  // ['Banana', 'Orange', 'Apple', 'Kiwi']

---

pop() : 배열의 가장 마지막 항목을 리턴하며 배열에서 제외함

→ ex) 배열.pop()

var fruits2 = ["Banana", "Orange", "Apple"];
var arr2 = fruits2.pop();
console.log(arr2);  	// Apple
console.log(fruits2);  // ['Banana', 'Orange']

---

shift() : 배열의 첫번째 항목을 제거하여 리턴

→ ex) 배열.shift()

var fruits3 = ["Banana", "Orange", "Apple"];
var str = fruits3.shift();
console.log(str);		// Banana
consloe.log(fruits3);	// ['Orange', 'Apple']

---

unshift() : 배열의 첫번째에 새로운 항목을 추가함

→ ex) 배열.unshift()

var fruits4 = ["Banana", "Orange", "Apple"];
fruits4.unshift("lemon");
console.log(fruits4);  // ['lemon', 'Banana', 'Orange', 'Apple']

---

배열 값 바꾸기

기본 적인 방식

fruits4[0] = "Grape";  	// lemon ==> Grape
console.log(fruits4);  	// ['Grape', 'Orange', 'Apple']
console.log(fruits4.length);  // 3

// 배열 마지막 인덱스에 값을 넣음
fruits4[fruits4.length -1] = "Peach";
console.log(fruits4);  // ['Grape', 'Orange', 'Peach']

함수를 이용한 방법

splice(a, b) : a = 시작위치, b = 삭제할 항목 수

var fruits5 = ["Banana", "Orange", "Apple"];

fruits5.splice(1, 2);
console.log(fruits5);  // ['Banana']

fruits5.splice(1, 0, "Lemon", "Kiwi");  // 0개 제거 가능
console.log(fruits5);  // ['Banana', 'Lemon', 'Kiwi']

fruits5.splice(1, 1, "Lemon", "Kiwi");
console.log(fruits5);  // ['Banana', 'Lemon', 'Kiwi', 'Kiwi']

---

concat() : 두개의 배열을 하나의 배열로 만듦

→ ex) 배열.concat()

var arr1 = ['Hello'];
var arr2 = ['java', 'script'];
var arr = arr1.concat(arr2);
console.log(arr);  // ['Hello', 'java', 'script']

---

sort() : 배열을 정렬함

→ ex) 배열.sort()

var fruits8 = ["Banana", "Orange", "Apple", "Lemon", "Kiwi"];
console.log(fruits8.sort());  // ['Apple', 'Banana', 'Kiwi', 'Lemon', 'Orange']

var points = [40, 100, 70, 21, 99];
// 숫자를 문자로 인식하여 오름차순 정렬
console.log(points.sort());  // [100, 21, 40, 70, 99]

숫자 정렬 방법

var points = [40, 100, 70, 21, 99];

points.sort( function(a,b) {
	if(a>b)
		return 1;    // return true
	else
	return -1;      // return flase
});

간단하게 변환

// 오름차순 & 내림차순 정렬
points.sort( function(a, b) {
            return a-b;     // return b-a(내림차순)
        });
        
console.log(points);  			//[21, 40, 70, 99, 100]
console.log(points.reverse());  //[100, 99, 70, 40, 21]

object 정렬 방법

var persons = [
            {name:"유재석", point:78, city:"서울"},
            {name:"김종국", point:92, city:"대구"},
            {name:"양세찬", point:76, city:"서울"},
            {name:"하 하", point:81, city:"제주"} 
        ];

console.log(persons.sort());

objet에는 정렬이 적용되지 않는다.

//function을 이용해서 sort를 만들어야함
persons.sort( function(a,b) {
    //삼항 연산자 이용
     return (a.point > b.point) ? 1 : -1
});

console.log(persons) 
// 0: {name: '양세찬', point: 76, city: '서울'}
// 1: {name: '유재석', point: 78, city: '서울'}
// 2: {name: '하 하', point: 81, city: '제주'}
// 3: {name: '김종국', point: 92, city: '대구'}

---

filter() : 조건에 맞는 배열만 리턴

→ ex) 배열.filter( function(a) {()});

// filter을 이용해 point가 80이상인 사람만 출력
   var pass = persons.filter( function(per) {
       return per.point > 80;
   });
   console.log(pass)
   // 0: {name: '김종국', point: 92, city: '대구'}
   // 1: {name: '하 하', point: 81, city: '제주'}

// filter을 이용해 city가 서울인 사람만 출력
   var seoul = persons.filter( function(per) {
       return per.city === "서울";
   })
   console.log(seoul);
   // 0: {name: '유재석', point: 78, city: '서울'}
   // 1: {name: '양세찬', point: 76, city: '서울'}

---

reduce(a, c) : 누산기

→ ex) 배열.reduce( function(a, c) {()});

a : sccumulator = 누산기 / c : currentValue = 현재값

var arr4 = [1, 2, 3, 4];
var total = arr4.reduce( function(a,c) {
    return a+c;
});

console.log(total);  // 10

---

function을 사용하는 filter(), reduce()는 아직도 헷갈리는 것 같아요

더 더 열심히 공부하겠습니다

글 읽어주셔서 감사합니다!