[자바스크립트] 04. 함수와 이벤트

자바스크립트의 함수는 아무곳이나 선언해줘도 된다. 자바스크립트는 소스를 해석할 때 함수 선언 부분을 우선시해서 해석하기 때문이다. 파이썬처럼 위에서 아래로 내려가는 방식으로 읽지않기에 가능한 방법이다.

 

자바스크립트의 함수는 function( )이다.

 

기존에 배웠던 var가 달리 let과 constant를 새로 배울 수 있었다. 로컬변수와 전역변수 개념은 다른언어에서도 통상적으로 사용되기에 이해가 어렵지않았다. 

 

var의 호이스팅

var 사용 시 조심해야하는 개념이다. 호이스팅은 끌어올리다라는 뜻을 가졌는데 이는 코드 실행시에 자바스크립트가 var선언을 가장 먼저 받아들이기 때문이다. 이로인해 var 선언만 먼저 끌어올려진 상태로 값이 할당되지 않은 채로 var이 읽혀진다면 이는 오류로 이어질 수 있다. var은 선언만 되었을뿐 값이 할당되지않았기 때문이다. 똑같은 이름으로 재선언이 가능하기에 여러명이 팀을 이뤄서 진행하는 프로젝트에서 오류가 일어날 수 있다. 이로 인해 현업에서는 거의 쓰이지않는다고 한다. 

 

var 호이스팅 관련 포스팅 참고 [JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

너무 좋은글이라 가져와보았다.

 

let에 대해서..

let은 재선언이 안되지만 재할당이 가능하며 호이스팅 또한 없다. 블록레벨의 지역함수내에서만 사용가능 

const에 대해서..

const는 불변하지않는다는 뜻을 가진 constant에서 알 수 있듯이 상수를 뜻한다. 이 또한 블록 레벨을 갖는다.

 

익명함수

함수를 변수에 할당하여 함수본연의 이름으로 쓰이는것이 아닌 변수( ) 형태로 쓸 수가 있다.

// 익명함수 예시

var add = function(a, b) {
			return a+b;
}
// 사용 시에는
add(1, 4);
>> 5

즉시실행 함수

따로 함수를 실행시킬 필요없이 함수작성과 실행이 한꺼번에 이루어진다.

// 즉시실행 함수 예시

(
	function( ) {
    // 실행문
    }
)();

화살표 함수

ES6버전에서부터 쓰이며 익명함수에서만 사용이 가능하다. 함수선언을 더 쉽게 작성이 가능하다.

// 화살표 함수 예시

// 매개변수가 없는 화살표 함수
const hi = () => "안녕하세요?";
        
alert(hi());

// 매개변수가 하나인 화살표 함수
let hi = user => { document.write (user + "님, 안녕하세요?"); }
// user를 괄호로 감싸주어도 상관없다.
 hi("경희");

// 매개변수가 두개인 화살표 함수
let sum = (a, b) => a + b;
// 무조건 괄호로 매개변수를 감싸주어야한다.
document.write("두 수의 합 : " + sum(10, 20));

 

자바스크립트의 이벤드

HTML관련 내용이 많이 나오기에 HTML 추가 공부를 해서 추가로 기입하겠다.