- var
- 재선언, 재할당이 가능하다
- 재선언 시 기존 값이 변하기 때문에 코드가 꼬일 수 있으니 왠만하면 사용을 자제하자
- let
- ES6에서 새로 추가된 선언자
- 재선언x, 재할당 가능
let x = 5; x = 7 // 이건 가능 let x = 7; //이건 불가능
- const
- ES6에서 새로 추가된 선언자
- 재선언x, 재할당x
- 포맷 값을 설정할 때 유용하다.
const x = 5; x = 7; // 안됨 const x =7; // 안됨
- 기존 함수
function hello(name){ return 'hello'+name; }
- 화살표 함수
const hello = (name)=>{ return 'hello'+name }
- 함수 선언식이나 함수 표현식에 비해 구문이 훨씬 짧아진다!
- sort() : 배열에 문자형 데이터가 있는 경우 오름차순으로 정렬
let fruits = ['Banana','Orange','Apple','Mango']; fruits.sort()
그럼 숫자형은요?
숫자형이 있더라도 기본적으로 문자형으로 인식한다.let points = [40,100,1,5,25,10]; points.sort(function(a,b){return a-b});
a-b를 해서 결과가 음수면 두 요소의 위치를 바꾸지 x
내림차순으로 하고 싶으면 b-a
- reverse() : 역순 정렬
let fruits = ['Banana','Orange','Apple','Mango'] fruits.sort(); fruits.reverse();
Object의 특정 키를 기준으로 sort() 하는 경우도 많다.
let person = [{ name:'홍길동', point : 78, city : '서울' },{ name:'김철수', point : 92, city : '서울' }...] person.sort(function(a,b){ return a.point > b.point ? -1 : a.point < b.point ? 1 : 0; });
- filter() : 특정 조건 만족하는 요소만 뽑아 새로운 배열로 반환
const words = ['spray','limit','elite','exuberant','destruction','present'] const result = words.filter((word)=>{ return word.length > 6; // 길이 6자리 초과인 단어찾기 });
- map() : 배열의 데이터가 Object형일 때, 배열에 담긴 Object를 새로운 형태의 Object 배열로 반환
- 용도
1) DB로부터 가져온 데이터에는 존재하지 않지만, 여러 화면에 사용해야 하는 데이터가 가져온 데이터를 조합해서 만들 수 있는 경우
2) DB로부터 가져온 데이터, 즉 배열에 담긴 각 오브젝트 요소가 실제 클라이언트에서 필요로 하는 것보다 훨씬 많은 필드를 담고 있을때, 서버에서 클라이언트로 데이터를 전송하기 전에 클라이언트에서 필요한 필드만을 담도록 변경
- reduce() : 배열에 담긴 데이터를 하나씩 순회하며 callback() 함수의 실행값을 누적하여 결과 값을 반환 (배열에 담긴 데이터의 합계를 구할 때 많이 사용)
let points = [40,100,1,5,25,10]; let sum = points.reduce((total,currentValue)=>{ return total+currentValue },0);
- 변수에 할당된 문자열을 하나의 문자열로 병합할 때, +를 사용
let a = 'hello' + 'world'
- 배열, 문자열과 같이 iteration 형태의 데이터를 요소 하나하나로 모두 분해해서 사용할 수 있게 해줌
let arr1 = [4,5,6] let arr2 = [1,2,3] let arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]
- Object에 저장된 데이터를 분해해서 필요한 데이터만 바로 추출해서 사용
function Person(){ return { firstname:'John', lastname:'Doe',' age:37 } } var {firstname, lastname} = getPerson() // 해당하는 key에 대한 데이터가 들어옴
- 저장된 요소를 분해하여 배열의 순서에 따라 변수를 정의
function getScores(){ return [70,80,90] } let [x,y,z] = getScores(); // x=70, y=80, z=90
- 몇 개의 파라미터가 전달될지 모를 경우 유용
function sum(...args){ let total = 0; for (let x of args){ total +=x } sum(1,2,3,4,5) sum(4,5,6)
- JS에서 비동기 처리(특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해 주는 방식)에 사용되는 객체
- 파일쓰기, DB 트랜잭션 처리 등 비동기 함수를 실행할 때 실행한 코드가 완료될 때까지 대기하지 않고 바로 다음 코드를 실행
- 비동기 함수 실행이 완료되면 then() 함수를 통해서 그 결과에 대한 코드를 실행
- new 생성자 함수를 사용해서 생성. 요청에 대한 응답에 성공하면, resolve() 함수에 결과를 전달. 요청 실패시 reject()함수에 에러를 전달
const promise = new Promise((resolve,reject)=>{ if(true){ resolve('결과데이터'); } else{ reject(new Error('에러')); } });
- Promise와 동일한 목적으로 사용한다
- Async는 비동기로 실행을 뜻함, Await는 비동기를 실행하는데 결과가 올 때까지 기다리겠다는 의미
- await를 사용하는 코드가 작성된 함수는 반드시 async여야 함
async function myFunction(){ const r = await asyncFunction() }