2. JavaScript 정리

Hyun·2023년 4월 28일
0

nodejs

목록 보기
2/19

1. 변수 선언자

  1. var
  • 재선언, 재할당이 가능하다
  • 재선언 시 기존 값이 변하기 때문에 코드가 꼬일 수 있으니 왠만하면 사용을 자제하자
  1. let
  • ES6에서 새로 추가된 선언자
  • 재선언x, 재할당 가능
  • let x = 5;
     x = 7 // 이건 가능
     let x = 7; //이건 불가능
  1. const
  • ES6에서 새로 추가된 선언자
  • 재선언x, 재할당x
  • 포맷 값을 설정할 때 유용하다.
  • const x = 5;
     x = 7; // 안됨
     const x =7; // 안됨

2. 화살표 함수

  • 기존 함수
function hello(name){
	return 'hello'+name;
}
  • 화살표 함수
const hello = (name)=>{
	return 'hello'+name
}
  • 함수 선언식이나 함수 표현식에 비해 구문이 훨씬 짧아진다!

3. Array 내장 함수

  • 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);

4. Template Literals

  • 변수에 할당된 문자열을 하나의 문자열로 병합할 때, +를 사용
let a = 'hello' + 'world'

5. Spread Operator

  • 배열, 문자열과 같이 iteration 형태의 데이터를 요소 하나하나로 모두 분해해서 사용할 수 있게 해줌
let arr1 = [4,5,6]
let arr2 = [1,2,3]
let arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]

6. Object Destructuring

  • Object에 저장된 데이터를 분해해서 필요한 데이터만 바로 추출해서 사용
function Person(){
	return {
    	firstname:'John',
        lastname:'Doe','
        age:37
    }
}
var {firstname, lastname} = getPerson() // 해당하는 key에 대한 데이터가 들어옴

7. Array Destructuring

  • 저장된 요소를 분해하여 배열의 순서에 따라 변수를 정의
function getScores(){
	return [70,80,90]
}
let [x,y,z] = getScores(); // x=70, y=80, z=90

8. Rest Parameter

  • 몇 개의 파라미터가 전달될지 모를 경우 유용
function sum(...args){
let total = 0;
for (let x of args){
	total +=x
}
sum(1,2,3,4,5)
sum(4,5,6)

9. Promise

  • JS에서 비동기 처리(특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해 주는 방식)에 사용되는 객체
  • 파일쓰기, DB 트랜잭션 처리 등 비동기 함수를 실행할 때 실행한 코드가 완료될 때까지 대기하지 않고 바로 다음 코드를 실행
  • 비동기 함수 실행이 완료되면 then() 함수를 통해서 그 결과에 대한 코드를 실행
  • new 생성자 함수를 사용해서 생성. 요청에 대한 응답에 성공하면, resolve() 함수에 결과를 전달. 요청 실패시 reject()함수에 에러를 전달
const promise = new Promise((resolve,reject)=>{
	if(true){
    	resolve('결과데이터');
    }
    else{
    	reject(new Error('에러'));
    }
 });

10. Async, Await

  • Promise와 동일한 목적으로 사용한다
  • Async는 비동기로 실행을 뜻함, Await는 비동기를 실행하는데 결과가 올 때까지 기다리겠다는 의미
  • await를 사용하는 코드가 작성된 함수는 반드시 async여야 함
async function myFunction(){
	const r = await asyncFunction()
}

0개의 댓글