[2023 신입부원 심화 스터디] 김윤희 #3주차 - Part 4, Part 5

11강 문자열 메소드

 

1. 대소문자 변환

const str = ‘Hello World!’;

console.log(str.toUpperCase()); → 대문자로 바꾸어주기

console.log(str.toLowerCase()); → 소문자로 바꾸어주기

 

2. 문자열 공백 제거

const str = ‘ haha ’;

console.log(str.trim()); → 공백을 제거해줌 (haha가 출력)

console.log(str.trimStart()); → 앞쪽 공백 제거

console.log(str.trimEnd()); → 뒤쪽 공백 제거

 

3. 새로운 문자열 생성

const str = ‘Hello’;

console.log(str.repeat(3)); → str을 세 번 반복함. 하지만 원본 객체는 변함x

console.log(str.padStart(10, ‘’)); 지정한 문자열의 길이(10)이 되도록 앞에 ‘’를 추가

console.log(str.padEnd(10, ‘’)); 지정한 문자열의 길이(10)이 되도록 에 ‘’를 추가

—> 모두 원본 객체는 변하지 않음.

 

4. 문자열에서 특정 부분 검사

const str =’안녕하세요. 윤희코딩입니다!’;

console.log(str.indexof(’윤희’)); → 문자열이 위치한 인덱스를 반환, 문자열이 존재하지 않는다면 -1을 반환

console.log(str.includes(’윤희’)); → 문자열에 해당 문자열이 있는지 여부 판단, TF로 반환

console.log(str.startWith(’안녕’)); → 해당 문자열로 시작하는지 판단 T/F

console.log(str.startWith(’!’)); → 해당 문자열로 끝나는지 판단 T/F

 

5. 문자열을 다양한 방법으로 수정

const str =’안녕하세요. 윤희코딩입니다!’;

console.log(str.replace(’윤희코딩’, ‘개발자 김윤희’)); → 바꾸고 싶은 문자열, 교체할 새로운 문자열 순으로 입력하여 수정, 일치하는 문자열이 여러개여도 첫번째 문자열만 교체해줌. → replaceAll메서드는 해당하는 모든 문자열을 교체

console.log(str.substring(0, 5)); → 0~4번 인덱스까지 출력

console.log(str.split(’.’)) → 지정된 문자열을 기준으로 나누어 반환

console.log(str.slice(3)); → 인자가 하나만 주어지면 해당 인덱스부터 끝까지 반환,str.slice(3, 5)처럼 인자가 두 개라면 3~4 인덱스부분을 반환, 인자가 음수라면 끝에서 부터 차례대로 반환!

---

12강 배열 메소드

 

1.배열 요소 조작

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

arr.push(6, 7); → 원본 배열끝에 해당 요소를 추가

arr.pop(); → 맨 뒤에 있는 요소 제거

arr.unshitf(10, 20, 30); → 원본 배열 앞에 해당 요소들을 추가

arr.shitf(); → 맨 앞에 있는 요소 제거

arr.forEach(함수); → 이 함수는 현재 요소의 값을 요구하는 인자가 필수로 요구됨. 결국 함수를 각각 실행시켜주는 역할 ! ⇒ 화살표 형식으로 사용 가능, 또한 인자로 함수가 아닌 함수에 주어질 인자를 넣어도 됨. 원본 배열 변경 x, 하지만 여기서 새로운 배열을 반환하고 싶다면 foEach 대신 map을 사용

 

2.배열 요소 검색

const arr = [’hello’, ‘world’];

arr.includes(’hello’); → 지정한 요소가 배열에 있는지 판단 여부 T/F

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

arr.find((number) ⇒ number > 3); → number는 배열의 각각의 요소가 되며 즉, 배열의 요소가 3보다 큰 원소 하나(4)만 반환하게 됨. 조건에 만족하는 원소가 없다면 undefind가 출력. findIndex()를 사용한다면 4가 위치하는 인덱스를 출력, 없다면 -1을 출력

 

3. 배열의 요소 수정

arr.fill(10); → 지정한 값으로 모두 변경, 시작과 끝 인덱스를 지정할 수 있음

arr.slice(2, 4); → 지정된 시작 인덱스부터 종료 인덱스까지 잘라 반환

arr.splice(2); → 필수적으로 시작인덱스가 필요, 선택적으로 제거할 요소의 개수, 제거한 위치에 채워넣을 인자도 지정할 수 있음.

arr.join(); → 배열의 모든 요소를 합쳐 하나의 string으로 반환, 선택적으로 인자를 구분할 구분자를 추가할 수 있음

const number = [1, 2];.

arr.concat(numbers)); → 기존 배열에 새로운 배열을 합쳐 하나의 새로운 배열로 반환, 배열이 아니여도 문자열을 인자로 넣을 수 있음.

arr.filter(number)) ⇒ number >3 → 배열의 요소들 중 3보다 큰 수만 있는 새로운 배열 반환

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

const reducer = (acc, value) ⇒ acc + value; → acc는 누산기를 의미, value는 현재 요소의 값을 의미 → 최종 누적된 값이 리턴됨.

arr.reduce(reducer)); → 필수 인자로 reducer라는 인자가 요구됨. 선택적으로 누산기 초기값을 지정할 수 있음.

---

13강 객체심화

1. 객체 순회

for in은 객체에서 사용, for of는 [Symbol.iterator]속성을 가지는 반복이 가능한 객체에서 사용

const obj = {

x : 1,

y : 2,

z : 3,

};

for (key in obj){

console.log(key);

}

 

2. 객체 축약 표현

const name = ‘김윤희’;

consy country = ‘KR’;

const user = {

name: name, → key와 value가 같으면 name, 으로만 축약하여 표현 가능

country: country,

};

conesole.log(user);

 

3. 메소드 축약 표현

const obj = {

greeting : function() { → 객체 내부에 메소드를 작성할 때는 function이라는 키워드 생략가능.

console.log(’Hi’);

},

};

obj.greeting();

 

4. 객체 속성 열거

const obj = {

x : 10,

y : 20,

z : 30,

};

console.log(Object.keys(obj)); → 지정된 객체가 가지고 있는 key들을 배열로 반환

console.log(Array.isArray(obj)); → 배열인지 판단해주는 정적메소드

console.log(Object.values(obj)); → object가 가지고 있는 값들을 반환

console.log(Object.entries(obj)); → key와 value의 쌍을 하나의 배열로 묶어서 개별적 요소로 묶임.

---

14강 구조분해할당

구조분해할당이란 배열 또는 객체의 구조를 분해한 뒤 분해된 값을 개별적인 변수에 담는 표현식을 의미한다.

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

const one = arr[0];

const two = arr[1];

이떄 구조분해 할당을 사용.

const [one, two] = arr; 각각 첫번째, 두번째 요소가 할당됨.

const obj = {

x:10,

y:20,

};

const {x : hello , y : world} = obj; → 객체 구조 분해

const obj = {

one : {

two : {

three : ‘bingo’,

},

},

];

const {

one : {

two: { three },

},

} = obj;

function sum ({x, y}) { → 로 구조분해 할당이 가능함, 다른 변수명으로 지정하여 사용도 가능함

return x + y;

}

• 변수 값을 교환할 때 사용 [a, b] = [b, a];
• 구조분해 할당에 기본값을 미리 지정할 수 있음.
• 중간값을 생략하고 구조분해 할당 할 수 있음.
• 나머지 요소들을 한번에 구조 분해 할 수 있음. → …others

---

16강 DOM

→ html문서를 기존에서 추가, 삭제 등을 하기 위해서 배움

 

1. 요소를 조작

id값으로 요소 선택 : document.getElementByld(’title’); 메소드를 사용, 유일한 값

class 값으로 요소 선택 : document.getElementsByClassName(’title’); 다수의 값

태그로 요소 선택 : document.getElementsByTagName(’title’); 다수의 값

document.querySelector(id or class);로 사용할 수 있음.

document.querySelectorAll(id or class);위와 동일하지만 배열처럼 반환됨.

 

2. 요소 생성

createElement(’h1’); → 생성하려는 요소의 태그를 문자열로 전달

const title = document.createElement(’h1’);

const body = document.querySelector(’body’);

title.innerText = ‘새로운 친구에요!’;

title.style.color = ‘red’;

body.appendChild(title);

---

17강 이벤트

const button = document.querySelector(’button’);

const removeButton = document.querySelector(’.remove’);

function handler(event){

console.log(’♥’);

}

function removeHandler(event){

//console.log(’이벤트 삭제’)

button.addEventListener(’click’, removeHandler);

}

button.addEventListener(’click’, handler);

button.addEventListener(’click’, removeHandler);

---

18강 모듈

→ 재사용성, 유지 보수성을 위해 사용됨.

• NamedExports ! 이름이 정의된 내보내기 방식.

export function greeting() { → export를 붙여주면 모듈로서 내보낼 수 있

console.log(’Hello’);

}

index.html파일에서 type을 module로 지정

import {greeting} from ‘./hello.js’; (export한 해당 파일의 경로)

greeting();

→ 하나의 모듈에서 여러개의 함수나 객체, 변수들을 내보낼 수 있음.

• DefaultExports ! 기본 내보내기 방식

export키위드 뒤에 default키워드를 추가해주면 됨.

→ 중괄호를 생략할 수 있음.

→ 사용자가 정의한 이름으로 함수를 사용할 수 있음.