[2023 신입부원 기초 스터디] 이총명 7주차 JS 끝 그리고 새로운 시작

1 . 문자열 메소드

•  toUpperCase() : 문자열을 대문자로 바꾸기
• toLowerCase() : 문자열을 소문자로 바꾸기
• trim() : 문자열 제일 왼쪽과 뒤쪽의 공백 제거(trimStart()와 trimEnd()를 동시에 쓰는 느낌)
• trimStart() : 문자열 앞쪽의 공백 제거
• trimEnd() : 문자열 뒤의 공백 제거
• repeat(n) : 문자열을 n번 만큼 반복

 

2 . 배열 메소드

• push() : 배열  맨 뒤에 값을 추가
• pop() : 배열 맨 뒤에 값 하나를 삭제하고 그 값을 리턴함
• unshift() : 배열 맨 앞쪽에 값을 추가(리버스 push느낌)
• shift() : 배열 맨 앞 쪽의 값 하나를 삭제하고 그 값을 리턴함(리버스 pop느낌)
  
  
• forEach() : 각 배열 요소에 대해 제공된 함수를 한 번 실행한다.
  forEach 메서드는 다음 매개변수와 함께 배열의 각 요소에 적용하게 될 콜백 함수를 전달한다
  

 

• Current Value (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach 메서드를 호출한 배열

 

• map() : forEach()와 거의 비슷하지만 forEach()와는 다르게 새로운 배열을 반환한다
• includes() : 배열에서 요소를 검색해서 있으면 true,없으면 false 반환 (별로 안중요한것 같긴한데 JS는 대문자로 True,False가 아니라 소문자로 true,false네요..)
• find() : 화살표 함수를 사용해 주어진 조건에 맞는 첫값을 반환한다
  
• findindex() : find()랑 비슷한데 값이 아닌 인덱스를 반환한다
• fill() : 원본 배열의 각 요소를 지정한 값으로 덮어씌운다(범위 지정가능)
• slice(start[, end]) : slice() 메소드는 begin부터 end 전까지의 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 수정되지 않는다.
• splice(start[, deleteCount[, item1[, item2[, ...]]]]) : 
  start: 배열의 변경을 시작할 인덱스.
  deleteCount: 배열에서 제거할 요소의 수
  item1, item2, ... : 배열에 추가할 요소.
  
  
• join('구분자') : 배열의 모든 요소를 구분자로 나눠서 붙이고 하나의 문자열로 반환한다(구분자 미입력시 ','이 기본 구분자로 설정되어있음)
• concat() : 기존 배열에 요소들을 뒤에 추가해서 새로운 배열로 반환(push는 기존 배열을 수정함)
•  filter() : 조건에 맞게 배열에서 요소들을 필터링함

 

3 . 객체 축약 표현

const name='이총명';

const country = 'KR';

이렇게 돼있을 때

const user = 

{

   name=name

   country=country

};

 

이렇게 하는게 아니라

 

const user =

{

   name,

   country,

};

 

이게 가능

 

4 . 구조분해할당

• 배열의 구조분해할당:
  const arr = [1,2,3,4,5];
  
  const one = arr[0]
  const two = arr[1]
  const three = arr[2] # one = 1 , two = 2 , three = 3이됨
  
  이런식으로 하기보다
  
  const[one,two,three] = arr; 
  이렇게 하면 배열의 순서대로 one,two,three에 1,2,3이 들어감
  
  
• 객체의 구조분해할당:

const obj = 

{x:10, y:20,};

const {x, y} = obj;

or

const {x:새로운 이름, y:새로운 이름} = obj;

 

• 함수의 구조분해할당:

const obj = 

{

   x:10,

   y:20,

};

function sum(x:a , y:b)

{

   return a + b;

}

5 . DOM ( Document Object Model )

document.getElementById('id') : 원하는 id를 가진 요소를 불러옴

document.getElementsByClassName('class') : 원하는 클래스를 가진 요소를 불러옴

(클래스는 여러 개 존재 가능하므로 Elments)

document.getElementsByTagName('tag') : 원하는 태그를 가진 요소를 불러옴

(태그도 여러 개 존재 가능하므로 Elments)

 

querySelector() : 안에 아이디,클래스,태그 중 뭘 써도 상관없음 (만능맨)

querySelectorAll() : 인자로 지정한 선택자와 일치하는 요소들을 모두 선택해서 배열처럼 가져옴

createElement() : HTML Element 생성

 

5 . 이벤트

• addEventListener() : 이벤트를 수신할 요소를 선택한 후, 해당 요소에 이벤트 리스너를 추가한다. 이벤트 리스너는 이벤트가 발생했을 때 호출되는 콜백 함수다.
• removeEventListener() : 이벤트리스너를 제거한다

6. 모듈

 모듈은 재사용 가능한 코드 블록을 나타내는 독립적인 단위이다. 모듈은 관련된 함수, 변수, 클래스, 객체 등을 포함하며, 이를 다른 JavaScript 파일에서 임포트하여 사용할 수 있다.

 

 

 

끝