🎄메리크리스마스🎄

JSP 작업 중 login() 함수가 두번 호출되는 문제가 있었다.

<!-- 기존 코드 (type 미지정) -->
<button onclick="login();" style="cursor:pointer; border:0px;">LOGIN</button>

login() 함수 내부를 보면, 아이디와 비밀번호 검증 후

document.f.submit();을 호출하여 폼을 제출한다.

function login() {
    if (document.getElementById('id').value == '') {
        alert('아이디를 입력하십시오.');
        return;
    }

    if (document.getElementById('pwd').value == '') {
        alert('비밀번호를 입력하십시오.');
        return;
    }

    document.f.submit();
}

이때 문제가 발생하는 원인은 버튼 태그의 기본 동작이 submit 타입으로 인식되기 때문이다.

(<button> 태그의 기본 type은 submit)

<button> 태그의 기본 type인 submit으로 폼 제출이 되고,

login() 내에서 document.f.submit();을 호출하여 폼이 두 번 제출된다.

따라서 기본 type이 아닌 type="button"을 통해 타입을 명시해주면

브라우저 기본 폼 제출을 방지할 수 있다.

<!-- type 명시 -->
<button type="button" onclick="login();" style="cursor:pointer; border:0px;">LOGIN</button>

이 문제는 JSP뿐만 아니라 일반적인 HTML + JavaScript 환경에서도 발생할 수 있다.

특히 이런 불필요한 함수 중복 호출을 방지하기 위해 타입을 명시하자 😉

기존 JavaScript에서는 var를 이용하여 변수 선언을 했다.

그 후 ES6에서 let과 const가 추가되었고, 이 둘의 사용을 권장하고 있다.

그럼 왜 var를 두고 let과 const가 나왔고, 이 둘의 사용을 권장하는 것일까?

1. var의 단점

먼저 var 키워드는 크게 단점 세 가지가 있다.

1. 변수 중복 선언이 가능하기 때문에 의도치 않은 값 반환의 가능성이 있다.
2. 함수 레벨 스코프 때문에 함수 외부에서 선언된 변수는 전역 변수가 된다.
3. 변수 선언 이전에 변수를 참조하더라도 undefined가 반환된다.

ES6에서 나온 let, const 키워드는 위 세 가지 단점을 해결해준다.

2. 변수 선언 방식 차이

1. var (중복 선언 O)

var name = 'apple'
console.log(name) // apple

var name = 'orange'
console.log(name) // orange

중복 선언 가능

유닛테스트 단계에서는 각각 다르게 볼 수 있으니 편리하지만,

코드가 많아지면 어디에서 언제 어떻게 선언이 되었는지 파악하기 힘들고

의도하지 않은 값이 할당 될 가능성이 높다.

2. let (중복 선언 X, 재할당 O)

let name = 'apple'
console.log(name) // apple

let name = 'orange'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

중복 선언 불가능

let name = 'apple'
console.log(name) // apple

name = 'orange'
console.log(name) // orange

재할당 가능

3. const (선언과 초기화 동시 진행, 중복 선언 X, 원시값 재할당 X, 객체 재할당 O)

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'apple'

선언과 초기화 동시 진행

const name = 'apple'
console.log(name) // apple

const name = 'orange'
console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared

중복 선언 불가능

const name = 'apple'
console.log(name) // apple

name = 'orange'
console.log(name) // Uncaught TypeError: Assignment to constant variable.

원시값 재할당 불가능

const name = { one: 'apple' }
name.one = 'orange'
console.log(name) // { one: 'orange' }

객체 재할당 가능

3. 블록 레벨 스코프 차이

1. var

var a = 1

if (true) {
  var a = 2
}

console.log(a) // 2

함수 외부에서 var 키워드를 사용해 a를 선언하면 이는 전역 변수가 된다.

if문 안에서 a가 중복 선언되고, 출력값은 2로 바뀌게 된다.

실무 프로젝트의 긴 코드들에서 이런 상황이 온다면, 의도치 않은 값이 출력되게 된다.

2. let, const

// const 키워드도 동일
let a = 1

if (true) {
  let a = 2
}

console.log(a) // 1

var 키워드로 선언했을 때, 출력값이 2였지만

let, const로 함수 안에 선언하게 되면 지역 스코프를 가진다.

그래서 전역에서 출력하면 전역에 있는 1이 출력된다.

4. 호이스팅 차이

1. var

console.log(name); // undefined
var name;

var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행되어

name에 암묵적으로 undefined를 할당하여 초기화된다.

변수 선언이 런타임에 되는게 아니라, 그 이전 단계에서 먼저 진행되기 때문에

var 키워드에 값을 할당하지 않으면 언제나 undefined를 반환한다.

변수 생성 단계 : 선언 단계 > 초기화 단계 > 할당 단계

2. let

console.log(name); // Uncaught ReferenceError: name is not defined
let name;

let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.

런타임 이전에 선언 단계가 실행되지만 초기화 단계가 실행되기 전에 변수에 접근하면

아직 정의되지 않았다는 참조 오류 메세지가 뜬다.

그래서 let 키워드로 선언한 변수는 스코프의 시작 지점부터 초기화 단계 시작 지점까지

변수 참조가 불가능한 일시적 사각지대(Temporal Dead Zone; TDZ) 구간에 존재하게 된다.

3. const

console.log(constName) // Uncaught ReferenceError: Cannot access 'constName' before initialization
const constName = 'apple'

const 키워드로 선언한 변수는 선언 단계와 초기화 단계가 동시에 진행된다.

런타임 이전에는 실행이 불가능하기 때문에 초기화 되지 않은 상태라

접근 오류 메세지가 뜬다.