[JavaScript] JS 변수, 함수, 이벤트
업데이트:
✅ 변수 선언
자바스크립트에서 변수를 선언하기 위한 예약어는 var, let, const 3가지가 존재한다. 각각의 예약어는 어떤 역할을 하고 특징을 지녔는지 알아보도록 하겠다.
📌 예약어 var
var은 지역변수를 정의할때 사용한다. 별로 어려운게 없으니 예제를 통해 어떻게 사용되는지 알아보자.
<script>
function addNumber(){
var sum = 10 + 20;
}
addNumber();
console.log(sum);
</script>
addNumber()라는 함수를 정의하고 함수 내부에 var sum = 10 + 20; 이라는 지역변수를 정의했다. 이때 sum을 선언한 함수 외부에서 console.log를 실행시키고 개발자 도구를 살펴보면 오류가 나온다.
var는 지역변수를 선언하기 때문에 함수 내부에서 선언한 변수는 함수 내부에서만 사용가능하고 외부에서는 사용할 수 없다.
그림과 같이 콘솔창에는 Uncaught ReferenceError : sum is not defined 라는 오류가 발생한다.
또한 var를 사용하지 않은채 예약어 없이 변수를 선언하면 전역변수로 사용할 수 있다.
때문에 var은 재선언과 재할당이 가능하다. 예시를 보며 알아보자.
<script>
function addNumber(num1, num2) {
return num1 + num2;
}
var sum = addNumber(10, 20); // sum 변수 선언, 호출
console.log(sum); // 30
sum = 50; // sum 재할당
console.log(sum); // 50
var sum = 100; // sum 재선언
console.log(sum); // 100
</script>
var로 선언한 sum 변수는 최초 선언이후에 재할당, 재선언이 가능하기 때문에 값이 계속 변하는게 보인다.
📌 예약어 let
ES6 이전의 JS 프로그램에서는 var 예약어만으로 변수를 선언했는데, 이로인해 발생하는 문제가 많았다. var 예약어를 빠트리면 전역변수로 선언되기도 하고, 프로그램의 길이가 길어지면 실수로 변수를 재선언하거나 값을 재할당하는 경우가 생기기도 한다. 그래서 ES6에서는 변수 선언을 위한 예약어로 let이나 const를 권장한다.
let 예약어로 선언한 변수는 변수를 선언한 블록 ( { }로 묶은 부분 ) 에서만 유효하다. 예시를 통해 알아보자.
<script>
function calcSum(n) {
let sum = 0;
for(let i = 1; i < n + 1; i++) {
sum += i;
} // i는 for문 내에서만 사용가능
console.log(sum);
} // sum은 calcSum함수 내에서만 사용가능
calcSum(10);
</script>
위의 코드에서 let sum=0은 calcSum() 함수 내부에서 선언되었기 때문에 calcSum() 내부에서만 사용가능하다. 또한 i는 for문 내부에서 선언되었기 때문에 for문 내부에서만 사용가능 하다.
let 예약어는 재할당은 가능하지만, 재선언은 할 수 없다. 재선언을 하면 오류가 발생하는것을 확인할 수 있다.
📌예약어 const
const는 이름에서 알 수 있듯이 상수 변수를 선언하는 예약어이다. 프로그램 안에서 절대 변하지 않는 변수를 선언한다는 의미이다. 특정 상수를 자주 사용하는 상황에서 유용하게 쓰인다. 또한 재선언과 재할당이 모두 불가능하다.
✅ 함수 표현식
JS에서는 같은 함수라도 다양한 방식으로 표현할 수 있다. 일반 함수, 익명 함수, 즉시 실행 함수, 화살표 함수 총 4가지 방법이 있고 그리 어려운 내용은 아니니 예제와 함께 알아보도록 하겠다.
📌일반 함수
function addNumber(num1, num2){ // 함수 선언
var sum = num1 + num2;
return sum;
}
let result = addNumber(2,3); // 함수 호출
document.write("결과 : "+result);
📌익명 함수
이름이 없는 함수를 의미한다. 일반 함수에서 함수 이름만 없어진 형태를 가진다.
function (num1, num2){
return num1+num2;
}
그렇다면 함수명이 없는데 어떻게 사용할 수 있을까? 익명함수는 함수자체가 식이기 때문에 함수를 변수에 할당할 수 있고 다른 함수의 매개변수로도 사용할 수 있다.
- 변수에 함수 할당
let result = function ( num1, num2 ) { // 익명 함수를 선언한 후 변수 result에 할당
return num1 + num2;
}
document.write("결과 : " + result(10,20)); // 익명 함수 실행
- 다른 함수의 매개변수로 익명함수 사용
function calculate(func){ // 함수를 매개변수로 갖는 calculate함수
func();
}
calculate(function(num1,num2){ // 익명함수를 인자로 가지고 calculate 함수 호출
return num1+num2;
});
📌즉시 실행 함수
일반적으로 함수는 선언하고 필요할 때마다 호출해서 사용하는 방법을 많이 사용하지만, 딱 한번만 실행하는 함수라면 정의와 동시에 실행할 수 있다. 이를 즉시 실행 함수라고 하는데 기본형과 예제를 알아보자.
- 기본형
// 매개변수가 없는 즉시 실행 함수
(function(){
// 명령
}());
// 매개변수가 있는 즉시 실행 함수
(function(매개변수){
// 명령
}());
함수를 식형태로 선언하기 때문에 마지막에 세미콜론을 붙여줘야 한다.
- 기본형 즉시실행 함수
(function(){
let userName = prompt("이름을 입력하세요");
document.write("안녕하세요 + userName + 님!"
}());
- 매개변수가 있는 즉시 실행 함수
(function(num1,num2){ // 매개 변수 num1, num2
sum = num1 + num2;
}(100,200)); // 인자 100,200 설정
document.write("결과 : " + sum); // 결과 : 300
📌 화살표 함수
ES6 버전부터는 => 화살표 표기법을 사용해 함수 선언을 간단하게 작성할 수 있다. 이는 익명함수 에서만 사용가능하다!
- 기본형 :
(매개변수) => { 함수 내용 }
- 매개변수가 없는 함수
const hi = function() { return "안녕하세요"}
- 매개변수가 없는 화살표 함수
const h1 = () => { return "안녕하세요" };
- 매개변수가 없는 화살표 함수 ( 중괄호 생략가능 )
const h1 = () => return "안녕하세요";
- 매개변수가 1개인 함수
let hi = function(user){
document.write(user + "님 안녕하세요");
}
- 매개변수가 1개인 화살표 함수
let hi = (user) => { document.write(user+"님 안녕하세요");
- 매개변수가 2개 이상인 화살표 함수
let sum = (a,b) => a+b;
✅ 이벤트 ( Event )
이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 의미한다. 마우스나 키보드, 문서 로딩, form에 데이터 입력 등의 활동을 할때 이벤트가 주로 발생한다. 이벤트의 종류는 정말 많고 일일히 외울 필요는 없어보인다. 한번 쭉 표로 정리하면서 읽어보고 필요할 때마다 찾아보면 될것 같다.
📌 마우스 이벤트
| 종류 | 설명 |
|---|---|
| click | 사용자가 HTML 요소를 클릭할 때 발생하는 이벤트 |
| dbclick | 사용자가 HTML 요소를 더블클릭 할 때 발생하는 이벤트 |
| mousedown | 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 발생하는 이벤트 |
| mousemove | 사용자가 요소 위에서 마우스 포인터를 움직일 때 발생하는 이벤트 |
| mouseover | 마우스 포인터가 요소 위로 옮겨질 때 발생하는 이벤트 |
| mouseout | 마우스 포인터가 요소를 벗어날 때 발생하는 이벤트 |
| mouseup | 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 발생하는 이벤트 |
📌 키보드 이벤트
| 종류 | 설명 |
|---|---|
| keydown | 사용자가 키를 누르는 동안 발생하는 이벤트 |
| keypress | 사용자가 키를 눌렀을 때 발생하는 이벤트 |
| keyup | 사용자가 키에서 손을 땔 때 발생하는 이벤트 |
📌 문서 로딩 이벤트
| 종류 | 설명 |
|---|---|
| abort | 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 발생하는 이벤트 |
| error | 문서가 정확히 로딩되지 않았을 때 발생하는 이벤트 |
| load | 문서 로딩이 끝나면 발생하는 이벤트 |
| resize | 문서 화면 크기가 바뀌었을 때 발생하는 이벤트 |
| scroll | 문서 화면이 스크롤 되었을 때 발생하는 이벤트 |
| unload | 문서에서 벗어날 때 발생하는 이벤트 |
📌 폼 이벤트
| 종류 | 설명 |
|---|---|
| blur | 폼 요소에 포커스를 잃었을 때 발생하는 이벤트 |
| change | 목록이나 체크 상태 등이 변경되면 발생하는 이벤트. <input>, <select>, <textarea> 태그에서 사용 |
| focus | 폼 요소에 포커스가 놓였을 때 발생하는 이벤트. <label>, <select>, <textarea>, <button> 태그에서 사용 |
| reset | 폼이 리셋되었을 때 발생하는 이벤트 |
| submit | submit 버튼을 클릭했을 때 발생하는 이벤트 |
✅ 이벤트처리기 (EventHandler)
📌 HTML태그를 이용한 이벤트 처리기
JavaScript에는 상당히 많은 이벤트가 존재하고 이를 처리하는 함수를 이벤트처리기 혹은 이벤트핸들러 라고 부른다. 이벤트를 처리하는 가장 기본적인 방법은 HTML 태그에 이벤트 처리기를 직접 연결하는 것이다.
- 기본형 :
<태그 on이벤트명 = "함수명">
간단한 예제를 통해 더 알아보자. 버튼을 클릭하면 알림창을 표시하는 예제이다.
<body>
<ul>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Green</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Orange</a></li>
<li><a href="#" onclick="alert('버튼을 클릭했습니다.')">Purple</a></li>
</ul>
</body>
버튼을 클릭하면 배경색을 바꾸는 코드이다.
<body>
<ul>
<li> <a href="#" onclick="changeBg('green')Green</a></li>
<li> <a href="#" onclick="changeBg('orange')Orange</a></li>
<li> <a href="#" onclick="changeBg('purple')Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color){
var result = document.querySelector('#result');
result.style.backgroundColor = color;
}
</script>
</body>
📌 DOM을 이용한 이벤트 처리기
HTML태그를 이용하면 HTML이 주인이 되어 자바스크립트의 함수를 불러와 사용하낟. 그러나 DOM을 사용하면 자바스크립트가 주인이 되어 HTML의 요소를 가져와 이벤트 처리기를 연결 할 수 있다.
- 기본형 :
웹 요소.onclick = 함수;
자바스크립트에서는 다양한 방법으로 웹 요소를 가져올 수 있는데 그 중 quertSelector()를 사용하는게 가장 편하다. ()안에는 id,class명, 선택자 등을 넣을 수 있다. 예제를 통해서 어떻게 이벤트 처리를 하는지 알아보자.
<body>
<button id="change"> 글자색 바꾸기 </button>
<p> 안녕하세요. 김테드 입니다. </p>
(...생략...)
// 방법 1 : 웹 요소를 변수로 지정 & 미리 만든 함수 사용
let changebttn = document.querySelector("#change");
changebttn.onclick = changeColor;
// 방법 2 : 웹 요소를 따로 변수로 만들지 않고 사용
document.querySelector("#change").onclick = changeColor;
function changeColor(){
document.querySelector("p").style.color = "#f00";
// 방법 3 : 함수를 직접 선언
document.querySelector("#change").onclick = function(){
document.querySelector("p").style.color = "#f00";
};
(...생략...)
🔔 Document 객체
Document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야만 한다. 자세한 내용은 이후 자바스크립트 객체 관련 공부를 할 때 깊게 다뤄보자.
댓글남기기