자바스크립트 함수,이벤트

함수란 특정기능을 수행하는 소스 코드를 따로 묶어 놓은 덩어리를 말한다.

 

소스를 함수로 분리해 놓으면 필요할 때마다 원하는 기능만 따로 실행할 수 있고, 한 번만 사용하는 것이 아니라 같은 기능이 필요한 다른 곳에서 다시 사용할 수도 있다.

 

함수를 사용하면 각 명령의 시작과 끝을 명확하게 구별할 수 있다.

 

함수에 별도의 이름을 붙으면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.

 

자바스크립트에도 이미 여러 함수가 미리 만들어져있어서 개발자는 그 함수를 가져다가 사용할 수 있다. 

ex) alert() 함수

 

이렇게 자바스크립트에 포함된 함수를 내장함수라고 한다.

 

 

내장함수뿐만 아니라 프로그램을 작성하면서 필요한 기능, 자주 사용할 것 같은 기능은 그 기능에 필요한 명령을 사용자가 직접 묶어서 함수로 만들 수 있다.

 

함수가 어떤 명령을 처리해야 할지 미리 알려주는 것을 '함수 선언'라고 하고,  선언한 함수를 가져와 사용하는 것을 '함수 실행'라고 함

 

 

 

 

function 함수명() {
	함수에서 실행할 명령
}

함수선언법

 

 

 

 

function addNumber(){
	var sum = 10 + 20;
    console.log(sum);
}

addNumber() // 30출력

선언한 함수를 실행하기 위해서는 위와 같이 함수 이름을 사용하며,

'함수를 호출한다' 라고 한다.

 

이렇게 함수를 한번 선언해 두면 자바스크립트 소스 안의 어디에서든

함수를 불러서 실행할 수 있다.

 

웹 브라우저에서 자바스크립트 소스를 해석할 떼 함수 선언 부분을 가장 먼저 해석한다. 그래서 개발자가 원하는 언 ㅡ곳이든 함수를 선언해 놓기만 하면 선언한 위치와 상관없이 함수를 실행할 수 있다.

 

 

 

 

 

let과 const

 

es6버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생성되었다.

 

자바스크립트에서 변수를 선언하고 사용할 때 변수가 적용되는 범위를 '스코프(Scope)'라고 한다.

한 함수에서 사용할 수 있는 변수를 '지역변수' 또는 '로컬변수'라고 하고, 스크립트 소스 전체에서 사용할 수 있는 변수를 

'전역 변수' 또는 '글로벌 변수'라고 한다.

 

함수 하나만 가지고도 원하는 기능을 만들 수 있지만, 대개의 경우 2~3가지 혹은 수십 가지 함수를

사용해석 기능을 구현한다.

 

예를 들어 어떤 함수의 실행 결괏값을 다른 함수에서도 실행할 수 있게 하려면 '전역 변수'로 지정

함수 안에서만 사용하고 그대로 끝나게 하려면 '지역변수'로 지정

 

 

 

 

var myVar = 100; // 전역 변수 선언
test();

document.write("myVar is" + myVar);

function test(){
	var myVar = 50; // 지역 변수 선언
}

test함수 안에서 예약서 var과 함께 myVar이 선언되었고, 50이 할당되었다. 이는 함수 안에서만 사용할 수 있는 지역 변수이기에

함수를 벗어나면 그 값은 무효가 된다. 그렇기에 document.write로 myVar을 출력하면 100이 나온다.

 

 

 

 

var myVar = 100;
test();
document.write("myVar is" + myVar);

function test(){
	myVar = 50;
}

전역변수는 변수를 한 번 선언하고 나면 그 값을 계속해서 유지한다. 만약 함수 안에서 새롭게 전역 변수를 선언하려면 var 예약어를 사용하지 않으면 된다.

 

 

 

 

 

호이스팅

 

자바스크립트에서 var 변수를 사용할 때 조심해야 할 개념이 있다.

바로 호이스팅(hoisting)이다. 이는 '끌어올리다'를 뜻한다.

 

상황에 따라 변수의 선언과 할당을 분리해서 선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것인데,

실제로 끌어올리는 것이 아니라 소스를 그런 식으로 해석하는 것이다.

 

 

 

 

var x = 100;
test();

function test() {
	document.write("x is " + x + ", y is " + y);
    	var y = 200;
}

x의 변수 값은 100이지만 y의 변숫값은 자료형 undefined로 나타난다.

 

undefined는 아직 값이 할당되지 않았을 때의 자료형이다.

 

분명히 위의 코드에서 y가 할당되기전에 먼저 출력했지만

오류가 나오지않고 y가 undefined로 나타났다.

 

이런 결과가 나타난 것은 변수 호이스팅 때문이다.

자바스크립트 해석기는 함수 소스를 훑어보면서 var 변수를 따로 기억해 준다.

 

즉 변수를 실행하기 전이지만 

'이런 변수가 있구나' 하고 기억해 두기 때문에 마치 선언한 것과 같은 효과가 있다.

 

var 변수는 호이스팅이 있기 때문에 변수를 선언하기 전에 사용해도 오류가 생기지 않고,

이로 인해 예상하지 못한 결과가 나올 수도 있다.

 

 

 

 

var 변수는 호이스팅 외에도, 재선언이 가능하다는 단점이 있다.

변수 재선언 : 한번 선언한 변수를 다시 선언할 수 있다는 것. 여러 프로그램을 합치거나 연결했을 때 혹시라도 같은 변수 이름을 

사용해서 선언한 부분이 있다면 이전의 변수를 덮어쓰기에 예상치 못한 결과가 생김

 

var 예약어를 빠뜨리면 의도치 않게 전역변수가 되기도 하고, 프로그램 길이가 길어지다 보면 

실수로 변수를 재선언하거나 값을 재할당하는 경우가 생기기도 했다.

그렇게에 let과 const가 추가되었다.

 

var과 let, const 큰 차이는 스코프 범위인데,  var은 함수 영역의 스코프를 가지지만 let과 const는 블록 영역의 스코프를 가진다.

 

 

 

 

 

let

 

function calcSum(n){
	let sum = 0;
    for(let i = 1; i< n+1; i++){
    sum += i;
   }
console.log(sum); // 블록 변수 사용
}
calcSum(10);

let 예약어로 선언한 변수는 변수를 선언한 블록({})에서만 유요하고 블록을 벗어나면 사용할 수 없다.

 

 

 

 

function calcSum(n){
    sum = 0; // 전역 변수 선언
    for(let i = 1; i < n+1; i++) {
        sum += i;
    }
}

calcSum(10);
console.log(sum); // 전역 변수 사용

전역 변수를 선언하고 싶다면 let 예약어를 쓰지 않고 변수 이름과 초기값만 할당하면 된다.

 

sum변수를 전역변수로 선언하고, console.log로 결괏값을 표시한 것

 

 

 

 

let 변수의 특징

 

let 예약어를 사용하여 선언한 변수는 값을 재할당 할 수는 있지만 변수를 재선언 할 수는 없다

그러니 예약어 var와 같이 실수로 같은 변수의 이름을 사용할 걱정은 없다.

 

function calcSum(n){
    let sum = 0;
    for(let i = 1; i<n+1; i++){
    	sum += i;
     }
     
     let sum; // 변수 재선언
     console.log(sum);
     }

변수 sum이 중복으로 선언되었다는 메시지가 나타난다.

이렇게 let으로 선언한 변수는 다시 선언할 수 없다.

 

 

 

 

var x = 100;
test();

function test(){
    document.write("x is" + x + "y is" + y);
    let y = 200;
}

var 예약어를 사용한 변수는 선언하기 전에 실행하더라도 오류가 생기지 않고 undefined값을 가질 수 있다.

바로 '호이스팅'때문이다. 하지만 let 예약어를 사용한 변수는 선언하기 전에 사용할 경우 오류 메시지를 나타낸다.

 

 

 

 

const 변수

 

const 역시 let와 마찬가지로 변수를 선언할 때 사용하는 예약어이다.

이름으로 예상할 수 있듯이 const로 선언한 변수는 상수이다.

상수는 프로그램 안에서 변하지 않는 값

 

즉 변하지 않는 값을 변수로 선언할 때 const를 사용한다.

 

const로 할당한 변수는 재선언하거나 재할당 할 수 없으며, let 예약어를 사용한 변수처럼 블록 레벨의 스코프를 가진다.

 

 

 

 

자바스크립트 문법은 벗어나지 않으면서 읽기 쉽고, 오류도 쉽게 해결할 수 있는 변수 사용 방법

 

1. 전역변수는 최소한으로 사용

전역 변수는 프로그램 어디서든 접근할 수 있으므로 편리하게 사용할 수 있다. 하지만 예상하지 못한 곳에서 값이 달라질 수도 있다. 그만큼 오류가 발생할 확률이 높아지므로 전역변수는 되도록 적게 사용하는 것이 굿~

 

2. var 변수는 함수의 시작 부분에서 선언

var을 사용한 변수는 어디에서 선언하든 상관없지만 내부에서 호이스팅이 생기므로 오류가 발생할 수 있다.

그래서 var변수는 함수 시작 부분에 선언하는 것이 변수를 확인하기도 쉽고, 오류도 줄이는 방법이다.

 

3. for문에서 카운터 변수를 사용할 때, 블록 변수를 사용하는 것이 좋다.

for문 안에서만 사용할 카운터 변수는 그 블록 안에서만 사용될 것이므로 가끔 var을 선언해서 사용하기도 한다. 

하지만 이렇다고 블록 변수가 되는 것은 아니다. var 변수는 함수 레벨의 스코프라는 것을 기억해라! 

따라서 for문의 카운터 변수는 for문 밖에서 선언하거나 아예 let을 사용해서 블록 변수로 선언하는 것이 좋다

 

var 호이스팅이 일어나고, 실수로 재선언을 할 수도 있기 때문에 예상하지 못한 오류를 만들 수 있다. 호이스팅이 없고 재선언할 수 없는 let을 사용하는 것이 안전하다.

 

 

 

 

function addNumber(a,b){
    var sum = a+b;
    console.log(sum);
}

재사용이 가능한 두 수를 더하는 함수

 

addNumber()를 선언하기 위해서는 '값 2개가 필요하다'라고 미리 지정해 두어야 한다.

이렇게 함수를 실행하기 위해 필요하다고 지정하는 값을 매개변수(parameter)라고 한다.

 

매개변수를 지정하려면 함수를 선언할 때 함수 이름 옆의 괄호 안에 변수 이름을 넣어주면 된다.

매개변수는 함수를 실행하는데 필요한 '입력'이라고 생각한다. 

 

매개변수가 있는 함수를 실행할 때는 함수 이름 옆의 괄호 안에 매개변수에 할당할 값을 넣어줍니다.

여기에서 만든 addNumber() 함수는 매개변수가 2개이므로, addNumber() 함수를 실행할 때 괄호 안에 두 값을 넣어줍니다.

 

예를 들어 10과 20을 더하겠다면 addNumber(10,20); 라고 작성하면 된다.

 

이렇게 함수를 실행할 때 매개변수로 넘겨주는 값을 '인수(Argument)'라고 한다.

 

addNumber(2,3);

addNumber(10,20);

2,3 과 10,20이 인수이다. 

 

 

 

 

function addNumber(a,b) {
    var sum = a+b;
    console.log(sum);
}

두 숫자를 더하는 함수 addNumber()를 선언해 보겠다. 먼저 덧셈에 사용할 값 2개를 매개변수 a, b로 지정한다.

두 수 a와 b를 더해서 변수 sum에 저장한 후 결괏값을 콘솔창에 표시

 

 

 

 

addNumber(2,3); // 5 출력

addNumber(10,20); // 30 출력

addNumber() 함수를 한 번 선언해 놓기만 하면 인수를 입력받아 바로 실행할 수 있다.

 

 

 

parseInt() 함수는 프롬프트 창에 입력한 값을 정수로 바꾸는 함수이다. parseInt() 대신 Number() 함수를 사용해도 된다. 

 

 

 

 

var num1 = parseInt(prompt("첫 번째 숫자는?"));
var num2 = parseInt(prompt("두 번째 숫자는?"));

addNumber(num1,num2); // 값 2개와 함께 함수 실행

function addNumber(a,b){ // 매개변수 a,b가 있는 함수 선언
    var sum = a+b;
    alert("두 수를 더한 값은" + sum + "입니다.");
}

1. 프롬프트 창에서 숫자 입력받기

2. num1, num2와 함께 addNumber() 함수 호출

3. 넘겨받은 num1은 a로 num2는 b로 전달

4. a와 b를 연산해서 콘솔창에 표시

 

 

 

함수의 매개변수에 기본값을 지정할 수 있다.

 

 

 

 

function multiple(a,b=5, c=10){
    return a*b + c;
}

multiple(5,10,20) // a = 5, b = 10, c = 20
multiple(10,20) // a = 10, b = 20, c = 10(기본 값)
multiple(30) // a = 30, b = 5(기본 값), c = 10(기본 값)

매개변수에 값이 전달되지 않으면 기본 값으로 대체된다.

 

 

 

 

return 값 or 변수;

 

함수 안에서 계산 결괏값을 표시할 때도 있지만, 결괏값을 다른 계산에 적용하더나 콘솔창이 아닌 다른 곳에 표시해야 할 경우도 있다.

함수를 실행한 후 그 결과값을 함수 밖으로 넘기는 것을 '함숫값을 반환한다'라고 한다.

 

반환 위치는 함수를 호출한 위치가 된다.

 

 

 

 

function addNumber(a,b){
    var sum = a + b;
    return sum;
}

function addNumber(a,b){
    return a + b;
}

간단한 식일 경우에는 위처럼 return문에서 식을 반환하도록 소스를 작성할 수 있다.

 

 

 

 

함수표현식

 

 

-익명함수

 

말 그대로 이름이 없는 함수이며, 익명 함수를 선언할 때는 이름을 붙이지 않는다.

익명함수는 함수 자체가 '식'이기 때문에 익명함수를 변수에 할당할 수 있다.

또한 다른 함수의 매개변수로 사용할 수도 있다.

 

 

 

 

var add = function(a,b){
	return a + b;
} // 함수 선언 후 변수 add에 할당

두 숫자를 더하는 익명 함수를 선언하고 이를 변수 add에 저장하는 소스

 

기존의 함수는  함수 이름을 사용해서 실행했는데, 익명함수는 이름이 없다. 어떻게 사용할까?

앞에서 선언한 익명 함수를 변수 add에 할당했기에 이 변수를 add함수 이름처럼 사용해서 익명함수를 실행한다.

 

 

 

 

var sum = add(10,20); //익명 함수 실행 후 결과값을 변수 sum에 저장

sum // 변수 sum 값 확인 >> 30 출력

다음 소스는 변수 add를 사용해 익명 함수를 실행하고 그 결과 값을 sum에 저장 

 

 

 

 

-즉시 실행 함수

 

즉시 실행 함수는 함수를 정의함과 동시에 실행하는 함수

다른 개발자들이 작성한 자바스크립트 소스를 보면 즉시 실행 함수를 많이 사용했음을 알 수 있다. 

 

즉시 실행함수의 표현 방법을 알아보자

 

함수 선언 소스를 전체 괄호로 묶는다고 생각하면 쉽다

소스를 닫는 괄호 앞이나 뒤에 인수가 들어갈 괄호를 넣는다.

 

즉시 실행 함수는 '식'이기에 소스 끝에 세미콜론을 붙인다.

 

(
	function(){
    
    }
)();

또는

(
	function(){
    
    }
());

여러 줄로 된 형태를 간단히 줄여서 다음과 같이 사용하기도 한다.

 

 

 

 

(function() {

})();

또는

(function() {

}());

즉시 실행함수는 변수에 할당할 수도 있고, 함수에서 반환하는 값을 변수에 할당할 수도 있다.

 

 

 

 

var result = (function() {
	return 10 + 20;
}());
console.log(result);

함수에서 반환한 값을 result 변수에 할당한 후 콘솔창에 표시하는 소스

 

매개변수가 필요한 함수라면 function 예약어 다음 괄호 안에 매개변수를 넣고 함수를 정의한다.

그리고 함수 끝에 있는 괄호에는 실제 실행할 때 사용할 인수를 넣고 실행한다. 

 

 

 

 

var result = (function(a,b){
                return a + b;
}(10,20));

a와 b 매개변수를 사용해 함수를 정의한 후 마지막에 인수로 10과 20을 넣어서 함수를 실행한다.

반환된 결과 값을 result 변수에 저장한 후 콘솔창에 표시한다.

 

 

 

 

- 화살표 함수

 

es6 버전부터는 => 표기법을 사용해 더 간단하게 작성할 수 있다.

이 방법을 화살표 함수라고 하는데, 익명 함수에서만 사용할 수 있다.

 

매개변수가 없을 때 =>로 함수 선언하기

 

const hi = function() {
	return "안녕하세요"
}

const hi = () => {return "안녕하세요?"};

위의 익명함수를 아래처럼 간단하게 사용할 수 있다.

 

 

 

 

const hi = () => "안녕하세요?";

그리고 중괄호 안에 함수 나용이 한 줄 뿐이라면 중괄호를 생략해서 위와 같이 작성할 수도 있다.

return은 생략된 것으로 간주한다.

 

 

 

 

매개변수가 1개일 때 =>로 함수 선언하기

 

let hi = function(user){
    document.write(user + "님, 안녕하세요?");
}

let hi = user => document.write(user + "님, 안녕하세요?");

매개변수가 하나일 경우 매개변수의 괄호를 생략해서 위의 코드를 아래처럼 표현할 수 있다.

 

 

 

 

매개 변수가 2개 일 때 =>로 함수 선언하기

 

let sum = function(a,b){
    return a + b;
}

let sum = (a,b) => {return a + b}

let sum = (a,b) => a + b;

매개변수가 2개인 함수를 화살표 함수로 바꾸려면

(매개변수) => {}처럼 사용하고 괄호 안에 매개변수를 쉼표로 구분해서 넣으면 된다

 

 

 

 

이벤트

 

이벤트란 웹 브라우저가 사용자가 행하는 어떤 동작을 말한다.

 

웹 문서에서 키보드의 키를 누르는 것도 이벤트이고, 브라우저가 웹 페이지를 불러오는 것도 이벤트이다.

 

하지만 브라우저 안에서 이루어지는 모든 동작이 이벤트가 되지는 않는다. 이벤트는 웹 페이지를 읽어 오거니 링크를 누르는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다.

 

따라서 사용자가 웹 문서 영역을 벗어나 누르는 행위는 이벤트가 아니다.

 

 

 

 

- 마우스 이벤트

마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트

 

click : 사용자가 HTML 요소를 마우스로 눌렀을 때 이벤트가 발생

dbclick : 사용자가 HTML 요소를 마우스로 두 번 눌렀을 때 이벤트가 발생

mousedown : 사용자가 요소 위에서 마우스 버튼을 누르는 동안 이벤트가 발생

mousemove : 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생

mouseover : 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생합니다

mouseout : 마우스 포인터가 요소를 벗어날 때 이벤트가 발생합니다.

mouseup : 사용자가 누르고 있던 마우스 버튼에서 손을 뗄 때 이벤트가 발생 

 

 

 

 

- 키보드 이벤트

키보드에서 특정 키를 조작할 때 발생하는 이벤트

 

keypress : 사용자가 키를 눌렀을 때 이벤트가 발생

keydown : 사용자가 키를 누르는 동안 이벤트가 발생

keyup : 사용자가 키에서 손을 뗄 때 이벤트가 발생

 

 

 

 

- 문서 로딩 이벤트

웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트

 

abort : 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생

error : 문서가 정확히 로딩되지 않았을 때 이벤트가 발생

load : 문서 로딩이 끝나면 이벤트가 발생

resize : 문서 화면 크기가 바뀌었을 때 이벤트가 발생

scroll : 문서 화면이 스크롤 되었을 때 이벤트가 발생

unload : 문서를 벗어날 때 이벤트가 발생 

 

 

 

 

- 폼 이벤트

폼이란 로그인이나 검색, 게시판, 설문조사처럼 사용자가 자료를 입력하는 모든 요소를 가리킴

 

blur : 폼 요소에 포커스를 잃었을 때 이벤트가 발생

change : 목록이나 체크 상태 등이 변경되었을 때 이벤트 발생 <input> <se-lect> <textarea> 태그에서 사용

focus : 폼 요소에 포커스가 놓였을 때 이벤트가 발생 <label> <select> <textarea> <button> 태그에서 사용

 

reset : 폼이 다시 시작됐을 때 이벤트 발생

submit : submit 버튼을 눌렀을 때 이벤트 발생

 

 

 

 

- 이벤트 처리기

 

대부분 웹사이트에서는 이벤트가 발생하면 연결 동작이 뒤따른다. 

 

이를 이해서 웹문서에서 이벤트가 발생했을 때 어떤 함수를 실행해야 할지 웹 브라우저에 알려주어야 한다.

 

이벤트와 이벤트 처리 함수를 연결해 주는 것을 ‘이벤트 처리기’ 또는 ‘이벤트 핸들러’라고 한다.

 

이벤트 처리기는 이벤트 이름 앞에 ‘on’을 붙여 사용

 

click 이벤트가발생했을 때이벤트 처리기는 onclick 다음에 있는 실행 명령이나 함수를 연결