여러 개의 input 태그에 입력된 값을 하나로 합칠 때

• 이름이 숫자 1부터 5까지인 동일한 형식의 input 태그들이 있다. react hooks form을 이용하였기 때문에 입력된 값들을 submit할 때 해당 입력값들의 key는 각각의 숫자로써 data 객체 내 key로 들어가게 된다.
• 추가하지 않은 input 태그가 있을 수 있기 때문에 input 태그의 값이 undefined가 아닐 경우를 조건으로 설정하였다. 그 뒤 for문을 이용하여 1부터 5까지 순회한다.

if(data.i !== undefined) 

이와 같이 작성하였는데, 인식을 하지 못한다. 이렇게 하지 않고

if(data[i] !== undefined)

이와 같이 작성하여 성공하였다.

즉, 객체 내 속성 접근 시 점 표기법과 대괄호 표기법 차이 때문에 발생한 문제였다.
점 표기법을 이용할 시, 식별자 규칙을 지켜야 한다.

식별자란?

• 식별자는 코드 내의 변수, 함수, 혹은 속성 (en-US)을 식별하는 문자열

식별자 규칙

• 대소문자를 구별하며 유니코드 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없다.

반대로 괄호 접근법은 문자열이나 symbol을 사용할 수 있다. 여기서 문자열은 유효하지 않은 식별자여도 가능하다.

참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Property_Accessors