자바스크립트 코드 개선

원본 코드

var setFirstEmptyInput = function(new_value) {
	var found = false;
	var i = 1;
	var elem = document.getElementById('input' + i);
	while (elem !== null) {
	   if (elem.value === '') {
		  found = true;
		  break;
	   }
	   i++;
	   elem = document.getElementById('input' + i);
	}
	if (found) elem.value = new_value;
	return elem;
};

고려 사항

• var 대신 const와 let 사용
• 불필요한 found 변수 제거
• null 체크
• 모든 elem.value가 ‘‘이 아니라면, 무한 루프

  반려한 고려 사항

• jQuery: 굳이..?
• querySelectorAll: 모든 input 요소를 가져오고, 실제 코드에서 얼마나 많은 input 요소들이 있을 지 모르기 때문에 반려

개선 코드

const setFirstEmptyInput = function(new_value) {
    let i = 1;
    let elem;
    while (elem = document.getElementById(`input${i++}`)) {
        if (elem.value === '') {
            elem.value = new_value;
            return elem;
        }
    }
    return null;
};

• 무한 루프: document.getElementById()는 존재하지 않는 ID에 대해 null을 반환 → 루프 종료 → null 반환

추가: === 연산자와 값 비교

===: 엄격한 동등 비교 연산자

• 비교 방식: 값과 타입 모두 비교
• 타입 변환: 없음, 엄격하게 비교
• 예시: 5 === '5' → false

’’, null, undefined 비교

’’

• 설명: 길이가 0인 문자열
• typeof 결과: 'string'
• 불리언 평가: false

null

• 설명: 값의 부재를 명시적으로 나타냄
• typeof 결과: 'object' (JavaScript의 오래된 버그)
• 불리언 평가: false

undefined

• 설명: 값이 할당되지 않은 변수의 기본값
• typeof 결과: 'undefined'
• 불리언 평가: false

주요 비교 결과

• null === undefined → false
• null == undefined → true
• '' === null → false
• '' == null → false
• 0 === '' → false
• 0 == '' → true

실제 코드에서의 활용

• 엄격한 타입 체크 필요 시: === 사용 권장
• 값의 존재 여부 확인 시: null과 undefined 구분 주의
• 빈 문자열 체크 시: 명시적으로 === '' 사용

모범 답안

var setFirstEmptyInput = function(new_value) {
	for (var i = 1; ; i++) {
		var elem = document.getElementById('input' + i);
    
    if (elem === null) {
	    return null;
    }

    if (elem.value === '') {
	    elem.value = new_value;
      return elem;
    }
	}
};

• 불필요한 변수 제거
• scope안에서 사용될 변수는 scope 내부에서 변수 선언