[2023 신입부원 기초 스터디] 박민규 #7주차 - 나태해진 나의 JS 블로깅..

문자열 메소드

 

대소문자 변환

변수.toUpperCase() : 변수가 문자열일때 모든 문자를 대문자로 변환.

변수.toLowerCase() : 변수가 문자열일때 모든 문자를 소문자로 변환.

 

공백 제거

변수.trim() : 문자열의 앞 뒤 공백을 제거함.

변수.trimStart() : 문자열의 앞 공백을 제거함.

변수.trimEnd() : 문자여르이 뒷 공백을 제거함.

 

반복

변수.repeat(횟수) : 횟수만큼 문자를 반복 (원본을 해치지 않음)

 

추가

변수.padStart(10, "d") : 변수 앞에 "d"의 갯수와 변수의 길이 총 합 10만큼 "d"가 추가됨.

변수.padEnd(10, "d") : 변수 뒤에 "d"의 갯수와 변수의 길이 총 합 10만큼 "d"가 추가됨.

 

IndexOf()

const str = "안녕하세요. 박민규입니다.";

console.log(str.indexOf("박민규"));         

--> 박민규라는 문자가 인덱스 몇번째에서부터 시작하는지 출력함.

만약 str.indexOf("히히") 처럼 구하려는 문자열이 존재하지 않는 경우 -1을 출력함.

 

Includes()

const str = "안녕하세요. 박민규입니다.";

 

console.log(str.includes("안녕"));  <-- 문자열에 '안녕'이 포함되므로 true출력.

console.log(str.includes("바보"));  <-- 문자열에 '바보'가 포함되지 않으므로 false출력.

 

StartWith(), EndWith()

const str = "안녕하세요. 박민규입니다.";

 

console.log(str.stratWith("안녕"));  <-- 문자열 변수가 '안녕'으로 시작하므로 true출력.

console.log(str.endWith("히히"));   <-- 문자열 변수가 '히히'로 시작하지 않으므로 false 출력.

 

 

다양한 수정메소드

 

Replace(), ReplaceAll()

const str = "안녕하세요. 박민규입니다.";

 

console.log(str.replace('박민규', '마이콜라');  <-- 원래의 문자열 변수에 있던 '박민규'를 '마이콜라'로 변경해서 반환한다.

(단, '박민규'가 여러개 있어도 첫 번째에 있는 '박민규'만 '마이콜라'로 변경됨.)

console.log(str.replaceAll('박민규', '마이콜라'); <-- 원래의 문자열 변수에 있던 '박민규'를 '마이콜라'로 변경해서 반환한다.

(replace()와는 다르게 문자열 변수 속 '박민규'를 모두 찾아내서 '마이콜라'로 변경해준다.)

 

Substring()

const str = "안녕하세요. 박민규입니다."; 

 

console.log(str.substring(0, 6);  <-- 문자열 변수의 인덱스 0부터 인덱스 6의 앞부분까지 출력

(인덱스 0~5까지 출력)

 

Split()

변수.split('텍스트')  : 문자열 변수를 텍스트를 기준으로 나누어서 반환함.  

 

Slice()

문자열의 일부를 추출 가능

 

const str = "안녕하세요. 박민규입니다."; 

 

console.log(str.slice(3));  <-- 변수의 인덱스 3부터 끝까지 출력.

console.log(str.slice(3, 5));  <-- 변수의 인덱스 3부터 인덱스 5앞까지 출력. (3~4까지 출력)

console.log(str.slice(-3));  < 변수의 뒤에서부터 3개의 문자만 출력.

 

 

배열 메소드

 

push() : 리스트에 새로운 요소를 추가하기 위해 사용. (쉼표로 구분하여 여러 요소 추가가능.

pop() : 리스트에 인자에 적힌 요소를 제거하고 출력함.

unshift() : 리스트에 새로운 요소를 추가하지만 리스트의 앞부분의 추가됨.

shift() : 리스트의 앞부분의 요소를 하나 제거함.

 

forEach() : 리스트 배열의 각각의 요소들을 순서대로 실행시킴. (만약 리스트에 변화를 준다고해도 새롭게 저장되지 않음)

map() : forEach()와 동일하게 작동하지만 리스트에 변화를 준다면 변화된 값이 저장됨.

 

find() : 특정한 조건을 만족하는 요소 중 가장 처음으로 발견되는 요소를 반환함. (요소<3)

findIndex() : find()와 동일하게 작동하지만 요소를 반환하는 것이 아닌 그 요소의 인덱스 값을 반환함.

 

fill() : 배열의 모든 요소들을 지정한 값으로 바꿔줌. (인덱스를 지정하여 원하는 부분만 바꿀 수도 있음)

 

slice() : 배열의 부분을 인덱스를 통해 잘라서 반환 가능. (원본을 해치지 않는다.)

splice() : 배열의 부분을 인덱스와 갯수를 입력하여 요소를 제거 후 저장한다. (원본에 변화가 생긴다.)

               또, 제거한 요소의 위치에 다른 요소 추가할 수 있다.

 

join() : 배열의 요소들을 문자열로 합쳐서 반환.

concat() : 배열에 입력한 요소를 새로 추가하여 저장함. 

filter() : 배열의 요소들중에서 정해진 조건에 맞는 요소만 걸러내어 반환함.

 

reduce() : 배열의 순서대로 정해진 조건에 맞게 계산하여 하나의 결과값으로 반환함.

 

 

For in 반복

 

기본예시

const obj = {

  x: 1,

  y: 2,

  z: 3,

};

for (key in obj) {

  console.log(key)

}

--->x

      y

      z   출력.

 

객체 축약

키와 변수의 이름이 같은 경우 한번만 작성해도 된다.

ex)

const name = '박민규';                        l const name = '박민규';

const job = '학생';                                l const job = '학생';

const user = {                                      l const user = {

  name: name,                                     l   name,

  job: job,                                             l   job,

};                                                          l };

console.log(user);                               l console.log(user);

 

두 가지의 출력값은 모두

{name: '박민규', job: '학생'}  

  name: "박민규"

  job: "학생" 

로 같다.

 

매소드 축약 표현 

객체에 요소나 배열이 아닌 함수자체를 할당할 수 있고,

객체 내부에 매소드를 작성할 땐 function은 생략 가능하다.

 

Object.keys()

const obj = {

  x: 10,

  y: 20,

  z: 30,

};

console.log(Object.keys(obj));

출력 값 : ['x', 'y', 'z']

이처럼 Object.keys()를 활용하여 객체가 가지고 있는 key들을 하나의 배열로 반환할 수 있다.

 

Object.values()

const obj = {

  x: 10,

  y: 20,

  z: 30,

};

console.log(Object.values(obj));

출력 값: ['10', '20', '30']

이처럼 Object.values()를 활용하여 객체가 가지고 있는 밸류값들을 하나의 배열로 반환할 수 있다.

 

Object.entries()

const obj = {

  x: 10,

  y: 20,

  z: 30,

};

console.log(Object.entries(obj));

출력 값: [Array(2), Array(2), Array(2)]

이처럼 Object.etries()를 활용하여 객체의 키와 값의 쌍을 배열로 만들 수 있다. 

 

 

배열의 구조분해할당

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

                                                  l

const one = arr[0];                     l const [one, two, three] = arr;

const two = arr[1];                     l

const three = arr[2];                   l

 

이렇게 배열의 요소들을 각각 변수에 할당하려고 할 때 오른쪽의 구조분해할당 방식을 사용할 수 있다.

 

객체의 구조분해할당

const obj = {

  x: 10,

  y: 20,

};

const { x, y } = obj;

console.log(x, y);  --> 10, 20 출력.

 

위 상황에서 const { x, y } = obj; 대신 const { x: hello, y: micalla } = obj;

를 써줘도 10, 20이 출력된다. 이렇게 할당할 때 변수명을 바꿀 수도 있다.

객체가 중첩된 경우 변수.변수.변수의 방식으로 불러낼 수 있다.

 

함수와 구조분해할당

const obj = {

  x: 10,

  y: 20,

};

 

function sum(obj) {              l function sum({ x, y }) { 

  return obj.x + obj.y;           l   return x + y;

}                                           l }

 

console.log(sum(obj));

양 옆의 함수가 모두 같은 역할을 해준다.

 

 

DOM(Document Object Model)

 

getElementById()

html의 id값을 사용해서 요소를 선택할 때 사용한다.

 

getElementsByClassName()

html의 class값을 사용해서 요소를 선택한다.

 

getElementsByTagName()

html의 tag값을 사용해서 요소를 선택한다.

 

querySelector()

위의 방식처럼 id, class name, tag name마다 구분짓지 않고 한번에 선택할 수 있다.

#'id이름'은 html의 해당 id를 선택함

.'class이름'은 html의 해당class를 선택함

querySelectorAll()

querySelector()와 동일하지만 같은 것이 여러개가 있을 때 배열로 반환해줌

 

 

Event

html에 button태그 추가한 뒤 

 

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

 

button.addEventListener('click');

이렇게 클릭했을때 이벤트가 발생하는 버튼을 만들 수 있음.

 

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

 

function handler(event) {

  console.log('멘트');

}

 

button.addEventListener('click', handler);

이 사이에 버튼을 클릭했을떄 어떤 이벤트가 일어나도록 할지 지정할 수 있음.

 

button.removeEventListener('click, handler);

일어났던 이벤트를 다시 제거할 수도 있음.

 

 

모듈

import 명령어를 사용해서 외부의 모듈을 가져올 수도 있고,

export 명령어를 사용해서 현재 모듈을 내보낼 수도 있다.