250903 [ Day 42 ] - JavaScript (3)

시작하며

오늘도 JavaScript의 상당히 많은 내용을 배웠다. 자주 사용되는 메서드를 빠르게 살펴보고 DOM에 대해 조금 살펴보고 수업이 끝났다. DOM에 대한 기본 개념이 약간 헷갈리는 부분이 있지만 몇 번 사용해보고 복습해보면 금방 익숙해질 것 같다.
드디어 JavaScript를 사용해서 HTML을 제어해봤으니 내일은 기능 구현을 배우지 않을까 싶다.

문자열 메서드

let str = "    Hello JavaScript World    ";

console.log(`원본 : ${str}`);
// 원본 :     Hello JavaScript World 

길이

• 함수 X / 속성 O
• 공백을 포함한 길이를 반환

console.log(`길이 : ${str.length}`);
// 길이 : 30

공백 제거

• trimStart() / trimEnd() 로 앞/뒤 만 지정해서 제거 가능

console.log(`공백제거 : ${str.trim()}`); // 원본 변경 X
str = str.trim();
// 공백제거 : Hello JavaScript World

대소문자 변환

// 대문자 변환
console.log(`대문자변환 : ${str.toUpperCase()}`); // 원본 변경 X
// 소문자 변환
console.log(`소문자변환 : ${str.toLowerCase()}`); // 원본 변경 X
// 대문자변환 : HELLO JAVASCRIPT WORLD
// 소문자변환 : hello javascript world

탐색

console.log(`인덱스 찾기 : ${str.indexOf("Java")}`); // 특정 문자열의 인덱스 반환
console.log(`문자열의 포함여부 : ${str.includes("Java")}`); // true false로 반환
// 인덱스 찾기 : 6
// 문자열의 포함여부 : true

슬라이싱

• 시작 포함 끝 미포함

console.log(`슬라이싱 : ${str.slice(6, 16)}`); // 원본 변경 X
// 슬라이싱 : JavaScript

치환

console.log(`하나만 치환 : ${str.replace("World", "Universe")}`); // 원본 변경 X
console.log(`전부 치환 : ${str.replaceAll("l", "L")}`); // 원본 변경 X
// 하나만 치환 : Hello JavaScript Universe
// 전부 치환 : HeLLo JavaScript WorLd

분할

console.log(`분할 : ${str.split(" ")}`); // 원본 변경 X, 구분자 필요
// 분할 : Hello,JavaScript,World

병합

console.log(`병합 : ${"Hello ".concat("Coding ", "World")}`);
// 병합 : Hello Coding World

배열 메서드

let arr = [10, 20, 30, 40, 50];

console.log("원본 :", arr);
// 원본 : (5) [10, 20, 30, 40, 50]

길이

console.log("길이 :", arr.length);
// 길이 : 5

추가

arr.push(60); // 뒤로 추가
console.log("push(60) :", arr);
arr.unshift(0); // 앞에 추가
console.log("unshift(0) :", arr);
// push(60) : (6) [10, 20, 30, 40, 50, 60]
// unshift(0) : (7) [0, 10, 20, 30, 40, 50, 60]

삭제

arr.pop(); // 뒤 삭제, 제거한 요소 반환
console.log("pop() :", arr);
arr.shift(); // 앞에 삭제, 제거한 요소 반환
console.log("shift(0) :", arr);
// pop() : (6) [0, 10, 20, 30, 40, 50]
// shift(0) : (5) [10, 20, 30, 40, 50]

슬라이싱

let sliced = arr.slice(1, 4); // 원본 변경 X
console.log("slice(1, 4) :", arr, sliced);
// slice(1, 4) : (5) [10, 20, 30, 40, 50] (3) [20, 30, 40]

splice

arr.splice(1, 0, 15); // 원본 변경 O
console.log("splice(1, 0, 15) :", arr);
// splice(1, 0, 15) : (6) [10, 15, 20, 30, 40, 50]

• 삭제와 함께 추가

arr.splice(1, 1, 100);
console.log("splice(1, 1, 100) :", arr);
// splice(1, 1, 100) : (6) [10, 100, 20, 30, 40, 50]

결합

let arr2 = [100, 200];
console.log("concat :", arr.concat(arr2)); // 원본 변경 X
// concat : (8) [10, 100, 20, 30, 40, 50, 100, 200]

탐색

console.log("indexOf :", arr.indexOf(100));
console.log("includes :", arr.includes(200));
// indexOf : 1
// includes : false

정렬

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

nums.sort(); // 기본 값 : 오름차순
console.log("sort(asc) :", nums);
nums.sort((a, b) => b - a); // 화살표 함수(콜백 함수) 사용으로 내림차순 정렬
console.log("sort(desc) :", nums);
// sort(asc) : (5) [1, 2, 3, 4, 5]
// sort(desc) : (5) [5, 4, 3, 2, 1]

let users = [
    {
        id: 3,
        name: "name3",
    },
    {
        id: 2,
        name: "name2",
    },
    {
        id: 4,
        name: "name4",
    },
    {
        id: 1,
        name: "name1",
    },
];

users.sort((a, b) => a.id - b.id);
console.log("users :", users);
// users : (4) [{…}, {…}, {…}, {…}]
// 0: {id: 1, name: 'name1'}
// 1: {id: 2, name: 'name2'}
// 2: {id: 3, name: 'name3'}
// 3: {id: 4, name: 'name4'}
// length: 4

반전

nums.reverse();
console.log("reverse", nums);
// reverse (5) [1, 2, 3, 4, 5]

map()

• 원소를 순회하며 함수를 적용
• 원본 변경 X

nums = nums.map((x) => x * 2);
console.log("map((x) => x * 2)", nums);
// map((x) => x * 2) (5) [2, 4, 6, 8, 10]

filter()

• 콜백을 기준으로 원소를 필터링해서 반환
• 원본 변경 X

let filtered = nums.filter((x) => x > 5);
console.log("filter((x) => x > 5)", filtered);
// filter((x) => x > 5) (3) [6, 8, 10]

reduce()

• 앞의 원소에 대해 뒤의 원소를 연산한 결과를 누적
• 원본 변경 X
• 초기값 설정 가능

let sum = nums.reduce((acc, cur) => acc + cur, 10);
console.log("reduce((acc, cur) => acc + cur, 10)", sum);
// reduce((acc, cur) => acc + cur, 10) 40

객체 메서드

let user = {
    name: "name1",
    age: "27",
    city: "Seoul",
};

console.log("원본", user);
// 원본 {name: 'name1', age: '27', city: 'Seoul'}

Key 추출

• 배열로 반환

console.log("키 추출", Object.keys(user));
// 키 추출 (3) ['name', 'age', 'city']

Value 추출

• 배열로 반환

console.log("값 추출", Object.values(user));
// 값 추출 (3) ['name1', '27', 'Seoul']

[Key, Value] 추출

• 배열로 반환

console.log("키, 값 추출", Object.entries(user));
// 키, 값 추출 (3) [Array(2), Array(2), Array(2)]

배열을 객체로 변환

let entries = [
    ["id", 101],
    ["name", "name2"],
];

console.log("배열에서 객체 생성", Object.fromEntries(entries));
// 배열에서 객체 생성 {id: 101, name: 'name2'}

배열 순회

let fruits = ["사과", "배", "딸기", "수박", "포도"];

c 스타일

for (let i = 0; i < fruits.length; i++) {
    console.log("c스타일", fruits[i]);
}

py 스타일

for (let fruit of fruits) {
    console.log("py스타일", fruit);
}

배열 메서드

fruits.forEach((f) => console.log("forEach", f));

객체 순회

• Key로 접근하며 Value는 Key를 직접 적용해서 접근 가능

for (let key in user) {
    console.log("key :", key, ", Value :", user[key]);
}

DOM

• DOM (Document Object Model) : 문서 객체 모델
  • HTML을 JavaScript가 제어할 수 있는 객체(Object)로 변환하는 것
  • Document : 객체화된 HTML의 요소에 접근하여 제어하고자 할 때 사용하는 객체
• HTML에 접근

console.log(document.head);
console.log(document.body);

Document로 HTML의 요소 선택

• 이전 방식 (legacy)

console.log(document.getElementById("green"));
console.log(document.getElementsByClassName("default"));
console.log(document.getElementsByTagName("div"));

• 선호되는 방식 (quertSelector) : CSS Selector로 HTML 요소 선택

console.log(document.querySelector(".default"));
console.log(document.querySelector("#blue"));
console.log(document.querySelector("input"));
console.log(document.querySelector("[name='id']"));

• querySelectorAll
• 선택자에 해당하는 모든 요소 선택
• 불러온 요소들에 대한 순회 가능

console.log(document.querySelectorAll(".default"));
console.log(document.querySelectorAll(".others"));
console.log(document.querySelectorAll("div"));

요소 순회

• forEach

document
    .querySelectorAll("div")
    .forEach((el) => console.log("순회한 요소 :", el));

• for of

let defaultElements = document.querySelectorAll(".default");
for (let element of defaultElements) {
    console.log("for of :", element);
}

태그 내부 내용 변경

let greeting = document.querySelector("#greeting");
console.log(greeting);

• innerHTML : 태그 안쪽에 HTML 주입

greeting.innerHTML = "안녕하세요 <b>반갑습니다<b> 행복하세요";
console.log(greeting);

• textContent : 태그 안쪽에 text를 입력
  • 태그 안쪽의 내용을 불러올 때 선호되는 방식

greeting.textContent = "안녕하세요 <b>반갑습니다<b> 행복하세요";
console.log(greeting);

속성 변경

const naver = document.querySelector("#naver");
naver.textContent = "google";
console.log(naver);

naver.setAttribute("href", "https://google.com");

속성값 가져오기

const grape = document.querySelector("#grape");
console.log(grape.getAttribute("src"));

속성값 복사

const url = grape.getAttribute("src");
const test = document.querySelector("#test");
test.setAttribute("src", url);

마치며

내용이 상당히 많았지만 특별히 어려운 건 없어서 다행이었다. 드디어 내일이면 JavaScript를 마무리하고 React를 간단하게 살펴본다고 한다. 그리고 다음 주부터는 새로운 OpenCV 파트에 들어가는데, 항상 새로운 것을 배울 때 기대가 많이 되는 것 같다. 빨리 React와 OpenCV 등 새로운 기술과 정보들을 많이 배우고 싶다.

NOTION

MY NOTION (JavaScript. 05)