TIL-15 자바스크립트 완벽 가이드, 투두리스트-STEP1

khundi·2022년 6월 14일
0
post-thumbnail

자바스크립트 완벽 가이드

- "+" 연산자

2항 연산자의 +
숫자 피연산자 더한다.
문자열 피연산자 병합한다.

1 + 2     // 3 : 더한다.
"1" + "2" // "12" : 병합한다.
"hello" + " " + "there" // "hello there" : 병합한다.

두개의 피연산자가 섞이면(숫자+문자열) 우선권을 정해야하는데
+ 문자열 병합에 우선순위가 있다. 문자열 > 숫자열

1 + "2"       // "12" : 병합, 문자열 > 숫자열
1 + {}        // "1[object Object]" : 객체를 문자열로 변환한 후 병합
true + true   // 2 : 불 값을 숫자로 변환한 후 덧셈
2 + null      // 2 : null을 0으로 변환한 후 덧셈
2 + undefined // NaN undefined를 NaN으로 변환한 후 덧셈
1 + 2 + " blind mice"   // "3 blind mice"
1 + (2 + " blind mice") // "12 blind mice"

+연산자의 결합성은 왼쪽에서 오른쪽이므로 먼저 두 숫자를 더한 다음 그 합에 문자열을 병합한다.
괄호를 넣으면 순서가 달라져 괄호 안에 문자열로 병합되고 다시 숫자 1과 병합한 결과를 얻는다.

- 단항 산술 연산자

  • 단항 플러스(+)
    단항 플러스 연산자는 피연산자를 숫자(또는 NaN)로 변환한 값을 반환한다.
    이미 숫자인 피연산자는 아무 일도 일어나지 않는다.
    BigInt 값은 일반적인 숫자로 변환할 수 없어 단항 플러스 연산자를 사용할 수 없다.

  • 단항 마이너스(-)
    -를 피연산자를 숫자로 변환한 다음 부호를 바꾼다.

  • 증가(++)
    ++ 연산자는 피연산자에 1을 더한다.
    ++ 연산자의 반환 값은 피연산자와 연산자의 위치에 따라 다르다.
    앞에 있을 땐 "전위 증가 연산자"라고 하며 피연산자의 값에 1을 더한 후 그 값으로 평가됨.
    뒤에 있을 땐 "후위 증가 연산자"라고 하며 피연산자를 평가한 뒤 1을 더한다.

let i = 1, j = ++i // i와 j는 모두 2이다.
let n = 1, m = n++ // n은 2이고 m은 1이다.
  • 감소(--)
    -- 연산자는 ++ 연산자와 빼는 것만 빼고 같다. 피연산자에 1을 뺀다.

투두리스트 STEP-1

- 고유ID 만들기

투두리스트 데이터를 로컬스토리지에 저장하는 과정에서 id 값을 같이 넣어줬는데 이 값을 무작위 값으로 넣어주는 로직을 Date.now() 메서드를 사용했다.

이 메서드는 밀리초까지 계산해서 숫자를 넣어준다고해도 동시에 엄청난 양의 데이터가 몰리게 되면 동시에 데이터가 입력될 가능성이 있다.

이 가능성을 아예 차단해버리자고 생각했고 찾아본 답은 이렇다.

let newTodoId = Date.now();
for (let i in data.todos) {
  while (newTodoId === data.todos[i].id) {
    newTodoId = Date.now();
  }
}

만약 newTodoId에 부여된 값이 기존의 데이터 id와 대조해보며 같은 값이 있는지 체크하는 것이다.
체크해서 같은 값이 있다면 다시 Date.now() 메서드 실행.

이렇게 중복없는 id 값을 부여할 수 있게 되었다.

근데 밀리초까지 겹칠 수 있는 데이터 양이면 하나하나 대조해가며 id를 부여할 수 있나...?

profile
안녕하세요. 웹 프론트엔드 개발자 전성훈입니다.

0개의 댓글