JavaScript 9일차 정리 [ 변수 var와 이벤트 ]

var

 

var는 let과 같은 JavaScript에서 사용되는 예약어이다

let과 같이 변수를 선언 및 초기화를 할 수 있다

사용법 또한 let과 같다

 

// 변수선언 및 초기화
var i;
var y = 100;

 

var와 let의 차이점

 

범위

 

var선언은 전역 범위 또는 함수 범위 , let 선언은 블록 범위이다.

 

 

호이스팅

 

호이스팅이란 var 선언문을 해당 스코프의 가장 위로 움직이는 것처럼 동작하는 특성을 말한다

함수안에서 선언된 변수의 경우는 해당 함수의 가장 위로 호이스팅한다

 

 

호이스팅 예시

 

 

var orderPrice = 700000;

if (orderPrice >= 500000) {
    var point = orderPrice*0.05;
    console.log("적립포인트 : ",point);
}

console.log('적립포인트 : ',point);

 

이러한 코드가 있을때 실제로 수행되는 내용은 이러하다.

위 코드에 대한 호이스팅 예시

 

var로 변수 선언하는 코드가 가장 위로 올라가고, 그 밑에 초기화하는 코드가 실행된다

실제로 선언과 초기화를 같이 수행했어도 그러하다

 

 

중복정의

 

let은 동일한 이름의 변수를 중복 정의할 수 없지만 var는 중복정의가 가능하다

 

var로 a라는 변수 이름을 선언한 것에 대한 결과 출력은 이러하다

 

 

반면에 let으로 선언한 a는 오류가 발생하고 코드를 실행했을 때도 a라는 변수가 이미 선언되어 있다고 오류가 발생한다

 

 

var와 let의 차이점을 간단히 정리하면 이렇게 볼 수 있다

구분	var	let
호이스팅	가능	불가능
범위	변수의 범위가 함수	변수의 범위가 블록
중복정의	가능	불가능

 

---

 

---

 

이벤트

 

컴포넌트와의 상호작용으로 발생하는 것.

 

컴포넌트(Component) : 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위

 

JavaScript에서 컴포넌트에 해당하는 요소들은 이러하다.

창, 버튼, 체크박스, 콤보박스, 입력필드, 메뉴등이 컴포넌트에 해당한다

 

이벤트 소스 : 이벤트가 발생하는 컴포넌트

 

이벤트 핸들러 : 이벤트 소스에서 지정한 이벤트가 발생했을 때 실행할 함수.

// 이벤트 핸들러의 예제
function fn1 () {
	alert("버튼");
}

 

이벤트 코드예시

 

 

 

button1은 이벤트 소스이고, 버튼을 눌러서 발생하는 것을 이벤트라고 말한다

 

 

 

 

이벤트 간단정리

1. 컴포넌트를 선정한다  -> 버튼 <button>
2. 이벤트의 종류를 선정한다  -> 이벤트이름 ( onclick ) 
3. 이벤트를 작성한다  -> 함수구현
4. 이벤트 핸들러와 이벤트를 연결  <button onclick = "fn1( )"> button1 </button>

   

   이벤트 간단정리와 같이보면 이해가 더 빠를것이다