자주 사용하는 자바스크립트 문법

 

let 선언자

• 재선언 되면 에러를 발생
• 재선언으로 코드 전체에 영향을 주는 것을 예방하기 위해 var 대신 let을 사용하는 것이 권장된다.

 

const 선언자

• 이미 선언된 변수에 값을 재할당하거나 재선언 하려고 하면 에러가 발생한다.
• ex) 날짜 포맷 값 const dateFormat = 'yyyy.MM.dd';

 

화살표 함수 Arrow function

• 일반 함수 선언식에 비해 구현해야하는 코드의 양이 줄어든다.

 

sort()

배열 오름차순 정렬

• 실무에서는 object의 특정 키를 기준으로 sort

let persons = [
	{
      name: "aa",
      point: 78
	},
    {
      name: "bb",
      point: 50
    },
    {
      name: "cc",
      point: 99
    }
]

persons.sort(function(a,b) {
	return a.point > b.point ? -1 : a.point < b.point ? 1 : 0
})

 

reverse()

배열 역순 정렬

 

filter()

특정 조건을 만족하는 배열 요소만 찾아서 새로운 배열로 반환한다.

• true인 요소만 찾고, 조건에 일치하지 못하면(false) 버린다.

let persons = [
	{
      name: "aa",
      point: 78
	},
    {
      name: "bb",
      point: 50
    },
    {
      name: "cc",
      point: 99
    }
]

let pass = persons.filter(function(person) {
	return person.point >= 70
})

 

map()

배열의 데이터가 object일 때 새로운 형태의 object로 변환해서 배열로 반환한다.

• 용도 1) 데이터베이스로부터 가져온 데이터에는 존재하지 않지만, 여러 화면에 사용해야하는 데이터가 가져온 데이터를 조합해서 만들 수 있는 경우
• 용도 2) 데이터베이스로부터 가져온 데이터가 실제 클라이언트에서 필요로 하는 것보다 훨씬 많은 필드를 담고 있을 때 필요한 필드만 담도록 변경하기 위한 경우 (네트워크 트래픽을 줄일 수 있어서 성능향상에 도움된다)

 

reduce()

숫자, 문자, 객체 등 누적하여 결과 값을 반환하는 함수

• 데이터의 합계를 구할 때 가장 많이 사용

 

Template Literals

• ` 백틱을 사용하여 문자열에 변수의 값을 병합할 때 효율적이다

 

Spread Operator

데이터를 요소 하나하나로 모두 분해해서 사용할 수 있다.

let arr1 = [4,5,6]
let arr2 = [1,2,3]
let arr3 = [...arr2, ...arr1]

 

Object Destructuring

object에 저장된 데이터를 분해해서 필요한 데이터만 바로 추출

function getPerson() {
	return {
      name: "aa",
      point: 78,
      country: "USA"
	}
}

let {n, c} = getPerson();

 

Promise

비동기 처리에 사용되는 객체
파일 쓰기, 데이터베이스 트랜잭션 등 실행한 코드가 완료될 때까지 대기하지 않고 다음 코드를 실행할 수 있도록 해준다.

• 요청한 응답에 성공하면 resolve() 함수에 결과를 전달한다.
• 요청한 응답에 실패하면 reject() 함수에 에러를 전달한다.

const promise = new Promise((resolve, reject) => {
	if(true) {
    	resolve('pass')
    }
    else {
    	reject(new Error('error'))
    }
})

 

Async/Await

• Async: 비동기 실행
• Await: 결과가 올 때까지 기다리겠다

const myFunc = async() => {
	const r = await asyncFunc()
}