220526
JavaScript DOM까지 정리
함수와 클래스
함수
-
함수
파라미터 : 선언 아규먼트 : 실행- x, y를 보통 한국에서는 인자
- 매개변수(파라미터, parameter) : x, y
- 전달인자(아규먼트, argument) : 3, 5
- 사용이유
- 재사용성
- 아키텍처 파악
- 유지보수
-
콜백함수
- 화살표 함수를 콜백함수로 사용했을 경우의 장단점
- 장점 : 네이밍을 안해도 됩니다.
- 장점 : 다른 곳에서 사용할 수가 없다.
- 단점 : 콜백지옥에 빠질 수가 있습니다.
function cal(a, b){ return a(10, 10) + b(10, 10); } cal((a, b) => a + b, (a, b) => a * b);
- 화살표 함수를 콜백함수로 사용했을 경우의 장단점
-
화살표함수
function 제곱(x) {
return x**2
}
// 함수표현식, 호이스팅 X
let 제곱 = x => x**2;
function f(a, b) {
let z = 10
let result = z + a + b
return result
}
// 함수표현식, 호이스팅 X
let f = (a, b) => {
let z = 10
let result = z + a + b
return result
};- 기명함수
// 기명 함수
let aa = function sum(x, y) {
return x + y
}
// 익명 함수인것 같지만 바뀜
let bb = function(x, y) {
return x + y
}
// ES5에서는 빈 문자열이었는데 ES6에서 name 값을 가지는 것으로 바뀌었습니다.
let cc = (x, y) => x + y;- 익명함수
console.dir(function (x, y) {return x + y;})클래스
- 클래스 - 붕어빵 찍는 틀, 공장
- 인스턴스 - 붕어빵, 제품
class Human {
constructor() {}
// 인스턴스 메서드, 인스턴스 프로퍼티 메서드, 프로토타입 메서드
a() {}
// 클래스 메서드, 클래스 프로퍼티 메서드, 정적 메서드
static b() {}
}
hojun = new Human('호준')
typeof hojun // object
typeof Human // function예외처리, 전개표현식, 리터럴 등
예외처리
try {
// 코드
} catch(e) {
// 코드
} finally {
// 코드
}
//throw new Error(message);
//throw new SyntaxError(message);
//throw new ReferenceError(message);전개구문 사용
- 전개구문 사용 예제
function f(...x){
return x;
}
f(1, 2, 3, 4, 5)정규표현식
- 특정 패턴을 찾아낼 때 사용
// 0 문자 제거
let s = '010100020201020304812123';
s.replace(/[^1-9]/g,"")
'11221234812123'
// 앞 뒤 공백 제거(캐릭터 클래스 `\s`사용)
s = ' 010100020201020304812123 '
s.replace(/^\s+|\s+$/g,'')
'010100020201020304812123'
// 문자열 내 공백 제거
s = ' 01010002020 102030 4812123 ';
s.replace(/\s/g,'')
'010100020201020304812123'
// 개행 제거
s = `
a
b
c
d
`
'\na\nb\nc\nd\n'
s.replace(/\n/g,'')
'abcd'리터럴
- 리터럴은 약속된 기호를 사용해 값을 생성하는 것입니다. 예를 들어 문자를 생성하기 위해서는 작은 따옴표, 큰 따옴표, 템플릿 리터럴 중 하나를 사용하죠. 배열을 생성하려면 대괄호를, 오브젝트를 생성하려면 중괄호를 사용해야 합니다.
- new String(), new Array(), new Object()의 형식으로 만들어야 하는 것을 약속된 기호로 만들 수 있게 해준 것입니다.
- new Object() 의 리터럴 표현이 {}, new Number(1) 의 리터럴 표현이 1, new String("hello") 의 리터럴 표현이 "hello" 입니다.
- ew Object()는 생성자 함수를 이용한 것이죠.
- 정규표현식 리터럴
let x = /[a-zA-Z0-9]/g- 2진수, 8진수, 16진수 리터럴
let a = 0b1001 // a == 9
let b = 0o1001 // b == 513
let c = 0x1001 // c == 4097사용자와 상호작용
- prompt('hello')
- comfirm('hello')
- alert('hello')
구조분해할당
-
예제
for (let [[i, j], k] of [[[1, 2], 2], [[1, 2], 4]]) { console.log(i, j); }let x = 10, y = 20 [x, y] = [y, x] let {a, b} = {b:'hello', a:'world'} -
다른 언어에서는 언패킹이라고 부리기도 합니다.
동기와 비동기
-
js는 일을 처리할 수 있는 thread가 1개, 싱글쓰레드라고 함.
-
하지만 모든 일을 여러명이 처리할 수 없다면 항상 기다려야 하는 문제가 생길 수도 있고, 무한대기에 빠질 수도 있음.
-
Promise
- pending(대기상태) - resolve(해결) - fulfilled(성공)
- pending(대기상태) - reject(거부) - rejected(실패)
- fetch
- fetch는 비동기 네트워크 통신을 구현하기 위해 사용하는 Web API이다.
- 자바스크립트를 이용하여 브라우저가 서버에게 비동기적으로 데이터를 요청하고, 응답 받은 데이터를 동적으로 페이지 렌더링 하는 방식을 Ajax(Asynchronous Javascript and XML)라고 하고 대표적인 Web API로는 XMLHttpRequest 객체, JQuery, fetch 등이 있다.
- response.text()
- response.json()
- response.formData() - FormData 객체 반환
- response.blob() - Blob(타입이 있는 바이너리 데이터) 형태 반환
- Blob(Binary Large Object)은 이미지 등과 같은 멀티미디어 데이터를 다룰 때 사용하는 데이터 형식
- response.arrayBuffer() – ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태 반환
DOM
// 해당하는 Id를 가진 요소에 접근하기
document.getElementById()
// 해당하는 모든 요소에 접근하기
document.getElementsByTagName();
// 해당하는 클래스를 가진 모든 요소에 접근하기
document.getElementsByClassName();
// css 선택자로 단일 요소에 접근하기
document.querySelector("selector");
// css 선택자로 여러 요소에 접근하기
document.querySelectorAll("selector");
// target 요소를 생성합니다.
document.createElement(target);
// target 텍스트를 생성합니다.
document.createTextNode(target);
// target 요소를 element의 자식으로 위치합니다.
element.appendChild(target);
// element의 target 자식 요소를 제거합니다.
element.removeChild(target); 
뜨내기 FE 개발자