07. 배열

객체는 한 변수, 혹은 상수에 여러가지 정보를 담기 위함이었다면, 배열은 여러개의 항목들이 들어있는 리스트와 같다.

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

배열을 선언할 때에는 이렇게 []안에 감싸주면 된다. 배열 안에는 어떤 값이던지 넣을 수 있으며, 객체 배열을 만들 수도 있다.

const objects = [{name:'dog'}, {name:'cat'}];

선언 후 n번째 항목을 조회하고 싶을 땐 다음과 같이 할 수 있다.

objects[n];
// 첫번째 항목은 0번지

const objects = [{name:'dog'}, {name:'cat'}];
console.log(objects);
console.log(objects[0]);
console.log(objects[1]);

배열에 새 항목 추가하기

배열에 새로운 항목을 추가할 때에는 배열이 지니고 있는 내장 함수인 push를 사용한다. (or concat)

objects.push({name:'hamster'});

배열의 크기 알아내기

배열의 크기를 알아낼 때에는 배열의 length 값을 확인한다.

console.log(objects.length);
// 3

8. 반복문

반복문은 특정 작업을 반복ㄱ적으로 사요할 수 있는 구문이다.

for

for문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가며 우리가 정한 조건이 만족된다면 계속 반복한다.

for (let i=0; i<10; i++) {
	console.log(i)
}
// 0.. 9

for (초기 구문; 조건 구문; 변화 구문;)

배열과 for

for (let i=0; i<names.length; i++){
	console.log(names[i]);
}
// dog, cat, hamster

While

while은 특정 조건이 참이라면 계속 반복하는 반복문이다. for문은 특정 숫자를 가지고 숫자의 값을 비교하고, 증감해주면서 반복한다면 while은 조건을 확인만 하면서 반복한다. 때문에 조건문 내부에서 변화를 직접 주어야 한다.

let i = 0;
while (i<10){
	console.log(i);
    i++
}

for ...in

• Object.entires : [[key, value], [key, value]] 형태의 배열로 변환
• Object.keys : [key, key, key] 형태의 배열로 변환
• Object.values : [values, values, values] 형태의 배열로 변환

객체가 지닌

const doggy = {
	name: 'bowwow',
    sound: 'bowwow',
    age: 2
}

fot (let key in doggy) {
	console.log(`${key}: ${doggy[key]}`);
}

//name:bow
//VM8529:1 sound:bowwow
//VM8529:1 age:2

break, continue

반복문 안에서는 break와 continue를 통하여 반복문에서 벗어나거나, 그 다음 루프를 돌게끔 할 수 있다.

for (let i=0; i<10; i++){
	if(i===2) continue;
    console.log(i);
    if(i===5) break;
}
//1, 2, 3, 4, 5

i=2일 때 continue를 하여 console.log를 해야 하지만 코드를 수행하지 않고 바로 3으로 넘어간다. i=5일 땐 break를 통해 반복문 종료.

function sumOf(numbers){
	let sum = 0;
    for (let i=0; i<numbers.length; i++){
    	sum += numbers[i];
    }
    return sum;
}

const result = sumOf[1,2,3,4,5]
console.log(result);

숫자로 이루어진 배열이 주어진다. 해당 숫자 배열 안에 있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 만들어서 반환.

function biggerThanTree(numbers){
	const array = [];
    for(i=0; i<numbers.length; i++){
    	if(numbers[i]>3){
        	array.push(numbers[i]);
        }
    }
    return array;
}

const numbers=[1,2,3,4,5,6,7];
console.log(biggerThanTree(numbers));

09 배열 내장함수

forEach

가장 쉬운 배열 내장함수 입니다. 기존에 우리가 배웠던 for문을 대체시킬 수 있다.

const fruits = ['banana', 'cherry', 'melon', 'kiwi']

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

// forEach
fruits.forEach(fruit=>{console.log(fruit)});

forEach 함수의 파라미터로는 각 원소에 대하여 처리하고 싶은 코드를 함수로 넣어준다. 이 함수의 파라미터 hero는 각 원소를 가리키게 되는데, 이렇게 함수 형태의 파라미터를 전달하는 것을 콜백함수라고 부른다. 함수를 등록해주면 forEach가 실행.

map

배열 안의 각 원소를 변환 할 때 사용되며, 새로운 배열이 탄생.

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

//forEach
array.forEach(n=>{squared.push(n*n);});
console.log(squared);

//map
const square = n => n*n;
const squared = array.map(square);

map 함수의 파라미터로는 변화를 주는 함수를 전달해준다. 이를 변화함수라고 부른다. 현재 우리의 변화 함수 square는 파라미터 n을 받아와 이를 제곱해준다. array.map 함수를 사용할 때 square를 변화함수로 사용함으로서, 내부의 모든 값에 대하여 제곱을 해서 새로운 배열을 생성했다.

변화 함수를 꼭 이름을 붙여 선언할 필요는 없다.

const squared = array.map(n=>n*n);
console.log(squsred);

indexOf

const fruits = ['banana', 'cherry', 'melon', 'kiwi']
const index = fruits.indexOf('banana');
console.log(index);

indexOf 함수는 원하는 항목이 몇번째 원소인지 찾아주는 함수다. 배열 안에 있는 값이 숫자, 문자열 또는 불리언이라면 찾고자하는 항목이 몇번째 원소인지 알아내려면 indexOf를 사용한다. 하지만 배열 안에 있는 값이 객체이건, 배열이라면? 찾을 수가 없다.

findIndex

id가 3인 객체가 몇번째인지 찾으려면 findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있다. (객체가 몇 번째인지 반환)

const index = todos.findIndex(todo => todo.id ===3);

find

찾아낸 값 자체를 반환해준다

const todo = todos.find(todo=>todo.id ===3);
// {id:3, text:'test', done:true}

filter

filter함수는 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만든다.

const taskNotTodo = todos.filter(todo=>todo.done === false);

todos.filter(todo=> !todo.done);

filter 함수에 넣는 파라미터는 조건을 검사하는 함수를 넣어주고, 이 함수의 파라미터로 각 원소의 값을 받아오게 된다.

splice

배열에서 특정 항목을 제거할 때 사용한다.

splice(a, b) // 삭제할 인덱스, 갯수

slice

배열을 잘라낼 때 사용하는데, 기존의 배열을 건들이지 않는다.

slice(a, b) // 어디서부터 자를지, 어디까지 자를지

concat

여러 개의 배열을 하나의 배열로 합쳐준다. concat은 각 배열에 변화를 주지 않는다.

const arr1 = [1,2,3];
const arr2 = [4,5,6];
const concated = arr1.concat(arr2);

join

배열 안의 값들을 문자열 형태로 합쳐준다.

reduce

함수 잘 사용 할 줄 알면 정말 유용한 내장 함수입니다. 배열에 대하여 총합을 구해야 하는 상황이 왔다고 가정해보자.

const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

reduce 함수에는 두개의 파라미터를 전달한다. 첫번째는 accumulator와 current를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째는 reduce함수에서 사용할 초깃값.

const numbers=[1,2,3,4,5];
let sum = numbers.reduce((accumulator, current) => {
	console.log({accumulator, current});
    return accumulator + current;
},0);
console.log(sum);

배열을 처음부터 끝까지 반복하면서 우리가 전달한 콜백 함수가 호출이 되는데, 처음엔 accumulator 값이 0이다. (왜냐하면 여기서 두번째 파라미터인 초깃값으로 0을 설정했기 때문)

처음 콜백 함수 호출 -> 0 + 1 =1; -> 다음 콜백함수 호출시 accumulator =1; -> 콜백함수가 두번째 호출 -> 1 + 2=3; -> 세번째 호출시 accumulatr = 3; ... -> 15