Array(배열)

• object
  • 토끼(귀두개, 먹는다, 뛴다) & 당근(주황색, 비타민c)
  • 서로 연관된 특징과 행동들을 묶어 놓은것
• 자료구조
  • 비슷한 object끼리 묶어 놓은것
• 배열
  • 칸칸이 촘촘히 모여있는 자료구조
  • 인덱스가 지정되어 있음(0부터 시작)

1. Declaration (선언)

• const arra1 = new Array();
• cont arr2 = [1, 2];

2. Index position

const fruits = ['apple', 'banana'];
console.log(fruits); // (2)['apple', 'banana'] , 배열로 출력
console.log(fruits.length); // 2 , 배열의 길이 출력
console.log(fruits[0]); // apple , 인덱스 번호가 맞는 배열의 값 출력
console.log(fruits[1]); // banana , 인덱스 번호가 맞는 배열의 값 출력
console.log(fruits[fruits.length-1]); // banana , 길이 - 1 => 1

3. Looping over an array

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

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

// forEach(callbackFn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
fruits.forEach(fruit => console.log(fruit));

4. Additon, deletion, copy

// push : add an item to the end
fruits.push('strowberry', 'peach');
console.log(fruits);
        
// pop : remove an item from the end
fruits.pop();
console.log(fruits);

// unshift : add an item to the benigging
fruits.unshift('strowberry', 'peach');
console.log(fruits);

// shift : remove an item from the benigging
fruits.shift();
console.log(fruits);

// note!! shift, unshift are slower than pop, push

// splice : remove an item by index position
fruits.push('strowberry', 'peach', 'lemon');
console.log(fruits);
// .splice(index); index로 부터 뒤에 있는 모든 요소 삭제
fruits.splice(1);
// .splice(index, deleteCount); index로 부터 몇개의 요소 삭제
fruits.splice(1,1);
// .splice(index, deleteCount, ...item); index로 부터 몇개의 요소 삭제 후 뒤에 아이템 추가
fruits.splice(1,1, 'greenapple', 'waltermelon');

// combine two arrays
// 배열에 배열을 추가하여 새로운 배열을 반환
const fruits2 = ['pear', 'coconut'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits);

5. Searcing

// indexOf : find the index
// 해당 요소의 index를 찾아주며 없으면 -1 반환
console.log(fruits);
console.log(fruits.indexOf('apple')); // 0
console.log(fruits.indexOf('waltermelon')); // 2
console.log(fruits.indexOf('kiwi')); // -1

// includes
// 배열 안에 해당 요소가 있는지 없는지 true / false를 반환
console.log(fruits.includes('apple')); //true
console.log(fruits.includes('kiwi')); // false

// lastIndexOf
fruits.push('apple');
console.log(fruits);
console.log(fruits.indexOf('apple')); 
// 0, 배열안에 있는 해당 요소의 index를 찾아주는데 첫번째 요소만 찾고 반환
console.log(fruits.lastIndexOf('apple')); 
// 5, 배열안에 있는 해당 요소의 index를 찾아주는데 마지막 요소만 찾고 반환

6. 배열의 내장 함수

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
const array = [1, 2, 3, 4, 5, ... 8];
const todos = [
		{
			id : 1,
			text : '자바스크립트 입문',
			done : true
		},
		{
			id : 2,
			text : '함수 배우기',
			done : true
		},
		{
			id : 3,
			text : '객체와 배열배우기',
			done : true
		},
		{
			id : 4,
			text : '배열 내장함수 배우기',
			done : flase
		},
	       ]
const numbers = [10, 20, 30, 40];

01. forEach() 메소드

• 배열의 값을 출력할 때 사용하는 메소드

// 반복문을 사용하는 방법
for (let i = 0; i < superheroes; i++) {
	console.log(superheroes[i]);
}

// forEach(함수)
// 함수는 외부에 선언 후 작성해 줘도 된다
function print(hero){
	console.log(hero);
}

superheroes.forEach(print);

superheroes.forEach(function(hero) {
	console.log(hero)
});

superheroes.forEach(hero =></superheroes> {
	console.log(hero)
});

02. map() 메소드

• 배열 안의 원소를 다른 형태로 변환할 때 사용, 새로운 배열 반환

// 반복문을 통해서 값 변경
const squared = [];
for(let i = 0; i < array.length; i++) {
	squared.push(array[i] * array[i]);
}
// forEach(함수) 사용
const squared = [];
array.forEach(n=> {
	squared.push(n * n);
})
           
// map(함수) 사용
const square = n => n * n; // arrow function
const squared = array.map(square);
const squared = array.map(n => n * n);

// test
const items = [
		{
			id : 1,
			text : 'hello'
		},
		{
			id : 2,
			text : 'bye'
		}
	       ];

const texts = items.map(item => item.text);

03. indexOf() 메소드

• 배열에서 원하는 항목을 찾는 메소드(배열 값이 정수, 실수, 문자열, boolean 값일 경우 사용)
• 첫번째로 찾은 값을 반환

// 배열.indexOf('찾는 값');
const index = superheroes.indexOf('토르');

04. findIndex() 메소드

• 배열에서 원하는 항목을 찾는 메소드(값이 객체이거나 조건으로 인덱스를 찾을 때 사용)
• 첫번째로 찾은 값을 반환
• 특정 조건을 확인하여 조건이 일치하는 원소의 위치 반환

// 배열.findIndex(조건);
const index = todos.findIndex(todo => todo.id === 3);

05. find() 메소드

• 찾은 객체 자체나 원소 등을 반환

// 배열.find(조건);
const index = todos.find(todo => todo.done === false);

06. filter() 메소드

• 특정 조건을 만족하는 원소를 찾아서 배열로 반환

// 배열.filter(조건)
const taskNotDone = todos.filter(todo => todo.done === false);
const taskNotDone = todos.filter(todo => !todo.done);

07. splice() 메소드

• 배열에서 특정 항목을 제거하고 제거한 값을 반환

// 배열.splice(inidex, 제거할 갯수)
const index = numbers.indexOf(30);
numbers.splice(index,1);

08. slice() 메소드

• 배열에서 특정 항목을 잘라내서 배열로 반환 원본은 영향을 안 받음
• start index 에서 last index까지 last index의 값은 반환 안됨

// 배열.slice(start index, end index)
const sliced = numbers.slice(0,2);

09. shif() 메소드

• 첫번째 원소를 배열에서 추출, 원본에서 추출된 값 제거

// 배열.shift()
const value = numbers.shift();

10. pop() 메소드

• 마지막 원소를 배열에서 추출, 원본에서 추출된 값 제거

// 배열.shift()
const value = numbers.shift();

11. unshift() 메소드

• push() 메소드 처럼 값을 추가하는데 맨 앞에 추가

// 배열.unshift(추가할 원소)
numbers.unshift(5);

12. push() 메소드

• unshift() 메소드 처럼 값을 추가하는데 맨 뒤에 추가

// 배열.push(추가할 원소)
numbers.push(50);

13. concat() 메소드

• 여러개의 배열을 하나의 배열을 합쳐서 새로운 배열을 만든다, 원본은 그대로

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const concated = arr1.concat(arr2);
// 스프레드 연산자로 concat 대처
const concated = [...arr1, ...arr2];

14. join() 메소드

• 배열안의 값들을 문자열로 만들어 반환

const array = [1, 2, 3, 4, 5];
var arrStr1 = array.join();
//separator(문자열로 만들 때 배열 값 구분 문자) 수정
var arrStr2 = array.join(" ");
var arrStr3 = array.join(", ");

15. reduce() 메소드

• 배열이 주어졌을 때 배열안에 있는 값들을 모두 사용하여 연산할 때 사용
• accumulator는 누적되는 값, current는 원소
• index는 원소의 index, array는 배열 자신

// forEach문
const numbers = [1, 2, 3, 4, 5];
let sum = 0;
numbers.forEach( n => {sum += n;})
console.log(sum);

// 배열.reduce((accumulator, current) => 연산, 초기accumulator값)
const sum = numbers.reduce((accumulator, current) => accumulator + current, 0)
console.log(sum)

// 배열.reduce((accumulator, current, index, array) => 연산, 초기accumulator값)
const avg = numbers.reduce((accumulator, current, index, array) => {
			if (index === array.length - 1) {
				return (accumulator + current) / array.length;
			}
			return accumulator + current;
			}, 0)
console.log(sum)
        
// 배열안에 있는 각 알파벳의 갯수를 객체로 반환
const alphabets = ['a', 'a', 'a', 'b', 'c', 'c', 'd', 'e'];
const count = alphabets.reduce((acc, current) => {
			if (acc[current]) { <= acc.a
				acc[current] += 1;
			} else {
				acc[current] =  1;
			}
			}, {}) <= 비어 있는 객체 

Array Quiz

01. make a string out of an array

const fruits = ['apple', 'banana', 'orange'];

// .join(separator?: string): string;
// Adds all the elements of an array separated by the specified separator string.
// 배열의 있는 모든 요소를 더해서 string으로 return을 하는데
// 전달해준 separated를 문자열을 이용해서 구분자를 넣어서 반환해줘
// seoarated는 전달해줘도 되고 안해줘도 된다

const result = fruits.join();
const result = fruits.join('and');

02. make an array out of a string

const fruits = 'apple, kiwi, banana, cherry';

// .split(separtor: string | RefExp, limit? number) : string[];
// Split a string into substrings using the specified separtor
// 문자열을 전달해준 separotr을 기준으로 나누어 string array로 반환
// limit 사이즈를 지정해줘도 되고 안해줘도 된다 .split(",",2)

const result = fruits.spit(",");

03. make this array look like this : [5,4,3,2,1]

const array = [1,2,3,4,5];

// Reverses the elements in an Array.
// 기존의 배열에도 영향을 준다

const resilt = array.reverse();

04. make new array without the first tow elements

const array = [1,2,3,4,5];

// splice(start: number, deleteCount?: number): T[];
// Removes elements from an array and,
// if necessary, inserts new elements in their place, returning the deleted elements.
// 지워진 값을 반환, 문제에 합당하지 않음

// slice(start?: number, end?: number): T[];
// Returns a section of an array.
// @param end The end of the specified portion of the array.
// This is exclusive of the element at the index 'end'.
// 마지막 인덱스는 배제 되서 반환

const result = array.slice(2);
const result = array.slice(2, 5);

05 ~ 10

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),
]

05. find a students with the score 90

// find<S extends T>(predicate: (this: void, value: T, index: number, obj: T[]) => value is S, thisArg?: any): S | undefined;
// Returns the value of the first element in the array where predicate is true, and undefined
// 첫번째로 찾아진 값을 리턴하는데 true일 때 return을 하고 없으면 undeifine가 반환된다

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

06. make an array of enrolled students

// filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
// Returns the elements of an array that meet the condition specified in a callback function.

const resilt = students.filter(student => student.enrolled);

07. make an array containing only the students scores

result should be : [45, 80, 90, 66, 88]

// map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
// Calls a defined callback function on each element of an array, and returns an array that contains the results.

const result = students.map(student => student.score);

08. check if there is a student with the score lower than 50

result false
    
// some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
// Determines whether the specified callback function returns true for any element of an array.
// 배열의 요소 중에서 callback 함수가 true가 되는게 있는지 없는지 확인, true/ false로 반환

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

// 배열에 있는 모든 요소들이 callbackFn에 만족을 하는지 확인, true/ false로 반환
const result = students.every(student => student.score >= 50); //false

09. compute students average score

// reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
// reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
// Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
// 콜백 함수는 모든 요소마다 출력 되며 공통된 누적값을 리턴 된다

const reuslt = students.reduce((prev, curr, index, array)=>{
				if(index == array.length-1){
					prev += curr.score;
					return prev /= array.length;
				}else{
					return prev += curr.score;
				}
			       },0)

10. make a string containing all the scores

// result should be : '45, 80, 90, 66, 88'
const result = students.map(student => student.score).join();

11. sotred in ascending order

// result should be : '45, 66, 80, 88, 90';
// .sort((a,b)=>a-b), 작은값에서 큰값 정렬
// a 는 이전값, b는 현재 값, 니가 만약 - 값을 리턴하면 첫번째 값이 두번째 값보다 작다고 판단
// 큰값에서 작은 값 .sort((a,b)=>b-a)

const result = students.map(student => student.score).sort((a,b)=>a-b).join();