03-2. JavaScript 내장함수(Array) with 자바스크립트 제대로 배워볼래?(Section 02)

스터디 3주차 🐬
-JS 강의 섹션2 (자바스크립트 내장 함수)까지 듣기

JavaScript

Section 02. 자바스크립트 내장 함수

4. Array

• toString(): array를 string으로 변환

var fruits=["banana","orange","kiwi"];
console.log(fruits.toString());
//banana, orange, kiwi 출력

• join()

console.log(fruits.join("*"));
//*을 기준으로 join
//banana*orange*kiwi 출력

• push()

//string에 이어서 문자열 추가하는 방법1
var txt="hello";
txt+= "everyone~";

//arr에 push 이용하여 string 추가
var arr=[];
arr.push("one");
arr.push("two");

• pop()
  :가장 마지막에 추가한 element return

• shift() :배열의 첫번째 element 제거후 리턴

var numbers=["one","two","three"];
var s=numbers.shift();
console.log(s);
console.log(numbers);

//출력값
//one
//['two', 'three'] 

• unshift(): 배열의 첫번째 인덱스에 새 element추가

numbers.unshift("zero");
console.log(numbers);
//['zero', 'two','three'] 출력

• splice(a,b,c)
  -a: 시작 위치, b: 삭제할 element 수, c: 추가할 요소
  그 뒤로부터 element를 이어서 넣는다

let seasons=["spring","summer","autumn","winter"];
seasons.splice(1,2,"봄과 겨울 사이");

console.log(seasons);
//출력값: ["spring","봄과 겨울 사이","winter"]

• concat

var myInst=["guitar"];
var myFx=["eq","reverb"];
var mine=myInst.concat(myFx);
console.log(mine);
//출력값: ["guitar", "eq","reverb"]

• slice()

var seasons=["spring","summer","autumn","winter"];
var seasons2=seasons.slice(1,3);
//index 1번부터 3번 전, 즉 2번인덱스까지의 값 리턴
consoel.log(seasons2);
//출력값: ['summer', 'autumn']

• ⭐!sort!

1. abc 순으로 정렬

var arr=["vienna","budapest","seoul","praha"];
console.log(arr.sort());

// ['budapest', 'praha', 'seoul', 'vienna'] 출력

2. 오름차순으로 정렬

 var points=[4,2,33,9,10];
        console.log(points.sort());
        //10,2,33,4,9으로 출력
  /* sort는 저 숫자들을 문자열로 바꾼 후 
  정렬시키때문에 맨 앞자리 수로(4,2,3,9,1)을 
  기준으로 정렬이 된다. 
  */

그래서 다시 sort함수를 수정해줘야 한다.

오름차순으로 정렬

points.sort(function(a,b){
/*
if(a>b) return 1;
else if(a<b) return -1;
else return 0;
*/
return a-b;

});

내림차순으로 정렬하려면 마지막에 return b-a;를 해주면됨

다음은 obejct를 배열에 넣고, 그 배열속 객체들의 값을 비교하는 함수를 작성한 예시이다.

 var btob=[
          {name:"현식",point:100, city:"seoul"},
         {name:"창섭",point:90,city:"seoul"},
         {name: "성재",point:80,city:"vienna"}
         ];
 
 
 btob.sort(function(a,b){
 
 /*
 if(a.point>b.point) return 1;
 else if(a.point<b.point) return -1;
 else return 0;
 */
 
 //간단한 ver
 return a.point>b.point?1: a.point<b.point?:-1:0;

 });
 
 console.log(btob.sort());

출력값:

(3) [{…}, {…}, {…}]
0
: 
{name: '성재', point: 80, city: 'vienna'}
1
: 
{name: '창섭', point: 90, city: 'seoul'}
2
: 
{name: '현식', point: 100, city: 'seoul'}

• ⭐filter
  : 조건에 맞는 배열만 리턴

//예시 1
var pass=btob.filter(funciton(person){
return person.point>80;
});

console.log(pass);
/*0
: 
{name: '창섭', point: 90, city: 'seoul'}
1
: 
{name: '현식', point: 100, city: 'seoul'}

두 객체만 리턴
*/


//예시 2
var seoul=btob.filter(function(person){
return person.city=="seoul";

});

console.log(seoul);

/*
0
: 
{name: '창섭', point: 90, city: 'seoul'}
1
: 
{name: '현식', point: 100, city: 'seoul'}

리턴

*/

예시3
const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number > 3);

filter의 장점은 for문으로 직접 돌리는 것보다 훨씬 간단하다는 것!

• ⭐! reduce !
  reduce(a,c,i,arr)
  -a(accumulator): 누산기
  -c(curreunt value):현재 한개한개의 값
  -i(current index): 현재 index 값
  -arr(전체 배열)

var arr1=[1,2,3,4,5];
var total=0;

total=arr1.reduce(fucntion(accumulator,current){
return accumulator+current;
});

console.log(total); //15출력

• ⭐! map !
  -새로운 배열 생성하며 기존 배열에서 원하는 값을 이용하여 추가로 새로운 값을 생성할 수 있다.

var userList=[
            {firstName:"bom", lastName:"oh",email:"bom@gmail.com"},
            {firstName:"bom2", lastName:"oh2",email:"bom2@gmail.com"},
            {firstName:"bom3", lastName:"oh3",email:"bom3@gmail.com"},
        ];
        
        
 var userList2=userList.map(function(user){
 return {fullName:user.lastName+user.firstName, email:user.email};
 });
 /*기존 userList에 있던 firstName과 lastName 값을 합쳐
 fullName이라는 값 생성,
 기존에 있던 email값도 가져올 수 있음 
 */
 
 console.log(userList2);
 /*
 0: {fullName: 'ohbom', email: 'bom@gmail.com'}
1: {fullName: 'oh2bom2', email: 'bom2@gmail.com'}
2: {fullName: 'oh3bom3', email: 'bom3@gmail.com'}
 */