자바스크립트 비구조화
객체(Object)
좌변의 json 안에 있는 변수명과 일치하는 우변의 json 키에 대응하는 값을 좌변의 변수에 대입한다.
아래 코드에서는 우변의 값이 json이니까 좌변에 json을 열어서 title과 description이라는 변수를 만들어놓는다. 그리고 우변의 json이 가지고 있는 키 중 title과 description이 있으면 그 키의 value를 좌변의 json 안에 생성해 놨던 변수 title과 description에 대입한다. 우변의 json에 존재하지 않는 키에 대해서 좌변에 변수를 선언하면 value가 undefined로 설정된다.
const obj = {
title: '객체',
description: '객체의 비구조화'
};
const { title, description } = obj;
console.log(`title: ${title}, description: ${description}`);
배열(Array)
배열의 비구조화는 순서로 결정된다. 원하지 않는 값은 콤마(,)로 넘어가고, 원하는 값에만 변수명을 적어준다.
const arr = [1, 2, 3, 4, 5];
const [num1] = arr;
const [, num2, , num4] = arr;
const [, , num3, , num5] = arr;
console.log(num1, num2, num3, num4, num5);
params
params의 키와 값은 모두 문자열이다.
따라서 params의 value를 숫자로 사용할 때는 문자열을 숫자로 변환해주는 함수인 parseInt()를 사용해야 한다.
app.get('/products/:productId', function (req, res) {
let { productId } = req.params;
productId = parseInt(productId);
res.json({
productID: productId
})
})
query
url의 물음표 뒤에 있는 모든 문자열을 말한다. query도 데이터를 넘겨주기위해 사용한다.
네이버 검색창에 데브코스를 검색해봤다. 물음표 뒤에 있는 모든 것들이 쿼리이고, 앰퍼센트 기호로 파라미터를 여러 개 넘겨줄 수도 있다.
이제 query의 파라미터를 추출해보자.
app.get('/search', function (req, res) {
const { location, query } = req.query;
res.json({
location: location,
query: query
});
})
API 매칭
라우팅 할 때는 위에서부터 차례대로 확인하며 경로와 메서드가 처음 일치하는 코드만 실행하므로 라우팅 순서에 신경 써야 한다. 예를 들면 아래와 같은 구조여야 한다. 두 순서를 반대로 적으면 'search'를 id로 인식하는 경우가 발생한다.
app.get('/search', function (req, res) {
...
})
app.get('/:id', function (req, res) {
...
})
JS 네이밍 규칙
폴더, 파일명
둘 중 아무거나 사용해도 되지만 통일성을 위해 한 가지만 사용해야 한다.
case | 설명 | 예시 |
kebab-case | 단어 사이를 하이픈(-)으로 구분 | express-demo |
snake_case | 단어 사이를 언더바(_)로 구분 | express_demo |
변수명
case | 설명 | 예시 |
camelCase | 두 개 이상의 단어를 합쳐서 쓸 때 두 번째 단어부터 첫 글자는 대문자 | channelTitle |
클래스명
case | 설명 | 예시 |
PascalCase | 모든 단어의 첫 글자는 대문자 | BackgroundColor |
Map
key-value 쌍을 저장하는 자료구조이다.
key는 문자열과 숫자를 구분한다. 배열, 객체 등과 같은 경우에는 내용물이 같은지 보는 게 아니라 저장된 위치로 판단한다.
메서드 | 설명 | 예시 |
set | key와 value를 설정한다. | map.set(1, 'v1') |
get | 해당하는 key의 value를 가져온다. 존재하지 않는 key라면 undefined를 반환한다. |
map.get(1) |
has | 해당 Map이 파라미터로 전해준 key를 가지고 있는지에 대해 참/거짓을 반환한다. | map.has(1) |
'데브코스' 카테고리의 다른 글
[4주차 - DAY3] Node.js 및 Express.js를 사용한 서버 개발 실습(1) (0) | 2024.03.20 |
---|---|
[4주차 - DAY2] REST API 디자인 및 구현(2) (1) | 2024.03.19 |
[3주차 - DAY5] Express.js 기반의 웹 서버 구축 및 응용(2) (0) | 2024.03.15 |
[3주차 - DAY4] Express.js 기반의 웹 서버 구축 및 응용(1) (0) | 2024.03.14 |
[3주차 - DAY3] API (0) | 2024.03.13 |