[드림코딩 by 엘리] 자바스크립트 기초 강의_(3)

1. 배열(Array)

• index는 0부터 시작
• 한 배열안에는 동일한 타입의 데이터를 넣음 (javascript는 여러 타입이 가능하지만 권장x)

 

- 선언(Declaration)

const arr1=new Array();
const arr2=[1,2];

 

const fruits=['🍎','🍌'];
console.log(fruits);

- index position: index로 접근

console.log(fruits[0]); //apple
console.log(fruits[fruits.length-1]) //마지막 data

 

- 전체 탐색

a. for

for(let i=0;i<fruits.length;i++){
    console.log(fruits[i]);
}

b. for of

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

c. forEach

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

• callback 함수
• forEach(callbackfn:(value: T, index: number, array:T[])=>void, thisArg? any): void
• 배열의 값, index, 배열을 인자로 넘기는 콜백함수

 

- 삽입, 삭제, 복사

a. push , pop : 마지막을 기준으로 삽입 / 삭제

fruits.push('🍓','🍒');

fruits.pop();

 

b. unshift, shift : 처음을 기준으로 삽입 / 삭제

fruits.unshift('🍋','🍉');

fruits.shift();

🔔 pop, push에 비해 (un)shift는 전체 데이터를 움직이기 때문에 더 느림

 

c. splice: index를 이용해 삭제 및 붙이기

fruits.splice(1,2); //index 1부터 2개 삭제 (index 1,2 삭제)
					//fruits.splice(1)이면 1부터 마지막까지 삭제

console.log(fruits);

fruits.splice(1,1,'🍋','🍉');//지우고 이어줌
console.log(fruits);

fruits.splice(1,0,'🍋','🍉');//지우지않고 그 위치에 이어줌
console.log(fruits);

d. concat: 두개의 배열 합치기

const fruits2=['🍑','🍐','🍅'];
const newFruits=fruits.concat(fruits2);

 

- 검색

newFruits배열 

a. indexOf : index 찾기

console.log(newFruits.indexOf('🍑')); //5
console.log(newFruits.indexOf('🍔')); //없는 값이면 -1

b. includes: 포함 여부

console.log(newFruits.includes('🍑')); //true
console.log(newFruits.includes('🍔')); //false

c. 중복값이 있을때 

console.log(newFruits.indexOf('🍋')); //1
console.log(newFruits.lastIndexOf('🍋')); //3

 

 2. 배열 함수

 

- join('separator') : Array => String

const fruits = ['apple', 'banana', 'orange'];
const result=fruits.join(','); // 'apple,banana,orange'

- split('separator') : String=> Array

const fruits = '🍎, 🥝, 🍌, 🍒';
const result=fruits.split(','); 

// (4) ['🍎', ' 🥝', ' 🍌', ' 🍒']

- reverse( ) : 배열 뒤집기, 원본 배열도 같이 변경됨

const array = [1, 2, 3, 4, 5];
const result=array.reverse();

console.log(array); //[5, 4, 3, 2, 1]
console.log(result); //[5, 4, 3, 2, 1]

- slice( ) : 배열 자르기

const array = [1, 2, 3, 4, 5];
const result=array.slice(2);

console.log(result); //[3, 4, 5]
console.log(array); //[1, 2, 3, 4, 5]

🔔splice( )는 원본 배열을 자름

console.log(array.splice(2,3)); //[3, 4, 5]
console.log(array); //[1, 2]

- find(callbackfn) : 처음으로 조건이 맞는 것을 return

class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
];

const result=students.find((student,index)=>student.score===90);

- filter(callbackfn) : 조건에 맞는 data를 배열에 저장

const result=students.filter((student)=>student.enrolled===true);

- map(callbackfn) : 함수에 따라 기존 배열의 값을 mapping하여 return

const result=students.map((student)=>student.score); //[45, 80, 90, 66, 88]

- some(callbackfn) : 하나라도 조건에 맞으면 true / every(callbackfn) : 모두 조건에 맞으면 true

const result=students.some((student)=>student.score<50);//true

const result=!students.every((student)=>student.score>=50);//true

//같은 조건을 뜻하는 코드

- reduce(callbackfn,초기값) : 누적값을 전달, (prev, curr)

const result=students.reduce((prev,curr)=>prev+curr.score,0); //369

- 함수 여러개 연결 / sort( ): 정렬 , 오름차순은 a-b 내림차순은 b-a

ex) 점수를 string으로 연결하고 정렬

const result=students
    .map((student)=>student.score)
    .sort((a,b)=>a-b)
    .join(',');
    
   console.log(result); //'45,80,90,66,88'