자바스크립트 함수, 스코프, 이벤트 - Do It 자바스크립트 기본편

함수

: 처리해야할 과제에 따라 기능별로 여러 명령을 묶어 놓은 것(특정 기능을 수행하는 소스 코드를 따로 묶어놓은 덩어리)

→ 재사용성, 가독성, 선언(정의)과 실행의 분리

ex) 자바스크립트의 내장함수 alert() : 함수 내부와 작동과정을 몰라도 함수의 기능을 사용할 수 있음.

 

함수의 선언과 실행 순서

웹 브라우저에서 자바스크립트 소스를 해석할 때, 함수가 선언된 부분을 가장 먼저 해석한다. 함수 선언 위치는 프로그램 흐름에 영향을 주지 않기 때문에 원하는 위치에 선언하면 된다. (주로 스크립트 소스의 앞부분이나 뒷부분에 함수 선언 소스를 모아 놓음.)

 

[ES6] 함수의 매개변수 기본 값 지정하기

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

 

자바스크립트의 스코프(scope)

: 변수가 적용되는 범위. (=변수가 유효한 범위)

지역 변수(Local Variable) : 한 함수 내에서만 사용할 수 있는 변수

전역 변수(Global Variable) : 스크립트 소스 전체에서 사용할 수 있는 변수

[ES6] 블록 변수(Block Variable)

: 변수를 선언한 블록 {} 안에서만 유효하고

블록을 벗어나면 사용할 수 없는 변수

(let 예약어를 통해 선언된 변수는 블록 변수가 됨)

 

함수 표현 식

익명 함수 : 이름 없는 함수. '식(Expression)'으로 이루어진 함수로, 변수에 할당할 수 있고 다른 함수의 매개변수로 사용할 수 있다.

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

익명 함수를 할당한 변수(add)를 함수 이름처럼 사용해 익명 함수를 호출할 수 있다.

 

즉시 실행 함수 : 함수를 정의함과 동시에 실행하는 함수. '식(Expression)'으로 이루어진 함수.

(function() {…})(); (function() {…}());

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

 

[ES6] 함수의 화살표(⇒) 표기법

let hi = ()=> "안녕하세요?"; hi(); let greet = name => `${name}님, 안녕하세요?`; greet("선경"); let add = (a, b) => a + b; add(10, 20);

 

이벤트

이벤트 : 웹 브라우저나 사용자가 행하는 어떤 동작.

ex) 웹 문서에서 버튼을 누르거나 이미지 위에 마우스 포인터를 올려놓는 것

(※ 사용자가 웹 문서 영역을 벗어나 행하는 동작은 이벤트가 아님)

 

이벤트의 종류 : 마우스 이벤트, 키보드 이벤트, 문서 로딩 이벤트, 폼* 이벤트

developer.mozila.org/en-US/docs/Web/Events

불러오는 중입니다...

 

이벤트 처리기(이벤트 핸들러) : 이벤트와 이벤트 처리 함수를 연결해주는 것. 이벤트 이름 앞에 'on'을 붙여 사용.

 

*폼(Form) : 사용자가 데이터를 입력할 수 있는 모든 요소

 

---

※ 출처 : Do It 자바스크립트 기본편, 5강 함수와 이벤트