01. 선언적 함수
선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말합니다.
따로 변수에 넣어주지 않고 선언할 때 붙여준 이름을 호출하면 됩니다.
{
function func(){
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
선언적 함수
선언적 함수(Declaration function)는 function 키워드를 사용하여 정의된 함수입니다. 이 함수는 스크립트의 어디에서든지 호출할 수 있으며, 함수 선언 시 함수 이름이 필요합니다.
02. 익명 함수
익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.
{
const func = function(){
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
익명 함수
익명 함수(Anonymous function)는 이름이 없는 함수입니다. 일반적으로 콜백 함수 또는 함수 표현식으로 사용됩니다. 익명 함수는 function 키워드로 정의되며, 이름을 생략할 수 있습니다.
03. 매개변수 함수
매개변수는 함수 호출시 데이터를 입력 받는 기능을 말합니다.
{
function func(str){
document.write(str);
}
func("실행되었습니다.");
}
결과 확인하기
매개변수 함수
매개변수 함수(Parameter function)는 다른 함수에 전달되어 사용되는 함수입니다. 매개변수 함수는 다른 함수 내에서 호출되며, 함수 호출 시 함수 이름 대신 함수를 전달하는 것이 특징입니다.
04. 리턴값(결과/끝) 함수
return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능을 말합니다.
{
function func(){
const str = "실행되었습니다.";
return str;
}
document.write(func());
}
결과 확인하기
리턴 함수(return function)
리턴 함수(return function)는 함수가 값을 반환할 때 사용되는 함수입니다.
함수는 일련의 작업을 수행하기 위한 코드 블록으로, 입력값을 받아 작업을 수행한 후 결과값을 반환할 수 있습니다. 리턴 함수는 이 결과값을 함수 외부로 반환하는 역할을 합니다.
05. 화살표 함수 : 선언적 함수
선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말합니다.
function을 지우고 func() 괄호 사이에 화살표를 넣는 방법입니다.
{
func = () => {
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
화살표 함수
화살표 함수(arrow function)는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 문법입니다. 기존의 함수 표현식에 비해 간결하게 작성할 수 있어서 인기가 높습니다.
06. 화살표 함수 : 익명 함수
익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용 할 수 있도록 만들어 줍니다.
function을 지우고 func() 괄호 사이에 화살표를 넣는 방법입니다.
{
const func = () => {
document.write("실행되었습니다.");
}
func();
}
결과 확인하기
07. 화살표 함수 : 매개변수 함수
매개변수는 함수 호출시 데이터를 입력 받는 기능을 말합니다.
function을 지우고 func() 괄호 사이에 화살표를 넣는 방법입니다.
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.");
}
결과 확인하기
08. 화살표 함수 : 리턴값(결과/끝) 함수
return 제어문을 사용해서 함수의 연산 결과중 원하는 값을 지정해서 호출 위치로 복구 시키는 기능을 말합니다.
function을 지우고 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. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴 생략
화살표 함수를 통해서 익명 함수와 매개변수와 리턴값을 같이 사용하며 괄호와 리턴을 생략할 수 있습니다.
react에서 많이 사용됩니다.
{
const func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호생략 리턴 생략
화살표 함수를 통해서 선언적 함수와 매개변수와 리턴값을 같이 사용하며 괄호와 리턴을 생략할 수 있습니다.
(위와는 다르게 익명이 아니라 선언적 함수를 사용함. (단점 : this를 사용할 수 없음))
{
func = str => str;
document.write(func("실행되었습니다."));
}
결과 확인하기
13. 함수 유형 : 함수와 매개변수를 이용한 형태
함수와 매개변수를 사용한 함수 유형입니다.
{
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다.
");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
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);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
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]);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
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);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
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);
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
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();
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
19. 함수 유형 : 객체생성자 함수
새로운 객체를 생성하기 위해 사용되는 함수입니다.
객체 생성자 함수를 사용하여 객체를 생성할 때는 new 연산자를 사용합니다.
{
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();
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
백틱으로 쓸 수 있음.
this.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
20. 함수 유형 : 프로토타입 함수
프로토타입 함수를 사용한 함수 유형입니다.
자바스크립트는 Function() 인스턴스에 자동으로 prototype 이라는 속성을 만듭니다. 구체적으로 말하자면 prototype 속성은 new 키워드와 생성자 함수를 같이 사용해서 만든 객체에 연결됩니다.
{
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();
}
결과 확인하기
2. 자바스크립트가 실행되었습니다.
3. 리액트가 실행되었습니다.
21. 함수 유형 : 객체 리터럴 함수(Object Literal Function)
객체를 생성할 때 사용하는 방법 중 하나입니다.
객체 리터럴 함수는 중괄호({})를 사용하여 객체를 정의하고, 그 안에 프로퍼티를 추가하여 객체를 초기화하는 함수입니다.
{
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("111","함수", "실행");
const info2 = new func("222","자바스크립트", "실행");
const info3 = new func("333","리액트", "실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
222. 함수가 실행되었습니다.
333. 함수가 실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
함수를 정의하고 즉시 실행하는 방법 중 하나입니다.
IIFE는 함수를 선언하자마자 바로 실행하기 때문에, 전역 스코프를 오염시키지 않고 함수 내부에서 변수를 사용할 수 있습니다.
{
// function func(){
// document.write("함수가 실행되었습니다.");
// }
// func();
(function (){
document.write("500. 함수가 실행되었습니다.
");
})();
//즉시 실행 함수
(() => {
document.write("501. 함수가 실행되었습니다.");
})();
}
결과 확인하기
501. 함수가 실행되었습니다.
23. 함수 종류 : 파라미터 함수
JavaScript에서 함수를 정의할 때, 함수의 파라미터로 전달되는 값을 받아서 사용하는 함수입니다.
파라미터 함수를 사용하면 함수 내부에서 전달받은 값에 따라 다양한 처리를 할 수 있습니다.
//{
//매개변수를 변형
// function func(str){
// document.write(str);
// }
// func("600. 함수가 실행되었습니다");
//}
{
function func(str = "600. 함수가 실행되었습니다.
"){
document.write(str);
}
func();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
함수 내부에서 사용되는 변수입니다. 이 변수는 함수가 호출될 때, 전달된 모든 인자를 배열 형태로 저장하고 있습니다.
함수 내부에서는 이 배열 형태로 저장된 인자에 접근하여 사용할 수 있습니다.
//{
// function func(str1, str2){
// document.write(str1);
// document.write(str2);
// }
// func("함수실행1", "함수실행2");
// }
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2
");
}
결과 확인하기
25. 함수 종류 : 재귀 함수(자기자신을 호출시키는 함수)
자기 자신을 호출하는 함수입니다. 재귀 함수는 어떤 작업을 반복적으로 수행할 때 유용하게 사용될 수 있습니다.
예를 들어, 팩토리얼 계산이나 피보나치 수열 계산 등은 재귀 함수를 사용하여 구현할 수 있습니다.
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.
");
} else {
document.write("함수가 실행되었습니다.");
func(num-1); //조건에 맞을 때까지 빼줌.
}
}
func(10);
// function animation(){
// document.write("애니메이션이 실행되었습니다.");
// requestAnimationFrame(animation);
// }
// animation();
}
결과 확인하기
26. 함수 종류 : 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)
다른 함수에 인자로 전달되는 함수입니다. 콜백 함수는 일반적으로 비동기적으로 실행되는 작업이 완료될 때 호출됩니다.
콜백 함수를 사용하여 비동기적으로 실행되는 작업이 완료된 후에 결과를 처리할 수 있습니다.
{
// function func1(){
// document.write("1.함수 실행");
// }
// function func2(){
// document.write("2.함수 실행");
// }
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str();
}
callback(func);
}
결과 확인하기
27. 함수 종류 : 콜백 함수 : 반복문
콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.
{
function func(index){
console.log("함수가 실행되었습니다."+index);
}
function callback(num){
for(let i=1; i<=10; i++){
num(i);
}
}
callback(func);
}
결과 확인하기
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10
28. 함수 종류 : 콜백 함수(동기/비동기)
콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.
{
//01
function funcA( ){
console.log("funcA가 실행되었습니다.");
}
function funcB( ){
console.log("funcB가 실행되었습니다.");
}
funcA( );
funcB( );
//02
function funcA( ){
setTimeout(( ) => {
console.log("funcA가 실행되었습니다.");
}, 1000); // 1초뒤에 실행
}
function funcB( ){
console.log("funcB가 실행되었습니다.");
}
funcA( );
funcB( );
//03
function funcA(callback){
setTimeout(( ) => {
console.log("funcA가 실행되었습니다.");
callback( );
}, 1000)
}
function funcB( ){
console.log("funcB가 실행되었습니다.");
}
funcA(function( ){
funcB( );
});
}
결과 확인하기
funcA가 실행되었습니다.
funcB가 실행되었습니다.
//02
funcB가 실행되었습니다.
(1초뒤에 실행)funcA가 실행되었습니다.
//03
(1초뒤에 실행)
funcA가 실행되었습니다.
funcB가 실행되었습니다.
콜백 지옥
{
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가 실행되었습니다.");
},1000);
};
funcA(function( ){
funcB(function( ){
funcC(function( ){
funcD( );
});
});
});
}
funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.