1. Extensions 추가
1) Auto Rename Tag
2) indent-rainbow
3) Material Icon Theme
2. 기존에 배웠던 내용 복습한 관계로 함수 부분 제외하고는 블로그 메모 생략
3. 사용자 정의 함수(function)
: 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미
함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행 가능
4. 함수의 구분
1) 함수 선언식
함수이름(); // 함수 선언 전에 호출해도 실행가능
function 함수이름() {
실행문;
}
함수이름(); // 함수 선언 후에 호출해도 실행가능
2) 함수 표현식
상수(); // 함수 선언 전에 호출 불가능
const 상수 = function() { // 익명함수
실행문;
}
상수(); // 함수 선언후에 사용 가능
5. 함수 선언식과 함수 표현식의 차이는 호이스팅이 되느냐 안되느냐를 의미한다.
6. 호이스팅
: 자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 읽고 선언된 함수를 메모리에 저장한다.
이 과정이 끝나면 코드가 위에서부터 차례대로 실행되며
'함수 선언식'으로 만들어진 함수의 경우 메모리에 저장되어 있기 때문에 문제없이 실행되지만
'함수 표현식'으로 만든 함수는 아직 값이 할당되기 전이기 때문에 에러가 발생한다.
"함수 선언식으로 선언된 함수는 호이스팅이 된다고 표현한다."
7. 12_사용자정의함수(1).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정의 함수 - 1</title>
</head>
<body>
<h2>사용자 정의 함수 - 1</h2>
<script>
'use strict';
console.log('1. 함수 선언식 방식 ----------');
func1(); // 함수 선언 전에 호출해도 실행 가능
function func1() {
console.log('func1() 함수 호출!');
}
func1(); // 함수 선언 후에 호출해도 실행 가능
// 함수 선언 전과 후 모두 호출해도 실행되는 이유?
// 자바스크립트의 특징이다.
// Why?
// 자바스크립트는 인터프리터로 되어 있는데 이 인터프리터는 한 번만 읽지 않기 때문이다!
// 인터프리터는 총 두 번 도는데,
// 제일 처음 스크립트 안에 함수 선언식이 있는지 먼저 쭉 읽고
// 만약 함수가 있다면 걔네들은 먼저 읽는다.
// 그리고 두 번째로 돌 때에 명령어 수행한다.
// [결론] 함수 선언 전에 호출해도 실행가능한 것은
// 함수를 먼저 메모리에 올려 놓고 그 다음에 실행문을 읽어가기 때문이다!
// 그리고 그 방식을 함수 선언식이라고 부른다.
console.log('2. 함수 표현식 방식 ----------')
//Hello1(); // 함수 선언 전에 호출 불가능
// 에러 : Uncaught ReferenceError: Cannot access 'Hello1' before initialization
// 익명함수의 주소를 가지고 있는 상수
// [주의] Hello1 함수 이름 아님 상수임...!
const Hello1 = function() {
console.log('Hello1 함수 호출!');
}
Hello1(); // 함수 선언 후에 사용 가능
// ECMA6에서 권장하는 방법?
// 2. 함수 표현식 방식이다.
// Why?
// 2. 함수 표현식 방식은 선언 전에는 사용할 수 없다는 점이 불편해 보이고
// 1. 함수 선언식 방식이 선언 전에도 에러 없이 쓸 수 있다는 점이 편하게 보일 수는 있다.
// 하지만 ECMA6에서 2. 함수 표현식 방식을 권장하는 이유는 'use strict';를 쓰는 이유와 동일하다.
// 문법적으로 말도 안되는 상황이나 헷갈릴 수 있는 상황을 방지하기 위해서 2. 함수 표현식 방식을 권장한다.
</script>
</body>
</html>
8. 매개변수가 있는 함수
function 함수이름(매개변수1, 매개변수2, ... ) {
실행문;
}
함수이름(값1, 값2, ... );
const 상수 = function(매개변수1, 매개변수2, ... ) {
실행문;
}
상수(값1, 값2, ... );
9. 디폴트 매개변수
function 함수이름(매개변수1=값1, 매개변수=값2, ... ) {
실행문;
}
함수이름(); // 값1, 값2, ...가 기본값으로 설정
10. 나머지 매개변수
: 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한 번에 지정 가능
funcion 함수이름(매개변수1, 매개변수2, ...매개변수3) {
실행문
}
함수이름(값1, 값2, 값3, 값4, 값5, 값6); // 매개변수1=값1, 매개변수2=값2, 매개변수3=[값3, 값4, 값5, 값6];
11. 사용자 정의 함수 예제(매개변수가 있는 함수, 디폴트 매개변수, 나머지 매개변수)
** js > function.js
// 매개변수가 있는 함수
function func2(x) {
for(let i=1; i<=x; i++){
console.log('func2() 함수 호출!');
}
}
// 디폴트 매개변수
const cal = function(num1=1, num2=1) {
console.log(`${num1} + ${num2} = ${num1 + num2}`);
console.log(`${num1} - ${num2} = ${num1 - num2}`);
console.log(`${num1} * ${num2} = ${num1 * num2}`);
console.log(`${num1} / ${num2} = ${num1 / num2}`);
}
// 나머지 매개변수
function func3(x1, x2, ...x3) {
console.log(`x1의 값 : ${x1}`);
console.log(`x2의 값 : ${x2}`);
console.log(`x3의 값 : ${x3}`);
}
const Jumsu = function(...jum) {
for(let i of jum){
console.log(i);
}
console.log(`jum의 값 : ${jum}`);
}
** 13_사용자정의함수(2).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정의 함수 - 2</title>
<script src='./js/function.js'></script>
</head>
<body>
<h2>사용자 정의 함수 - 2</h2>
<script>
'use strict';
func2(3);
cal(10, 3);
cal();
func3(90, 50, 80, 70, 60, 100, 30);
Jumsu(90, 50, 80, 70);
</script>
</body>
</html>
12. 리턴값이 있는 함수
function 함수이름(매개변수1, 매개변수2, ... ) {
실행문;
return 값;
}
let 변수 = 함수이름(값1, 값2, ... ); // return 값이 변수에 저장
13. 사용자 정의 함수 예제(리턴값이 있는 함수)
** js > function.js
// 리턴값이 있는 함수
function func4(start, end) {
let sum = 0;
for(let i=start; i<=end; i++){
sum += i;
}
return sum;
}
** 14_사용자정의함수(3).html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정의 함수 - 3</title>
<script src='./js/function.js'></script>
</head>
<body>
<h2>사용자 정의 함수 - 3</h2>
<script>
'use strict';
let result = func4(1, 10);
console.log(`1 ~ 10의 총합 : ${result}`);
</script>
</body>
</html>
14. 함수 표현식에서 이름이 있는 함수
const 상수 = function 함수이름(매개변수1, 매개변수2, ... ) {
실행문;
...
함수이름();
return 값;
}
함수이름(값1, 값2, ... ); // (X) : 틀린 방법
상수(값1, 값2, ... ); // (O) : 맞는 방법
15. 함수를 만들고 직접 호출하는 함수(만들자마자 바로 호출되는 함수)
: 익명 함수 만들고 그 익명 함수를 괄호로 감싼다. 그리고 그 옆에 괄호를 한 번 더 써서 실행하는 것처럼 쓴다.
(function() {
실행문;
...
})();
16. 화살표 함수(무조건 익명함수이어야 함!)
: ECMA6에 추가된 문법,
function 키워드를 사용하여 함수를 만들 것보다 간단하게 표현,
화살표 함수는 항상 익명이다.
// 일반 함수
const Hello1 = function() { console.log('안녕하세요. JavaScript'); }
Hello1();
// 화살표 함수
const Hello1 = () => console.log('안녕하세요. JavaScript');
Hello1();
// 매개변수가 있는 경우
const Hello2 = x => console.log(x);
Hello2(10);
const Hello3 = (x, y) => x + y;
const result = Hello3(10, 3);
const Hello4 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
const result = Hello4(1, 10);
[중요] {}를 사용하면 return 키워드를 반드시 작성해야 합니다.
17. 화살표 함수 예제
** js > function.js
// 화살표 함수
const Hello2 = () => console.log('안녕하세요. JavaScript');
const Hello3 = (x, y) => x + y;
const Hello4 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
const Hello5 = (x, y) => {x + y;} // {}를 사용하면 return 키워드를 반드시 작성해야 합니다.
** 15_ 화살표함수.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표 함수</title>
<script src='./js/function.js'></script>
</head>
<body>
<h2>화살표 함수</h2>
<script>
'use strict';
Hello2();
let result = Hello3(10, 3);
console.log(`result의 값 : ${result}`);
result = Hello4(1, 10);
console.log(`result의 값 : ${result}`);
result = Hello5(10, 5);
console.log(`result의 값 : ${result}`); // undefind
</script>
</body>
</html>'웹_프론트_백엔드 > 프론트엔드' 카테고리의 다른 글
| 2020.09.20 (0) | 2020.09.22 |
|---|---|
| 2020.09.19 (0) | 2020.09.22 |
| 2020.08.30 (0) | 2020.08.30 |
| 2020.08.29 (0) | 2020.08.29 |
| 과제-자료를 받아 출력하는 프로그램 (0) | 2020.08.14 |