TIL 221003 옵셔널체이닝 / null 병합 연산자

오늘 공부한 것

• localstorage 활용(노마드코더)
• 노마드 바닐라JS 강의 봄!
• 간단한 숫자 게임 구현(노마드코더 챌린지 과제)
• 딥다이브 읽고 있음

공부한 것 정리

localstorage

• 로컬스토리지를 사용하면 데이터를 key와 value 형식으로 저장할 수 있다.
• 저장해놓은 데이터는 브라우저나 OS가 재시작하더라도 데이터가 파기되지 않는다.
• 쿠키와 다르게 웹스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다.
  이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다고 한다.

// 데이터를 저장하는 방법
localStorage.setItem('myCat', 'Tom');

// 데이터를 가져오는 방법
const cat = localStorage.getItem('myCat');

// 해당 데이터를 삭제하는 방법
localStorage.removeItem('myCat');

// 데이터 전체 삭제
localStorage.clear();

숫자 게임 구현

노마드코더 바닐라JS 챌린지 7번째? 과제였다.
input:number 의 밸류를 가져와서 서로 비교하는 대충 그런 기능을 구현해야 했는데(자세하게 쓰면 안될 것 같아서...ㅎ)

const inputRange = document.querySelector(".inputRangeNumber").valueAsNumber;
const inputGuess = document.querySelector(".inputGuessNumber").valueAsNumber;
const submit = document.querySelector("form");

submit.addEventListener("submit", (e) => {
 e.preventDefault();
 console.log(inputRange, inputGuess);
});

이 방식은 콘솔에서 NaN이 뜨는데

submit.addEventListener("submit", (e) => {
  e.preventDefault();
  const inputRange = document.querySelector(".inputRangeNumber").valueAsNumber;
  const inputGuess = document.querySelector(".inputGuessNumber").valueAsNumber;
  console.log(inputRange, inputGuess);
});

는 내가 원하는 값이 잘 나온다. 분명 코드가 좀 더럽긴 해도 기능은 제대로 되어야 할텐데 안돼서 멘붕이 왔다. 거꾸로 올라가면서 뭐가 원인인지 봤는데 애초에 인풋값을 안 가져오고 있었던 것이다,, 코드 한 줄 한 줄 확인해가면서 쓰는 습관을 들여야겠다... 별로 어려운 과제는 아닌 것 같아서 되겠거니~ 하고 대충 했다가 안되는 이유 찾느라 엄청 고생했다ㅠ

옵셔널체이닝 / null 병합 연산자

옵셔널체이닝 연산자 ?.

• ES11에서 도입된 최신 문법
• 좌항 피연산자가 null 또는 undefined인 경우 undefined를 변환하고, 그렇지 않으면 우항 프로퍼티 참조를 이어간다.

var str = '';

// 문자열의 길이를 참조, 좌항 피연산자가 falsy 값이지만
// null 이나 undefined가 아니기 때문에 우항의 프로퍼티를 참조한다
var length = str?.length;
console.log(length); // output : 0

null 병합 연산자 ??

• 옵셔널체이닝 연산자와 같이 ES11에 도입된 문법이다.

// 좌항의 피연산자가 null 또는 undefined면 우항의 피연산자를 반환하고,
// 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? 'default string';
console.log(foo); // output : "default string";

볼 때마다 새로운 느낌인 연산자ㅋㅋㅠㅠ 맨날 보고 음 기억해둬야지 하곤 또 까먹고의 연속이다.(사실 다른 것도 다 그럼...)

딥다이브 한 번 훑으면서 아리까리한 개념은 정리하고 가야겠다 싶음

노마드챌린지에서 은근히 시간을 많이 까먹었더니 공부를 많이 못했다... 아침 일찍 일어났는데 힝ㅠ
이전 챌린지보다 과제 난이도를 좀 낮춘거라고 하던데ㄱ- 이전 난이도의 과제도 한 번 해보고 싶네... 자바스크립트로 기능 구현하는 거 아직 안 익숙해서 많이 버벅인다. 다른 사람들이 짜놓은 코드 보면서 물개 박수 치는 것 밖에 못함... 심지어 가끔은 봐도 아니 이게 대체 뭔 소린고...한다ㅎㅎ 에효효 열심히 하자!