전구 모양(💡) 이모티콘은 공부하면서 깨달은 부분을 적어두었습니다.
05-1 여러 동작을 묶은 덩어리, 함수
- 함수(Function) : 기능별로 여러 명령을 묶어 놓은 것
- 함수의 장점
* 각 명령의 시작과 끝을 명확하게 구분 가능
* 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수 실행 가능
// ┌ 함수명
function addNumber(a, b) {
var sum = a + b;
}
- 내장 함수 : 자바스크립트에 미리 만들어져 있는 함수
개발자가 필요할 때 가져다 사용할 수 있음
💡 개발자가 함수 내부까지 깊게 알지 못해도 쉽게 가져다 쓸 수 있음
- 함수 선언 : 함수가 어떤 명령을 처리해야 할지 미리 알려주는 것
- 함수 실행 : 선언한 함수를 가져와 사용하는 것
// 함수 실행 예제
function addNum() {
var sum = 10+20;
console.log(sum);
}
// 실행 결과
30
- 웹 브라우저에서 자바스크립트 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석
=> 개발자가 어느 곳이든 함수를 선언해 놓기만 하면, 선언한 위치와 상관없이 함수 실행 가능!
=> 함수 선언 위치는 프로그램 흐름에 영향을 주지 않음!
[ 실습 - 버튼으로 함수를 실행하는 프로그램 만들기 ]
- 1단계 HTML 문서 수정하기
* 이후부터는 자바스크립트 파일을 따로 만들어 추가하는 방식을 사용!!
- 2단계 js 파일 생성하기
* add.js 파일 추가 (addNumber() 내용 구현)
- 3단계 js 파일 연결하기
* html 파일에 add.js 연결
// ┌ 1. 버튼 태그에 onClick() 추가하기
<button onclick="addNumber()">덧셈 계산하기</button>
// 2. add.js 파일에 addNumber() 구현
function addNumber() {
var sum = 10 + 20;
alert(sum);
}
// 3. html 파일에 add.js 연결
<script src="js/add.js"></script>
05-2 let과 constant로 변수 선언하기
- ES6 버전에서는 변수를 선언하기 위해 let과 const라는 새로운 예약어가 생김
- 스코프(Scope) : 변수를 선언하고 사용할 때 변수가 적용되는 범위
- 지역 변수, 로컬 변수(Local Variable) : 한 함수 안에서만 사용할 수 있는 변수
- 전역 변수, 글로벌 변수(Global Variable) : 스크립트 소스 전체에서 사용할 수있는 변수
- 함수 선언 시 지역 변수를 선언하려면 예약어 var과 함께 변수명을 입력
- 만약 변수명 앞에 var가 없으면 함수 안에서 선언했어도 전역 변수로 취급!!
- 지역 변수 예제
var myVar = 100; // 전역 변수 선언
test();
document.write("myVar is " + myVar);
function test() {
var myVar = 50; // 지역 변수 선언
}- 지역 변수의 값은 함수 밖을 벗어나면 무효!
* 지역 변수는 전역 변수에 영향을 주지 않음
하지만 전역 변수와 지역 변수 이름이 같으면 헷갈릴 수 있으므로
변수명을 지을 때는 겹치지 않는 것이 좋음
- 전역 변수는 <script></script> 사이에서 자유롭게 사용할 수 있는 변수
=> 즉, 변수를 한 번 선언하고 나면 그 값을 계속해서 유지함
- 전역 변수 예제
var myVar = 100; // 전역 변수 선언
test();
document.write("<br>");
document.write("myVar is " + myVar);
document.write("<br>");
document.write("myVar1 is " + myVar1);
function test() {
var myVar = 50; // 지역 변수 선언
myVar1 = 200; // 전역 변수 선언
}
- 호이스팅(hoisting) : 끌어올리다
상황에 따라 변수의 선언과 할당을 분리해서
선언 부분을 스코프의 가장 위쪽으로 끌어올리는 것
- 호이스팅 예제
var x = 100;
test();
function test() {
document.write("x is " + x + ", y is " + y);
var y = 200;
}
// 실행 결과
x is 100, y is undefined
- 자바스크립트 해석기(interperter)는 함수 소스를 훑어보면서 var 변수를 따로 기억해 둠
=> 호이스팅의 기능
- var 변수는 호이스팅이 있기 때문에 변수를 선언하기 전에 사용해도 오류가 발생하지 않으나
그로 인해 예상치 못한 결과가 나올 수 있음
또, var를 사용한 변수는 재선언이 가능하다는 단점이 있음
- 그래서 추가된 기능이 let과 const
- let : 블록({ }) 안에서만 쓸 수 있는 변수
function calcSum(n) {
let sum = 0; // 블록 변수 - calcSum() 안에서만 유효
for(let i = 1; i < n + 1; i++) { // i도 for문 안에서만 유효
sum += i;
}
console.log(sum); // 블록 변수 사용
}
calcSum(10);
- 만약 전역 변수로 선언하고 싶다면 변수명과 초깃값만 할당하면 됨
function calcSum(n) {
sum = 0; // 전역 변수 선언
for(let i = 1; i < n + 1; i++) { // i도 for문 안에서만 유효
sum += i;
}
}
calcSum(10);
console.log(sum); // 전역 변수 사용
- let 예약어를 사용하여 선언한 변수는
* 재할당은 가능, 재선언은 불가능
* 호이스팅이 없음
즉, 선언하기 전에 실행하면 에러 발생
- const로 선언한 변수는 상수(constant)
* 상수 : 변하지 않는 값
* 재할당, 재선언 불가능
* 블록({ }) 레벨의 스코프를 가짐
- 자바스크립트 변수 사용 방법
1) 전역 변수는 최소한으로!
2) var 변수는 함수의 시작 부분에 선언하자
3) for문에서 카운터 변수를 사용할 때는 블록 변수를 사용하자
4) ES6를 사용한다면 예악어 var보다 let을 사용하자
=> var 변수는 호이스팅이 일어나고 실수로 재선언할 수 있으므로
이를 사용할 수 없는 let을 사용하는 것이 더 안전!
05-3 여러 번 사용할 수 있는 함수 만들기
- 함수의 재사용성 (함수의 가장 큰 장점)
- 매개변수(Parameter) : 함수를 실행하기 위해 필요하다고 지정하는 값
- 매개변수를 지정하려면 함수를 선언할 때 함수명 옆의 괄호 안에 이름을 넣어주면 됨
// ┌ 매개 변수 a와 b
function addNumber(a, b) {
var sum = a + b;
alert(sum);
}
- 매개변수가 2개 이상이면 쉼표(,)로 구분
- 함수의 매개변수 기본 값 지정하기
function multiple(a, b = 5, c = 10) { // b와 c에 기본값 지정
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문 : 함수 실행 후 결괏값을 함수 밖으로 넘기는 것
- return문에 식 사용 가능
05-4 함수 표현식
- 익명 함수 : 이름이 없는 함수
함수 자체가 식(Experssion)이기 때문에 변수에 할당 가능
var add = function(a, b) { // 함수 선언 후 변수 add에 할당
return a + b;
}
- 즉시 실행 함수 : 함수를 정의함과 동시에 실행하는 함수
* 함수 선언 소스 전체를 괄호로 묶는다고 생각하기
* 소스를 닫는 괄호 앞이나 뒤에 인수가 들어갈 괄호를 넣기
* 식이기 때문에 소스 끝에 세미콜론(;) 붙이기
* 간단히 줄이기도 가능 (위의 예제를)
* 변수에 할당 가능하고, 함수에서 반환하는 값을 변수에 할당 가능
// 매개변수가 없을 때
var result = (function() {
return 10 + 20;
}());
// 실행 결과
console.log(result);
30
// 매개변수가 있을 때
var result = (function(a, b) { // 매개변수 추가
return a + b;
}(10, 20)); // 인수 추가
// 실행 결과
console.log(result);
30
- 화살표 함수 : ES6 버전부터 => 표기법(화살표 표기법)을 사용해 함수 선언을 더 간단히 작성 가능
// 매개변수가 없을 때
const hi = function() {
return "안녕?";
}
// 화살표 표기법
const hi = () => { return "안녕??" };
// 함수 내용이 한 줄뿐이라면 중괄호 생략 가능
const hi = () => "안녕??";
// 매개변수가 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;
05-5 이벤트 다루기
- 이벤트(Event) : 웹 브라우저나 사용자가 행하는 어떤 동작
예) 웹 문서에서 키보드를 누르는 것
브라우저가 웹 페이지를 불러오는 것
* 단, 웹 문서 영역 안에서 이루어지는 동작만의 의미
- 마우스 이벤트 : 마우스 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트
- 키보드 이벤트 : 키보드에서 특정 키를 조작할 때 발생하는 이벤트
- 문서 로딩 이벤트 : 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트
예) 서버에서 웹 문서를 가져오기
문서를 위아래로 스크롤
- 폼 이벤트(Form) : 사용자가 자료(정보)를 입력하는 모든 요소
예) 로그인, 검색, 게시판, 설문 조사 등
* 더 많은 정보는 링크를 통해 참고
[ 한글 ] [ 영어 ]
- 이벤트 핸들러(Event Handler), 이벤트 처리기 : 이벤트와 이벤트 처리 함수를 연결해주는 것
* 이벤트 이름 앞에 on을 붙여서 사용
[ 실습 - button 태그에 이벤트 처리기로 함수 연결하기 ]
[ 실습 - [상세 설명] 버튼 만들기 ]
- 책 보며 실습해보기
[ 실습 - 여러 이벤트 처리기 연결하기 ]
- 1단계 : click 이벤트 처리하기
- 2단계 : mouseover, mouseout 이벤트 처리하기
- 함수와 이벤트를 더 연습하고 싶다면 이지스 퍼블리싱 홈페이지 자료실에서
실전 프로젝트 파일을 다운받은 후 '[실전]1_숫자 맞히기.pdf' 파일을 참고해 만들어보자!
'Programming > javascript' 카테고리의 다른 글
| [6일차] Do it! 자바스크립트 입문 / 07 배열을 쉽게 다루자! Array 객체 (0) | 2021.12.11 |
|---|---|
| [5일차] Do it! 자바스크립트 입문 / 06 여러 자료를 한꺼번에 담는 객체 (0) | 2021.12.10 |
| [3일차] Do it! 자바스크립트 입문 / 04 흐름을 제어한다! 제어문 (0) | 2021.12.05 |
| [서평단] Do it! 자바스크립트 입문 - '입문'이란 단어의 중요성 (0) | 2021.11.28 |
| [2일차] Do it! 자바스크립트 입문 / 03 변수와 자료형 그리고 연산자 (0) | 2021.11.26 |
