JavaScript 기초 Tip

📌 padSrart

자바스크립트에서 현재 문자열의 시작을 다른 문자열도 채워, 원하는 자릿수을 만족하는 string을 만들고자 할때 padStart() 함수를 사용하면 된다

• padStart() 공식문서 : padStart

const str = "457" // 이때 5자리를 원해 앞에 00을 붙이고자 한다.
str.padStart(5,"0") // '00457'

or

str.padStart(5,"AAA") //'AA457'

• 위와 같은 형태로 첫번째 인자에 5를 주는것을 문자열의 길이가 5자리가 되어야한다는 것이고, 두번째 인자에 "0"을 넣는 것은 해당부분을 0으로 채우겠다하는것이다.
• 만약 "AAA"와 같다면 초과되는 부분을 잘라내고 AA457과 같은 결과를 도출한다.

반대의 결과를 원하면 padEnd() 를 사용하면 된다.

const str = "457"
str.padEnd(5,"A") // '457AA'

📌 appendChild

한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙일 때 appendChild()를 사용한다.

새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙인다.

const bgimage = document.createElement("img");
bgImage.src = "img/...";
document.body.appendChild(bgimage); /// html의 body 안에 <img src="..."> 가 들어있다

appendChild 함수가 사용되는 앞으로는 부모 노드, 함수의 파라미터로는 자식노드가 들어온다.

📌 forEach

배열 순회라고도 말하는데, 주어진 함수를 배열 요소 각각에 대해 실행하는 함수이다.

예를들어

const array1 = ['a', 'b', 'c'];

array1.forEach((item) => console.log("sayHello", item));//sayHello a, sayHello b, sayHello c

이러한 형태로 배열요소 각각에 대해 주어진 함수를 수행한다.

📌 filter

주어진 함수의 test를 통과하는 요소들로 새로운 배열을 만든다. 예를 들어 어떠한 배열에서 한 요소를 제거할 때는 제거를 하는 것이 아니라, 해당 요소를 제외한 새로운 배열을 만드는 방식이 쓰인다.

filter() 안에 들어오는 함수가 true를 반환하면 요소 유지, false를 반환하면 해당 요소를 버림.

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

const loveFilter = (item) => {
  return item !==3
}

num1.filter(loveFilter); // [1,2,4,5]

📌addEventListener

addEventListener의 사용법은 간단히 언급하겠다.

canvas.addEventListener("mousemove", onMove);

위와 같은 형태로하여 반응할 객체.addEventListener 뒤로 괄호안으로는 첫번째 파라미터에는 인식할 event를 넣고 두번째 파라미터에는 반응을 어떤방식으로 할 것인지 정의한 함수를 넣어준다.

그러나 다음과 같이 쓰는 방식도 있다.

canvas.onmousemove = function onMove() {
	...
}

위와같은 형태를 이용해서 사용하는 것도 가능하다.