JavaScript란?
동적인 DOM을 위해 개발 된 것. 웹 브라우저 내에서 주로 사용되지만 최근 node.js같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있음
특징: 단순하고 간단, 방대한 라이브러리, 플랫폼 독립적인 오픈소스
nvm이란?
여러버전의 node.js 를 설치할 수 있도록 해주는 도구
Node.js
JavaScript 런타임 환경
브라우저 환경이랑은 이용할 수 있는 리소스에 차이가 있음
*런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경
NPM
JS 오픈소스 라이브러리 생태계
변수자료형
var - 옛날 문법
let - 변수
const - 값을 바꿀 수 없을 때 사용
연산자
자바 스크립트에서는 == / ! = 은 데이터 타입 반영 안해서 비교
형 고려해서 비교하려면 === / ! ==
Closure
특정 값을 핸들링하고 싶지만 접근시키고 싶진 않을 때 사용
내부함수가 생성될 때 그 스코프에 있는 모든 변수에 대해 접근할 권한을 가짐
외부함수의 실행을 마친 후에도 그 변수에 접근 가능
배열
다양한 데이터 타입을 섞어서 쓸 수 있음
push / pop : 마지막 인덱스에 대해서 요소 추가 및 삭제
unshift / shift : 첫번째 인덱스에 대해서 요소 추가 및 삭제
map
배열의 요소들을 모두 순회하여 callback 함수의 return 값을 모아 새로운 배열을 만듬
foreach
배열의 요소를 반복돌면서, 작업을 진행
filter
배열의 요소를 반복돌면서, true인 요소들만 모아 새로운 배열을 만듬
reduce
배열의 요소들을 모두 순회하여 initialValue부터 시작하여 누적된 결과를 만듬
Object
object는 속성(property)과 메서드를 가진다.
- Primitive Type을 object화 시키자니 너무 무겁다.
- 원시값의 속성에 접근하면 wrapper 객체를 만들어 사용하자.
변수
var, let : 변수선언 (값 변경 가능)
const: 상수 선언(값 변경 불가)
기본적으로는 cosnt로 정의하는게 좋음
자료형
null : 존재하지 않는 값
undefined : 정의 되지 않은 값
둘이 서로 다른 형태임
함수 형태
1. 기본함수 형태
함수 선언문 정의 되기전에 코드 호출 가능
2. 함수표현식과 화살표 함수
함수를 정의하여 변수에 할당하는 형태
함수선언문 정의 되기전에 코드 호출 불가능
동기 vs 비동기
동기: 호출된 함수의 작업 상태를 신경씀 = 블로킹 ex)fs.readFileSync
비동기: 호출된 함수의 작업상태를 신경 쓰지 않음 = 논 블로킹 ex)fs.readFile
자바스크립는 비동기환경 but 동기적으로 이전의 값을 받아서 다음 작업을 실행시키고 싶을 때가 있음
java script에서 동기적 처리
- 콜백함수로 구현
fastFunc(10,(data)=>{
console.log("fastFunc완료");
slowFunc(data,(result=>{
console.log("slowFunc 완료");
console.log(result);
}))
})
- promise
function fastFunction(data){
return new Promise((resolve,reject)=> {
setTimeout(function(){
const result = data * 2;
resolve(result);
},1000)
})
}
function slowFunction(data){
return new Promise((resolve,reject)=> {
setTimeout(function(){
if (data === 0){
reject(new Error("data can not be 0"))
}
else {
const result = data + 10;
resolve(result);
};
},3000)
})
}
// //promise 객체에서 then을 하면 resolve 된게 then함수의 인자로 들어옴
//
const result = fastFunction(10);
result.then(data=>{ //
console.log('fastFunction의 실행 결과');
console.log(data);
return data;
}).then(data=>{ //data = 위에서 resolve(result)
return slowFunction(data);
}).then(data=>{
console.log('slowFunction의 실행결과');
console.log(data);
})
promise란?
인자가 1개인데 이 인자는 함수이다.
그리고 이 함수의 인자는 resolve, reject 두개의 인자를 가지는데
resolve: 성공했을때 호출 함수,reject: 실패했을 때 호출할 함수이다.
promise 객체에 then 을 붙이면 resolve함수의 결과값이 then 함수의 인자값으로 들어가고 catch를 붙이면 reject의 결과값이 인자값으로 들어간다.
즉 promise의 메서드 는 then, catch
*try-catch 하는 이유 : 예외처리 해줌으로써 런타임에러 방지하기 위해
async-await
동기적인 코드처럼 비동기 함수를 작성하는 방법
async는 비동기함수 await 는 또다른 비동기함수를 기다린다는 의미
(but async, await 은 promise객체 그러나 비동기 함수처럼 쓸 수 있게 해준 것)
즉, await에서 기다리는 것은 promise 객체에서 resolve 된 것을 기다리는 것임
await은 async 함수 안에서만 쓸 수 있음
async function fetchHTML(url){
//fetch는 비동기함수이므로 await 사용, url로 get요청을 보내고 응답을 받음
const response = await fetch(url);
//응답의 body를 텍스트로 변환 이때 text가 비동기함수이므로 await 사용
const html = await response.text();
//cheerio를 사용하여 html을 파싱하고 반환 -> 그렇기때문에 css선택자 사용해서 요소 선택가능해짐
const $ = cheerio.load(html);
return $;
}
이 코드에서 fetch는 비동기함수인데 이 함수의 결과값을 다음 코드에서 쓰고 싶은데 비동기 이기때문에 실행완료 되지 않은 채 넘어갈 수 있다.
그렇기때문에 await를 써야하는데 이때 async 안에서만 써야되기 때문에 fetchHTML 함수는 async가 되어야한다.
fetch같이 기본함수가 비동기인 경우 확인하는 방법은? 커서를 올리면 정보가 뜨는데 promise라고 뜨는 경우 비동기 함수 인것이다.
promise-all
promise-all 은 인자값으로 promise 객체 배열을 받음
전체가 resolve 되거나 하나라도 에러있으면 reject
promise-allsetteled
전부 다 끝날때까지 기다림
promise-race
promise가 하나라도 이행되거나 거부되면 그걸로 끝냄
promise-any
하나가 성공할 때까지 기다리는 것