Block Scope
이렇게 블록안에 작성하면 블록밖에서 불러오지 못한다.
하지만 블록밖에 작성 되어 있는건 안에서 불러올 수 있다.
hoisting
- 호이스팅은 어디에 선언했냐 상관없이 항상 제일 위로 선언을 위로 끌어올려 주는 것
var가 사용 되지 않는 또다른 이유는 Block Scope을 무시한다.
Dynamic typing
c, java 는
start clip type : 변수를 선언할 때 어떤 타입인지 같이 선언
자바스크립트는 Dynamic type으로 선언할때 어떤 타입인지 선언하지 않고 런타임에 할당된 값에 따라 타입이 바뀔 수 있다.
text = '7' + 5;
-> value : 75, type: string
: 숫자를 문자열로 읽는다.
text = '4' / '2';
-> value : 2, type: number
: 나눗셈이 가능한 숫자로 읽는다.
이러한 기능 때문에 개발자들이 협업중에 오류가 생기는 경우가 많아 자바스크립트에 타입을 더한 타입스크립트를 만듦
parameters
premitive : value 값으로 저장된다.
object : reference 값으로 저장됨.
default parameters
prameter의 값이 전달되지 않으면 undefined 가 뜬다.
rest parameters
(...args) : 배열 형태로 저장 하게 됨
for (const arg of args) {
console.log(arg);
}args에 있는 배열을 한개씩 꺼내와서 출력
콜백함수
function randomQuiz(answer, printYes, printNO) {
if (answer === 'hi;) {
printYes();
} else {
printNo();
}
}const printYes = function () {
// 함수에 이름이 없는 anonymous function
console.log('yes!');
};
const printNo = functoin print() {
// 함수에 이름을 쓰는 named function
console.log('no!');
};정답과 정답이 맞으면 호출할 함수 틀리면 호출함 함수 를 인자로 가지고 상황에 맞게 호출하는게 콜백함수 이다.
Arrow Function
const simplePrint = function () {
console.log('simplePrint');
};
const simplePrint = () =>
console.log('simplePrint');
};IIFE
(function hello() {
console.log('IIFE');
})();
//이렇게 바로 함수를 실행 시킬 수 있다.Class와 Object의 차이점
class 와 object 생성
class Person {
constructor(name, age) {
//생성자를 이용해 오브젝트를 만들때 필요한 데이터 전달
this.name = name;
this.age = age;
//전달받은 두가지 fields 를 각 name과 age에 할당 해줬다.
}
speak() {
console.log(`${this.name}: hello!`);
}
}
const ellie = new Person('ellie', 20);
//새로운 오브젝트 만들때는 new 사용
console.log(ellie.name);
console.log(ellie.age);
ellie.speak();
//this 는 생성된 오브젝트.name 이기 떄문에
//ellie: hello! 출력된다.in operator
console.log('name' in ellie); 이런식으로 해당하는 오브젝트안에 키가 있는지 없는지 알려준다.
배열
foreach 문
fruits.forEach(function (fruit, index) {
console.log(fruit, index);
});
fruits.forEach((fruit, index) => console.log(fruit, index));
push : 배열맨뒤에 추가
unshift : 배열 맨 앞에 추가
shift : 맨 앞에 값 삭제
splice(start, deleteCount) : 스타트 인덱스만 쓰고 뒤에 값을 안넣으면 인덱스 부터 모두 삭제
- deleteCount 뒤에 인자로 원하는 값을 넣을 수도 있다.
concat : 배열두개를 합칠 수 있다.
indexOF : 배열 몇번째 인지 찾을 수 있다.
includes : 그 값을 포함하는지 안하는지 알 수 있다.
promise
비동기를 간편하게 처리할 수 있게 해주는 장치
1. state (기능이 오퍼레이션을 수행중인지 성공했는지, 실패했는지 아는게 중요)
// pending -> fufilled or reject
2. producer, consummer 의 차이점을 알자!
1) producer
//새로운 promise가 만들어질 때는 전달한 execute라는 함수가 바로 실행된다.(간과 하면 불필요한 네트워크 통신이 있을 수도 있다.)
const promise = new Promise(resolve, reject => {
setTimeout(() => {
resolve('elli')
}, 2000);
// 실제 네트워크와 통신하는 것 처럼 2초 딜레이 줌
// 성공적으로 받아오거나 가공한 데이터를 resolve // 라는 콜백함수로 나타내면 된다.
});//무언가 큰데이터를 읽어 오는것은 시간이 걸린다. 그래서 promise를 사용해 비동기적으로 처리하는 것이 좋다.
//promise는 클래스 이기때문에 new를 이용해서 오브젝트 생성
2) consumers //then, cathc, finally 를 이용해서 값을 받아 올 수 있다.
promise.then((value) => {
// promise를 이용해 resolve함수로 받아온 값을
// 아래의 value 값에 파라미터로 전달한다.
console.log(value);
})
//만약 reject를 호출하면 Error 라는 오브젝트로
//값을 전달한다.
setTimout(() => {
reject(new Error('no network'));
//Error라는 클래스는 자바스크립트에서 제공하는
//오브젝트이다. 무언가 에러가 나타난걸 나타냄
}, 2000);promise
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
});
//catch를 통해 에러 핸들링을 하면 에러가뜨지않고
//에러메세지가 출력된다.
//위에 .then은 결국 똑같은 promise를 호출하기 때
//문에 catch를 호출할 수 있다.
//이걸 체이닝이라고 한다.
위 사진처럼 promise 로 비동기처리로 실행하고 싶은 기능의 코드를 작성하고 성공적으로 됐다면 resolve 실패하면 error를 then과 catch 로 받아와 원하는 방식으로 처리할 수 있다.
.finally(() => {
console.log('finally');
});
// finaaly는 성공과 실패 여부에 상관없이 마지막에
// 무조건 호출된다.
3. promise 연결하기
const fetchNumber = new promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000);
});
//1초 있다 숫자 1을 전달하는 함수
fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
return new Promise((resolve, reject) => {
//새로운 서버와 통신하는 프로미스를 만듦
setTimeout(() => resolve(num -1),1000);
});
})
.then(num => console.log(num));then 에서는 값을 바로 전달해도 되고 또다른 비동기인 promise를 전달해도 된다.
- .then(a => function(a))
이렇게 같은 값을 전달할때에는
.then(function)
이렇게 생략 가능하다.
async await
async 사용했을때
이렇게 표현 가능
