01. 선언적 함수
함수 선언문을 사용하여 함수를 정의합니다. 함수 이름이 정의되어 있으며, 함수 호출 이전에 선언되어야 합니다.
{
function func(){
document.write("실행되었습니다.
");
}
func();
}
결과확인하기
02. 익명 함수
함수 표현식을 사용하여 함수를 정의합니다. 함수 이름이 없으며, 변수에 함수를 할당합니다. 함수 호출은 변수를 통해 이루어집니다.
{
const func = function(){
document.write("실행되었습니다.
");
}
func();
}
결과확인하기
03. 매개변수 함수
함수 정의 시 함수 내부에서 사용할 변수를 선언합니다. 함수 호출 시 전달한 값들이 함수 내부의 매개변수에 할당됩니다. 매개변수는 추가 가능합니다.
{
let str ="실행되었습니다.
";
function func(str){
document.write(str);
}
func(str);
//매개변수 추가 가능
function c(str1,str2){
document.write(str1, str2);
}
c("실행3","실행4");
}
결과확인하기
실행3,실행4
04. 리턴값 함수
작업을 수행하는 코드 블록을 나타냅니다. 함수는 매개변수를 사용하여 입력값을 받아들이고, return 문을 사용하여 출력값을 반환합니다.
{
function func(){
const str = "실행되었습니다.
";
return str;
}
document.write(func());
}
결과확인하기
05. 화살표 함수 : 선언적 함수
선언적 함수를 화살표 함수로 표현하는 방식입니다.
{
func = () => {
document.write("실행되었습니다.
");
}
func();
}
결과확인하기
06. 화살표 함수 : 익명 함수
익명 함수를 화살표 함수로 표현하는 방식입니다.
{
const func = () => {
document.write("실행되었습니다.
");
}
func();
}
결과확인하기
07. 화살표 함수 : 매개변수 함수
매겨변수 함수를 화살표 함수로 표현하는 방식입니다.
{
func = (str) =>{
document.write(str);
}
func("실행되었습니다.<br>");
}
결과확인하기
08. 화살표 함수 : 리턴값 함수
리턴값 함수를 화살표 함수로 표현하는 방식입니다.
{
func = () =⩼ {
const str = "실행되었습니다.<br>";
return str;
}
document.write(func());
}
결과확인하기
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
화살표 함수로 익명함수와 매개변수와 리턴값을 같이 쓰는 법입니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략
화살표 함수로 익명함수와 매개변수와 리턴값을 매개변수 괄호 생략을 쓰는 법입니다.
{
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
}
결과확인하기
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략
화살표 함수로 익명함수와 매개변수와 리턴값을 매개변수 괄호 생략,리턴생략을 쓰는 법입니다.
{
const func = str => str;
document.write(func("실행되었습니다."));
}
결과확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴생략
화살표 함수로 선억적함수와 매개변수와 리턴값을 매개변수 괄호 생략,리턴생략을 쓰는 법입니다.
{
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);
}
결과확인하기
14. 함수 유형 : 함수와 변수를 이용한 형태
함수와 변수를 이용한 형태입니다.
{
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();
}
결과확인하기
객체 생성자 함수
자바스크립트에서 객체 생성자 함수는 새로운 객체를 생성할 때 사용되는 함수입니다. 객체 생성자 함수는 일반적으로 대문자로 시작하며, new 연산자를 사용하여 호출됩니다.
20. 함수 유형 : 프로토타입 함수
프로토타입 함수 입니다.
{
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 + "되었습니다1.");
}
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리엑트", "실행");
info1.result();
info2.result();
info3.result();
}
결과확인하기
프로토타입 함수
JavaScript에서는 모든 객체가 해당 객체를 생성하는 "프로토타입" 객체를 가집니다. 프로토타입 객체는 해당 객체에서 상속되는 속성과 메서드를 포함하며, 프로토타입 체인을 통해 상위 객체에서 속성과 메서드를 상속받을 수 있습니다. 프로토타입 객체를 생성하려면 함수를 정의하고 함수의 프로토타입 속성에 메서드와 속성을 추가하면 됩니다. 이 때 프로토타입 속성에 추가한 메서드와 속성은 해당 함수로 생성한 모든 객체에서 상속됩니다.
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("100", "함수", "실행");
const info2 = new Func("200", "자바스크립트", "실행");
const info3 = new Func("300", "리엑트", "실행");
info1.result1();
info2.result2();
info3.result3();
}
결과확인하기
객체 리터럴 함수
JavaScript에서 객체를 생성하는 방법 중 하나는 객체 리터럴을 사용하는 것입니다. 객체 리터럴은 중괄호 {} 안에 속성(key)-값(value) 쌍을 나열하여 객체를 생성합니다.
22. 함수 종류 : 즉시 실행 함수
즉시 실행 함수 입니다.
{
(function(){
document.write("501.함수가 실행되었습니다.");
})();
(()=> {
document.write("502.함수가 실행되었습니다.");
})();
}
결과확인하기
즉시 실행 함수
JavaScript에서 즉시 실행 함수는 함수를 정의하고 즉시 호출하는 패턴을 말합니다. 즉시 실행 함수는 전역 스코프를 오염시키지 않고 지역 스코프를 생성하여 변수 등의 이름 충돌을 방지하고, 모듈화를 구현하는 등의 용도로 사용됩니다.
23. 함수 종류 : 파라미터 함수
파라미터 함수 입니다.
{
function func(str = "600. 함수가 실행되었습니다."){
document.write(str);
}
func();
}
결과확인하기
파라 미터 함수
JavaScript 함수에서 파라미터는 함수 호출 시 전달하는 인자값을 함수 내부에서 사용할 수 있도록 하는 변수입니다. 함수 선언부에 파라미터를 정의하여 함수 내부에서 해당 파라미터 변수를 사용할 수 있습니다.
24. 함수 종류 : 아규먼트 함수
아규먼트 함수 입니다.
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1","함수실행2");
}
결과확인하기
아규 먼트 함수
JavaScript 함수에서 arguments 객체는 함수 호출 시 전달된 인자값들을 배열 형태로 담고 있는 객체입니다. 이 객체를 사용하면 함수 호출 시 전달된 인자값들을 동적으로 처리할 수 있습니다.arguments 객체는 함수 내부에서 지역 변수처럼 사용할 수 있으며, 배열 형태로 인덱스를 사용하여 인자값에 접근할 수 있습니다. arguments 객체의 length 속성은 함수 호출 시 전달된 인자값의 개수를 나타내며, 배열의 메서드와 유사한 push, pop, shift, unshift 등의 메서드를 사용하여 배열에 대한 처리도 가능합니다.
25. 함수 종류 : 재귀 함수
재귀 함수 입니다.
{
function func(num){
if(num <=1){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되었습니다.");
func(num-1);
}
}
func(10);
function animation(){
document.write("애니메이션이 실행되었습니다.");
// requestAnimationFrame(animation)
}
animation();
}
결과확인하기
재귀 함수
재귀 함수(recursive function)는 함수가 자기 자신을 호출하여 문제를 해결하는 기법입니다. 재귀 함수는 반복문을 사용하는 것보다 코드가 간결해지는 경우가 많습니다. 재귀 함수를 구현하려면, 함수 내부에서 자신을 호출하는 코드가 필요합니다. 또한 재귀 함수를 사용할 때는 종료 조건을 반드시 설정해야 합니다. 종료 조건이 없으면 무한히 자신을 호출하게 되어 스택 오버플로우 에러 등의 문제가 발생할 수 있습니다.
26. 함수 종류 : 콜백 함수
콜백 함수 입니다.
{
function func(){
document.write("2함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str();
}
callback(func);
}
결과확인하기
콜백 함수
자바스크립트에서 콜백 함수는 함수를 다른 함수의 인자(argument)로 전달하여, 그 함수 내에서 필요한 시점에 실행되도록 하는 것을 말합니다. 이를 통해 비동기(asynchronous)적인 처리를 할 수 있습니다.
27. 함수 종류 : 콜백 함수
콜백 함수 반복문 입니다.
{
function func(index){
console.log("함수가실행되었습니다." + index);
}
function callback(num){
for(let i=1; i<=10; i++) num(i);
}
callback(func);
}
결과확인하기
28. 함수 종류 : 콜백 함수
콜백 함수(동기/비동기)입니다.
function funcA(){
console.log("funcA가 실행되었습니다.")
}
function funcB(){
console.log("funcB가 실행되었습니다.")
}
funcB();
funcA();
function funcA(){
setTimeout(()=>{console.log("funcA가 실행되었습니다.")},1000)
}
function funcB(){
console.log("funcB가 실행되었습니다.")
}
funcA();
funcB();
function funcA(callback){
setTimeout(()=>{
console.log("funcA가 실행되었습니다.");
callback();
},1000)
}
function funcB(){
console.log("funcB가 실행되었습니다.")
}
funcA(function(){
funcB();
});
//04 : 콜백지옥
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(function(){
})
})
})
})