STUDY AND LESSON

전개 연산자는 ES6(ECMAScript6)에서 새로 추가되었습니다. 객체나 배열의 값을 하나 하나 넘기는 용도로 사용할 수 있으며 사용 방법은 점 세 개( ... )를 붙이면 됩니다.

전개 연산자 등장 전 배열 내용 조합

ES6 이전까지는 배열을 합칠 때 concat 함수를 사용했고 다음 예시처럼 사용합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const arr4 = arr1.concat(arr2, arr3);

console.long(arr4); // 출력 : [1, 2, 3, 4, 5, 6, 7, 8, 9]

ES6에서 전개 연산자를 이용하여 배열을 합칠 수 있고 다음처럼 사용합니다.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const arr4 = [...arr1, ...arr2, ...arr3];

console.long(arr4); // 출력 : [1, 2, 3, 4, 5, 6, 7, 8, 9]

var의 문제점

var를 통해 변수를 생성할 경우 변수를 변경할 때 에러가 발생하지 않아 코드량이 많아졌을 때 해당 변수가 어떻게 사용되고 있는지 파악하기 어렵고 값이 바뀔 수 있습니다.

var name = 'rooney';
console.log(name) // rooney 출력

var name = 'lampard';
console.log(name) // lampard 출력

위의 코드처럼 위에서 값을 이미 선언했음에도 아래에서 변경할 경우 오류 없이 사용 가능하기 때문에 코드량이 늘어날 경우 해당 변수에 변경이 일어나도 파악하기 어려워집니다.

이를 해결하기 위해 ES6(ECMAScript6)에서 추가된 변수 선언 방식이 let과 const입니다.

let을 알아봅시다

let name = 'rooney';
console.log(name) // rooney 출력

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

위 코드에서 앞서 var에 대해 예로 든 코드를 선언 방식만 var에서 let으로 바꿨습니다. 이렇게 선언할 경우 name은 위에서 이미 선언했다는 에러 메시지가 나옵니다. 즉, 같은 이름의 변수를 재선언할 수 없습니다.

const를 알아봅시다

const name = 'rooney';
console.log(name) // rooney 출력

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

위 코드를 보면 앞에서 작성한 let 코드와 차이가 없어보입니다. const도 let과 마찬가지로 재선언이 불가능한데 이 둘의 차이는 뭘까요?

let과 const의 차이

let name = 'rooney';
console.log(name) // rooney 출력

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

name = 'lampard';
console.log(name) // lampard 출력


const name = 'rooney';
console.log(name) // rooney 출력

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

name = 'lampard';
console.log(name); // Uncaught TypeError: Assignment to costant variable

위 코드를 보면 let은 재선언은 안 되지만 재할당은 가능합니다. 하지만 const는 재선언, 재할당이 모두 불가능한 상수 개념이라고 볼 수 있습니다.

input 태그를 검증하기 위한 jQuery 라이브러리 validate 사용 순서입니다.

1) jQuery import

2) jQuery validate import

3) 검증할 태그를 선택하여 validate() 적용

4) validate 함수 내에서 필요한 설정 적용

예제 코드는 아래를 참고해주세요.

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 제이쿼리 validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>




<!-- 검증할 form 태그 -->
<form id="searchForm">
	<input type="text" name="userName" id="userName">
    <button type="submit">전송</button>
</form>


<!-- validate에서 검증 -->
<script>


	$("#searchForm").validate({

        // validate로 체크할 항목을 선정
        rules : {
            userName : {
                required : true
            }
        },
        
        // 미입력시 띄어줄 메시지를 입력
        messages : {
            userName : {
                required : '이름을 입력해주세요.'
            }
        },
    });

</script>

위처럼 작성했을 때 input 태그에 입력 없이 전송 버튼을 눌렀을 때 오른쪽에 '이름을 입력해주세요.' 라는 문구와 함께 submit을 막아줍니다.

https://itinerant.tistory.com/69