[TIL] 스파르타코딩클럽 배열, For, 함수 보충강의

강의 진행 속도가 너무 빨라 필기를 동시에 할 수 없어서 녹화본이 올라오면 돌려보면서 작업을 하려고 했는데,

주말동안 보충강의 영상 파일이 올라오지 않아서 다른 대원의 필기를 베껴왔다.

 

---------------------------------------------------------------------

 

배열(array)

 

배열  ☞ let arr = [];

배열 = 객체, 인덱스가 자동으로 부여된 객체라고 볼 수 있다.

배열에는 '.'과 '[]'를 이용해 접근, 제어를 할 수 있다. 제어에는 []를 쓴다.

 

객체에는 속성과 메서드가 항상 존재한다!

메소드와 함수는 비교가 되어야 함.

메서드 : 호출의 주체가 명확함. ex) people.test() 

함수 : 호출의 주체가 없다. ex) test()

 

배열에는 length라는 속성이 있다.

length라는 속성은 배열의 최대 인덱스 +1을 의미할 뿐이다.

 

Queue (큐) : FIFO (First In, First Out)

Stack (스택) : LIFO (Last In, First Out)

 

스택에는 값을 추가하는 push와 삭제하는 pop이 있다.

pop은 제일 나중에 들어온 값을 뺀다 = 스택

큐에도 같은 개념인 shift, unshift가 있다.

shift : 맨 앞에 있는 요소가 빠지고 나머지 인덱스가 하나씩 앞으로 당겨짐

unshift : 배열의 맨 앞에 들어오고 앞으로 밀려온 인덱스를 뒤로 밀어줌

push, pop과 개념은 같지만 shift, unshift는 전체를 건드리기 때문에 비효율적이라 우리는 push, pop을 잘 사용할 것!

 

배열은 반복문에 최적화되어있다! 왜냐? 유일하게 가진 속성 length가 있기 때문!

 

일반적인 for문

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

for(let i = 0; i < arr.length; i++) {
    if(arr[i] % 2 === 0) {
        console.log(arr[i]);
    }
}

for ~ in : index가 나옴

for (key in arr) {
    console.log(arr[key]); // []로 값을 빼옴
}

for ~ of : 배열의 값 자체가 나옴 -> value

for (value of arr) {    
    console.log(value);
}

배열에선 for ~ of 쓰는 게 훨씬 유용하다.

 

example)

// li태그를 3개 만들어서 ul 태그 밑으로 넣어주기!

// 1. li태그를 3개 만들기
// 1-1. li태그에 이름을 넣어요
// 2. li태그를 ul 태그에 넣어요


// 1. li태그를 3개 만들기
let liTag1 = document.createElement('li');
liTag1.textContent = '귤';
document.querySelector('ul').appendChild(liTag1);

let liTag2 = document.createElement('li');
liTag2.textContent = '바나나';
document.querySelector('ul').appendChild(liTag2);

let liTag3 = document.createElement('li');
liTag3.textContent = '딸기';
document.querySelector('ul').appendChild(liTag3);

// 위에 코드를 for문으로 활용
let fruits = ["귤", "바나나", "딸기", "키위", "수박"];

let liTag; // undefined

// for of를 써서 value에 직접 접근
for(f of fruits) {
    liTag = document.createElement('li'); // li 생성
    liTag.textContent = f; // li태그에 텍스트 생성
    document.querySelector('ul').appendChild(liTag); // ul태그에 붙임

}

for (let i = 0; i < fruits.length; i++) {
    liTag = document.createElement("li");
    liTag.textContent = fruits[i];
    document.querySelector('ul').append(liTag);
}

 

함수 만드는 방식 2가지

// 1. 
function testFunc () {

}
// 2.
let testFunc2 = function () { // 변수에 바로 할당하기 때문에 1번보다 명시적.

}

함수를 만들고 있는 것

let testFunc = function (a, b) {
     console.log(a + b);
}
testFunc(1, 2);