01. 선언적 함수
함수는 자바스크립트의 기본 구성 요소 중 하나입니다.
선언적 함수는 그 중에서 가장 기본적인 형식으로 되어있습니다.
기본형식은 "function 함수명(){실행문}" 입니다.
함수를 실행할 때는 반드시 함수를 불러와야 합니다.
{
function func(){
document.write("선언적 합수입니다.")
};
func();
}
결과 확인하기
02. 익명 함수
함수의 종류 중 하나로 변수의 이름을 함수의 이름으로 쓴 것 입니다.
변수 안에 함수를 넣은 형식으로 되어있습니다.
기본 형식은 const 변수명 = function (){실행문}으로 되어있습니다.
{
const func = function (){
document.write("익명 함수 입니다.
");
};
func();
}
결과 확인하기
03. 매개변수 함수
함수를 호출할 때 전달하는 변수를 '매개변수' 라고 합니다.
기본 형식은 "function 함수명(매개변수1, 매개변수2){실행문;} 함수명(매개변수값1, 매개변수값2)"로 되어있습니다.
{
function func(str) {
document.write(str);
};
func("매개변수 함수 입니다.");
}
결과 확인하기
04. 리턴값 함수
함수의 종류 중 하나로 함수를 통해 처리된 결과를 반환시켜주는 명령입니다.
return을 통해 함수를 실행시킬수 있다는 것에 의미가 있습니다.
{
function func(){
const str = "리턴 함수입니다";
return str;
};
document.write(func());
}
결과 확인하기
05. 화살표 함수 : 선언적 함수
선언적 함수에 "function"을 뻬고 "=","=>"을 넣어 줄여쓰는 방법입니다.
{
// 기본 형식의 선언적 함수입니다.
function func(){
document.write("선언적 합수.");
};
func();
//------------------------------------------------------------
//위의 것을 화살표 함수를 써서 줄인 방법입니다.
func1 = () => {
document.write("화살표 함수 : 선언적 합수.");
};
func1();
}
결과 확인하기
06. 화살표 함수 : 익명 함수
익명 함수에 "function"을 뻬고 "=","=>"을 넣어 줄여쓰는 방법입니다.
{
// 기본 형식의 익명 함수입니다.
const func = function(){
document.write("익명 함수");
};
func();
//------------------------------------------------------------
//위의 것을 화살표 함수를 써서 줄인 방법입니다.
const func1 = () => {
document.write("화살표 함수 : 익명 함수");
};
func1();
}
결과 확인하기
07. 화살표 함수 : 매개변수 함수
매개변수 함수에 "function"을 뻬고 "=","=>"을 넣어 줄여쓰는 방법입니다.
{
// 기본 형식의 매개변수 함수입니다.
function func (str){
document.write(str);
};
func("매개변수 함수
");
//------------------------------------------------------------
//위의 것을 화살표 함수를 써서 줄인 방법입니다.
func = (str) => {
document.write(str);
};
func("화살표 함수 : 매개변수 함수");
}
결과 확인하기
08. 화살표 함수 : 리턴값 함수
리턴값 함수에 "function"을 뻬고 "=","=>"을 넣어 줄여쓰는 방법입니다.
{
// 기본 형식의 리턴값 함수입니다.
function func(){
const str = "리턴값 함수";
return str;
}
document.write(func());
//------------------------------------------------------------
//위의 것을 화살표 함수를 써서 줄인 방법입니다.
func = () => {
const str = "화살표 함수 : 리턴값 함수";
return str;
};
document.write(func());
}
결과 확인하기
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
익명 함수에 매개변수 함수와 리턴값 함수를 모두 쓴 것 입니다.
{
const func = (str) => {
return str;
};
document.write(func("실행되었습니다."));
}
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
익명 함수에 매개변수 함수와 리턴값 함수를 모두 쓴 것에서 괄호를 생략한 것 입니다.
{
const func = str => {
return str;
};
document.write(func("실행되었습니다"));
}
결과 확인하기
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략
10번에서 리턴까지 생략한 형식입니다.
{
const func = str => str;
document.write(func("실행되었습니다"));
}
결과 확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략
11번에서 익명 함수를 선언적 함수로 바꾼 것 입니다.
{
func = str => str;
document.write(func("실행되었습니다"));
}
결과 확인하기
13. 함수 유형 : 함수와 매개변수를 이용한 형태
여러개의 매개변수를 사용하여 문장을 출력하는 예제입니다.
{
function func(num, str1, str2){
document.write(num + "." + str1 + "가" + str2 + "되었습니다.");
};
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
}
결과 확인하기
14. 함수 유형 : 함수와 변수를 이용한 형태
변수를 매개변수함수의 매개변수로 활용하여 문장을 출력하는 방법입니다.
{
function func(num, str1, str2){
document.write(num + "." + str1 + "가" + str2 + "되었습니다.");
};
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "리액트";
const youCom1 = "실행";
func(youNum1,youStr1,youCom1);
func(youNum2,youStr2,youCom1);
func(youNum3,youStr3,youCom1);
}
결과 확인하기
15. 함수 유형 : 함수와 배열를 이용한 형태
배열 안의 데이터를 함수로 가져다가 사용하여 문장을 출력하는 방법입니다.
{
function func(num, str1, str2){
document.write(num + "." + str1 + "가" + str2 + "되었습니다.");
};
const num = [1,2,3];
const info = ["함수", "자바스크립트", "리액트", "실행"];
func(num[0],info[0],info[3]);
func(num[1],info[1],info[3]);
func(num[2],info[2],info[3]);
}
결과 확인하기
16. 함수 유형 : 함수와 객체를 이용한 형태
객체 안의 데이터를 함수로 가져다가 사용하여 문장을 출력는 방법입니다.
{
function func(num, str1, str2){
document.write(num + "." + str1 + "가" + str2 + "되었습니다.");
};
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행"
};
func(info.num1, info.name1, info.word);
func(info.num2, info.name2, info.word);
func(info.num3, info.name3, info.word);
}
결과 확인하기
17. 함수 유형 : 함수와 배열과 객체를 함께 이용한 형태
배열 안에 객체를 넣고 그 객체의 데이터로 함수를 통해 문장을 출력하는 방법입니다.
정리가 잘 되어 있어 한눈에 보기 좋습니다.
{
function func(num, str1, str2){
document.write(num + "." + str1 + "가" + str2 + "되었습니다.");
};
const info = [
{
num: 1,
name: "함수",
word: "실행"
},{
num: 2,
name: "자바스크립트",
word: "실행"
},{
num: 3,
name: "리액트",
word: "실행"
};
];
func(info[0].num, info[0].name,info[0].word);
func(info[1].num, info[1].name,info[1].word);
func(info[2].num, info[2].name,info[2].word);
}
결과 확인하기
18. 함수 유형 : 객체 안에 함수를 넣어 이용한 형태
객체 안에 함수를 넣어 문장을 출력하는 방법입니다.
{
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행",
result1 : function(){
document.write(info.num1+ "." + info.name1 + "가" + info.word + "되었습니다.");
},
result2 : function(){
document.write(info.num2+ "." + info.name2 + "가" + info.word + "되었습니다.");
},
result3 : function(){
document.write(info.num3+ "." + info.name3 + "가" + info.word + "되었습니다.");
}
};
info.result1();
info.result2();
info.result3();
}
결과 확인하기
19. 함수 유형 : 객체생성자 함수
함수에 데이터를 넣어 원하는 문장을 출력하는 방법입니다.
{
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
this.result = function(){
document.write(this.num+ "." + this.name + "가" + this.word + "되었습니다.");
};
};
// 인스턴스 생성
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
20. 함수 유형 : 프로토타입 함수
프로토타입 함수(Prototype Function)는 자바스크립트에서 객체 생성자(Constructor)를 사용하여 생성된 모든 객체에서 공유되는 메서드입니다.
{
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
};
Func.prototype.result = function(){
document.write(this.num+ "." + this.name + "가" + this.word + "되었습니다.");
};
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
21. 함수 유형 : 객체리터럴 함수
객체리터럴 함수는 프로토 타입에서 밖으로 나온 함수들을 다시 하나의 객체 안에 넣어준 함수입니다.
{
function func(num,name,com){
this.num = num;
this.name = name;
this.com = com;
}
func.prototype = {
result1: function(){
document.write(`${this.num}. ${this.name}가 ${this.com} 되었습니다`);
},
result2: function(){
document.write(`${this.num}. ${this.name}가 ${this.com} 되었습니다`);
},
result3: function(){
document.write(`${this.num}. ${this.name}가 ${this.com} 되었습니다`);
}
}
const info1 = new func("102", "함수", "실행");
const info2 = new func("203", "자바스크립트", "실행");
const info3 = new func("304", "리액트", "실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
22. 함수 유형 : 즉시 실행 함수
함수의 실행문을 생략하는 방법입니다
즉시실행이 되기 때문에 함수의 이름이 따로 필요가 없어집니다.
{
(function(){
document.write("500. 함수가 실행되었습니다
");
})();
//------------------------------------------------------------
// 위의 함수를 화살표 함수로 바꾼 방법입니다.
(() => {
document.write("501. 함수가 실행되었습니다");
})();
}
결과 확인하기
23. 함수 종류 : 파리미터 함수
매개변수 함수를 변형시켜 매개값 안으로 바로 넣어서 실행시켜주는 함수입니다
{
function func(str ="600 함수가 실행되었습니다"){
document.write(str);
}
func();
//------------------------------------------------------------
// 위의 함수를 화살표 함수와 즉시실행 함수로 바꾸어 준 형식입니다.
((str ="600 함수가 실행되었습니다") => {
document.write(str);
})();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
함수의 "인자(argument)" 또는 "매개변수(parameter)"라고도 불리는 "아규먼트(argument)"는 함수가 호출될 때 함수 내에서 처리할 값들을 전달하는데 사용됩니다.
{
function func (str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1,함수실행2");
}
결과 확인하기
25. 함수 종류 : 재귀함수(자기 자신을 호출시키는 함수)
함수가 자기 자신을 계속 출력하는 함수입니다. if문을 써서 정해진 횟수만 출력하게 하는 것이 중요합니다..
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다
");
} else {
document.write("함수가 실행되었습니다
");
func(num-1);
}
}
func(10);
}
결과 확인하기
26.함수 종류 : 콜백함수
두개의 함수를 하나의 실행문으로 원하는 순서대로 실행시키는 함수입니다.
매개값에 함수의 이름을 넣어 그 함수가 실행되게 하는 것입니다.
{
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1. 함수 실행");
str();
}
callback(func);
}
결과 확인하기
27.함수 종류 : 콜백함수(반복문)
두개의 함수를 하나의 실행문으로 원하는 순서대로 실행시키는 함수입니다.
콜백함수 안에 반복문을 넣어 두번째 함수가 여러번 실행되게 해주었습니다.
{
function func (index) {
document.write("함수가 실행되었습니다." + index);
}
function callback(num){
for(let i=1; i<=10; i++){
num(i);
}
}
callback(func);
}
결과 확인하기
28. 함수 종류 : 콜백 함수(동기/비동기)
두개의 함수를 하나의 실행문으로 원하는 순서대로 실행시키는 함수입니다.
함수를 원하는 순서대로 차례차례 실행시킵니다.
{
function funcA(callback){
setTimeout(() => {
console.log("funcA가 실행되었습니다.");
callback();
}, 1000);
}
function funcB(callback){
setTimeout(() => {
console.log("funcB가 실행되었습니다.");
callback();
}, 1000);
}
function funcC(callback){
setTimeout(() => {
console.log("funcC가 실행되었습니다.");
callback();
}, 1000);
}
function funcD(callback){
setTimeout(() => {
console.log("funcD가 실행되었습니다.");
callback();
}, 1000);
}
funcA(function () {
funcB(function () {
funcC(function () {
funcD();
})
})
})
}