[2023 신입부원 기초 스터디] 최종은 #7주차 - Js 보충

문자열 메소드

 toUpperCase() : 문자열을 대문자로 바꾸기

toLowerCase() : 문자열을 소문자로 바꾸기

 

trim() : 문자열 앞,뒤의 공백 제거

trimStart() : 문자열 앞쪽의 공백 제거

trimEnd() : 문자열 뒤의 공백 제거

 

repeat() : 문자열 반복

 

padStart() : 지정한 문자열을 앞에 n개 추가 (Ex: str.padStart(10,'_')

padEnd() : 지정한 문자열을 뒤에 n개 추가 (Ex: str.padEnd(10,'_')

*이때 둘 다 원본 문자열은 변하지 않음*

 

indexOf() : 해당 문자열에서 Key값이 시작되는 값을 출력

includes() : 해당 문자열 안에 Key값이 존재하는지 확인 ( true or false )

 

startsWith() : 해당 문자열이 Key값으로 시작하는지 확인

endsWith() : 해당 문자열이 Key값으로 끝나는지 확인

 

replace() : 해당 문자열에서 Key값과 처음으로 일치하는 부분을 지정한 문자열로 교체

replaceAll() : 해당 문자열에서 Key값과 일치하는 모든 부분을 지정한 문자열로 교체

 

substring() : 주어진 범위의 문자열을 새로운 문자열로 반환

 

slice() : 문자열을 잘라서 반환

 

배열 메소드

push() : 배열 뒤에 추가

pop() : 배열 뒤쪽 삭제

 

unshift() : 배열 앞쪽에 추가

shift() : 배열 앞쪽 삭제

 

forEach() : 콜백함수를 전달하여 배열을 순회함 (새로운 배열 반환 X)

map() : forEach()와 비슷하게 동작하지만 새로운 배열 반환

 

includes() : 요소 검색해서 있으면 true,없으면 false 반환

find() : 주어진 조건에 맞는 첫값을 반환

findindex() : 주어진 조건에 맞는 첫값의 index값을 반환

 

fill() : 원본배열을 지정한 값으로 채워줌

slice() : 배열의 복사본을 잘라 새로운 배열로 저장

splice() : 지정한 범위까지 원하는 값으로 바꾸거나 지움

 

join() : 배열의 모든 요소를 붙여 하나의 문자열로 반환

 

concat() : 기존 배열에 요소를 합쳐서 새로운 배열로 반환

 filter() : 조건에 맞게 배열을 필터링함

 

객체 심화

객체 생성(Ex)

 

const obj = 

{

   x:1,

   y:2,

   z:3,

};

 

객체의 축약 표현

 

const name='최종은';

const country = 'KR';

 

const user = 

{

   name,

   country,

};

 

 

메소드의 축약 표현

 

const obj =

{

   greeting()

   {

      console.log('Hi!');

   },

};

 

obj.greeting();

 

 

Object.keys() : 지정된 객체가 가지고 있는 Key들을 배열로 반환

Object.values() : 지정된 객체가 가지고 있는 값들을 배열로 반환

Object.entries() :  지정된 객체가 가지고 있는 key와 값을 함께 묶어 배열로 반환

 

 

구조분해할당

배열의 구조분해할당(Ex)

 

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

const[one,two,three] = arr;

 

 

객체의 구조분해할당(Ex)

 

const obj = 

{

   x:10,

   y:20,

};

 

const {x:fir,y:sec}=obj;

 

객체의 중첩 구조분해할당

 

const obj =

{

   a:

   {

   b:

      {

         c: 'bingo',

      },

   },

};

 

const

{

   a:

   {

      b: {c},

   }

}=obj

 

 

함수와 구조분해할당

 

 

const obj = 

{

   x:10,

   y:20,

};

 

function sum(obj)

{

   return obj.x + obj.y;

}

 

 

DOM

getElementById() : HTML tag를 요소 자체 선택자로 선택

getElementsByClassName() : class를 요소 자체 선택자로 선택

getElementsByTagName() : class를 요소 자체 선택자로 선택

 

querySelector() : 아이디나 클래스 태그 이름으로 모두 선택 가능

querySelectorAll() : 인자로 지정한 선택자와 일치하는 요소들을 모두 선택

 

createElement() : HTML Element 생성

 

 

이벤트

addEventListener() : 이벤트에 대한 반응을 지정하기 위해 이벤트 헨들러를 지정해줌

removeEventListener() : 이벤트리스너를 삭제함

 

모듈

모듈이란? : 코드를 모아둔 하나의 파일, 재사용성과 유지보수성을 위해 사용

보통 관련된 코드조각이나 함수를 모아 하나의 모듈로 작성함

 

 

 

HTML이나 CSS보다 JS가 더 어려운듯.. 열심히 복습해야겠네요

끗-!