TIL 220402

1. Input(학습)

• slice 메서드

2. Output(복습)

• 함수 복습
• 배열, 객체 복습
• css position 복습

3. Reminder

slice 배열 메서드

기능: 인자(begin, end)로 받은 begin부터 end까지 지정한 원본 배열의 인덱스 범위의 요소들을 새로운 배열로 반환. 인자에 아무 값도 안 넣으면 원본 배열 그대로를 새로운 배열로 반환.

음수 인덱스 사용시: 뒤에서부터의 인덱스

let arr1 = [1,2,3,4,5];

let arr2 = arr1.slice(0, 3);
console.log(arr2); // [1, 2, 3]

let arr3 = arr1.slice(1, -1);
console.log(arr3); // [2, 3, 4]

splice 배열 메서드의 매개변수 3개: arr.splice(어디서부터, 몇개를, 이걸로 바꿔)

• 매개변수 1개 사용시: 어디서부터 전부 다 제거
• 매개변수 2개 사용시: 어디서부터 몇개를 제거
• 매개변수 3개 사용시: 어디서부터 몇개를 이걸로 바꿔(두번째 인자가 0이면 배열의 요소 제거 없이 새로운 요소 삽입 가능)

indexOf, lastIndexOf

indexOf: 찾는 요소의 인덱스를 반환.

lastIndexOf: 뒤에서부터 찾음. 찾는 요소가 중복된 경우 가장 뒤에 있는 요소의 인덱스를 반환.

없는 요소를 찾을 경우: -1을 반환.

const arr = ['가', '라', '바', '가', '하', '다'];

const result1 = arr.indexOf('다');
console.log(result1); // 5

const result2 = arr.lastIndexOf('가');
console.log(result2); // 3

const result3 = arr.indexOf('A');
console.log(result3); // -1

배열 응용문제

배열은 값들을 나열한 것이기 때문에 요소가 여러 개 있으므로 반복문과 함께 사용하는 경우가 많다.

// 다음 배열에서 '라'를 모두 제거하세요. indexOf와 splice를 사용하세요.
const arr = ['가', '라', '다', '라', '마', '라'];

let index = arr.indexOf('라');
while(index > -1) {
    arr.splice(index, 1);
    index = arr.indexOf('라');
}
console.log(arr); // ['가', '다', '마']

문자열도 인덱스로 접근 가능함!!

const str = '도레미파솔라'; // 배열이 아닌 문자열도 인덱스로 접근 가능
let i = 0;
while (i < str.length) {
    console.log(str[i]);
    i++;
}
// 도
// 레
// 미
// 파
// 솔
// 라

인자 값 == 매개변수 == Parameter

• parameter = 매개변수 또는 인자/ 함수 정의시 외부로부터 전달받는 값
• argument = 인수/ 함수 호출시 함수로 전달하는 값

CSS - position 실습

img태그는 인라인 요소이나 width, height 지정 가능한 이유: 이미지 파일 자체가 크기를 가지고 있기 때문에.

하지만 명시적으로 display: block 주는게 추후 스타일링시 의도대로 작성이 용이하므로 block속성으로 바꿔주자!