오늘은 비교적 간단한 자바스크립트의 네이밍 케이스부터
자바스크립트의 비구조화, map에 대해 알아보려한다.
✅JavaScript 네이밍 케이스
1️⃣ kebab-case / snake_case
: 파일 및 폴더명에 사용
2️⃣ camelCase
: 변수명 및 함수명에 사용
3️⃣ PascalCase
: 클래스명에 사용
✅ JavaScript 비구조화
🌟 객체의 비구조화
통째로 넣지 ❌,
필요한 값만 골라서 넣도록 한다.
✔️ 객체의 경우,
변수 이름은 임의로 바꿀 수 없고
정해진 대로 사용해야 한다.
주소창 주목!
v=abc 이므로 'abc'가,
t=2s이므로 '2s'가 뜨는 모습을 볼 수 있다.
하나 더 예시를 들어보자.
'@KANG'이라는 nickname을 불러온 모습이다.
🌟 배열의 비구조화
✔️ 배열의 경우, 인덱스 값 순서를 맞춰서 작성해야 한다.
num2, num3을 작성했으나,
현재 콘솔창을 보면 컴퓨터가
num2 = 1,
num3 = 2로 받아들이고 있음을 알 수 있다.
즉, 인덱스 값을 생각해야 한다는 것이다.
다음과 같이 자리를 비워두는 방식으로
배열을 정상적으로 비구조화 할 수 있다.
✅ JavaScript map
: key-value 쌍으로 데이터를 저장하는 형태
맵핑을 하고 난 후 , console.log(db)를 한 모습이다.
원하는 정보를 key 값으로 불러올 수 있다.
✔️
parseInt()를 사용해 문자열로 인식되는 key 값을
실제 숫자값으로 변경할 수 있다.
한 화면에
id(key 값)와productName을 함께 불러올 수 있다.
❗️ 개발자가 예상하지 못한 부분 = 에러
id는 1, 2, 3 값만 존재한다.
따라서 내가 주소창에 입력한 7 값은 존재하지 않음에도 불구하고
화면에 'id=7'이 뿌려지는 것이다.
🧃 if 문을 사용해 에러 메세지 표시하기
예기치 못한 상황이 발생했을 경우를 대비한
메시지를 뿌려야 한다.
id가 만들어둔 db 안에 존재하지 않을 경우,
{message : "찾으시는 상품이 없습니다."}를 뿌리려고 한다.
완성! 🎉
오늘은 여기까지!
자바스크립트는 진짜 끝이 없는 언어인 것 같다.
프론트엔드도 가능하지, 백엔드도 가능하지.
재미있는 언어임이 분명하다.
이 언어로 또 무엇을 할 수 있을지
앞으로 배울 내용들이 기대된다. 👾
