01. 선언적 함수
선언적 함수는 함수를 선언하는 방식으로, 함수를 선언할 때 함수 이름과 매개변수, 반환 값 등을 명시해주는 것입니다.
이 방식으로 함수를 선언하면, 함수가 호출되기 이전에 미리 함수가 메모리에 할당되어 있기 때문에,
함수를 호출하기 전에도 함수를 사용할 수 있습니다.
function func( ){
document.write("실행되었습니다!
");
}
func( );
// 실행되었습니다!
02. 익명 함수
익명 함수란, 함수 이름을 지정하지 않고 함수를 선언하는 방식입니다.
변수에 함수를 할당하거나, 함수의 매개변수로 함수를 전달할 때 사용됩니다.
이 방식으로 함수를 선언하면, 함수가 호출되기 이전에는 함수가 메모리에 할당되어 있지 않기 때문에,
함수를 호출하기 전에는 함수를 사용할 수 없습니다.
const func = function( ){
document.write("실행되었습니다!
");
}
func( );
// 실행되었습니다!
03. 매개변수 함수
매개변수 함수란, 함수 내에서 다른 함수를 호출할 때, 호출할 함수의 매개변수로 함수를 전달하는 것을 의미합니다.
매개변수 함수는 함수의 재사용성을 높이고, 코드의 가독성을 향상시키는 등의 이점이 있습니다.
예를 들어, 배열의 요소를 정렬하는 함수를 구현할 때, 정렬 방식을 매개변수 함수로 전달할 수 있습니다.
이렇게 하면, 같은 배열에 대해서도 다양한 정렬 방식을 적용할 수 있습니다.
function func(str){
document.write(str);
}
func("실행되었습니다!
");
// 실행되었습니다!
04. 리턴값 함수
리턴 함수는 함수 내에서 값을 반환하는 것을 말합니다.
함수가 값을 반환하면, 해당 값을 변수에 할당하거나, 다른 함수의 인자로 사용할 수 있습니다.
예를 들어, 두 수를 더하는 함수를 구현할 때, 더한 결과를 반환하여 다른 함수에서 사용할 수 있습니다.
리턴 함수는 프로그래밍에서 매우 중요한 개념 중 하나이며, 많은 프로그래밍 언어에서 지원됩니다.
function func( ){
const str = "함수가 실행되었습니다."; // 변수 안에 있는 함수
return str; // 결과를 내고, 끝내는 것
}
document.write(func());
document.write("<br><br>")
// 함수가 실행되었습니다.
05. 화살표 함수 : 선언적 함수
화살표 함수(arrow function)는 함수를 선언하는 새로운 방식 중 하나입니다.
함수를 더 간결하게 표현할 수 있으며, 코드의 가독성을 높여줍니다.
예를 들어, 다음과 같이 함수를 선언할 수 있습니다.
func = ( ) => {
document.write("실행되었습니다
");
}
func( );
// 위와 같은 식:
func = ( ) => document.write("실행되었습니다");
func( );
// 실행되었습니다.
// 실행되었습니다.
06. 화살표 함수 : 익명 함수
화살표 함수를 사용하면 기존의 함수 선언 방식에 비해 코드 길이가 짧아지는 장점이 있습니다.
또한, 함수 내부에서 this 키워드를 사용할 때 기존의 함수 선언 방식보다 간편하게 사용할 수 있다는 장점이 있습니다.
const func = ( ) => {
document.write("실행되었습니다
");
}
func( );
// 실행되었습니다.
07. 화살표 함수 : 매개변수 함수
화살표 함수에서는 함수 이름 대신 화살표(=>)를 사용하여 함수를 선언합니다.
매개변수가 하나인 경우 괄호를 생략할 수 있으며, 함수 내부에서 한 줄의 코드만 실행되는 경우 중괄호와 return 문도 생략할 수 있습니다.
func = (str) => {
document.write(str);
}
func("실행되었습니다
");
// 실행되었습니다.
08. 화살표 함수 : 리턴값 함수
화살표로 간결하게 표현한 리턴값 함수입니다.
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. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 + 리턴 생략
리턴값을 쓰지만 생략을 하는 표현방법이기 때문에 헷갈리기 쉽습니다.
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 + "되었습니다.","<br>");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
// 1. 함수가 실행되었습니다.
// 2. 자바스크립트가 실행되었습니다.
// 3. 리액트가 실행되었습니다.
14. 함수 유형 : 함수와 변수를 이용한 형태
변수를 정해줘서 함수를 실행했습니다.
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다.","<br>");
}
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);
// 1. 함수가 실행되었습니다.
// 2. 자바스크립트가 실행되었습니다.
// 3. 리액트가 실행되었습니다.
15. 함수 유형 : 함수와 배열을 이용한 형태
배열을 통애서 함수의 값을 불러왔습니다.
배열의 순서대로 불러오면 됩니다.
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다.","<br>");
}
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]);
// 1. 함수가 실행되었습니다.
// 2. 자바스크립트가 실행되었습니다.
// 3. 리액트가 실행되었습니다.
16. 함수 유형 : 함수와 객체를 이용한 형태
객체를 통해서 함수를 불러왔습니다.
객체의 형태를 활용하면 됩니다.
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다.","<br>");
}
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);
// 1. 함수가 실행되었습니다.
// 2. 자바스크립트가 실행되었습니다.
// 3. 리액트가 실행되었습니다.
17. 함수 유형 : 함수와 객체, 배열을 이용한 형태
객체와 배열을 함께 활용해서 함수를 실행했습니다.
배열 안에 객체를 넣어서 써줬기 때문에 배열을 먼저 불러오면 됩니다.
function func(num, str1, str2){
document.write(num +". "+ str1 + "가 " + str2 + "되었습니다.","<br>");
}
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);
// 1. 함수가 실행되었습니다.
// 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 + "되었습니다.","<br>");
},
result2: function(){
document.write(info.num2 +". "+ info.name2 + "가 " + info.word + "되었습니다.","<br>");
},
result3: function(){
document.write(info.num3 +". "+ info.name3 + "가 " + info.word + "되었습니다.","<br>");
}
}
info.result1();
info.result2();
info.result3();
// 1. 함수가 실행되었습니다.
// 2. 자바스크립트가 실행되었습니다.
// 3. 리액트가 실행되었습니다.
19. 함수 유형 : 객체생성자 함수
생성자 함수를 사용하면 Java나 C++의 Class처럼 껍데기를 만들 수 있습니다.
기존 함수에 new 연산자를 붙여서 호출하면, 해당 함수는 생성자 함수로 동작합니다.
그런데 함수가 일반적인 함수인지 객체를 만들기 위한 목적의 생성자 함수인지 구분하기 위해, 생성자 함수의 첫 문자는 대문자로 표기하는 것이 관례입니다.
const info = {
num1 : 1,
name1 : "함수",
num2 : 2,
name2 : "자바스크립트",
num3 : 3,
name3 : "리액트",
word : "실행"
}
function func(num, name, word){
this.num = num; // this의 첫 번 째 뜻은 자기자신
this.name = name;
this.word = word;
this.result = function(){
document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다.","<br>")
}
}
const info1 = new func(1, "함수", "실행"); // 인스턴스 생성, new를 붙여서 매개변수와 구별해서 씀(객채생성자 함수)
const info2 = new func(2, "자바스크립트", "실행");
const info3 = new func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
// 1. 함수가 실행되었습니다.
// 2. 자바스크립트가 실행되었습니다.
// 3. 리액트가 실행되었습니다.
20. 함수 유형 : 프로토타입 함수
자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있습니다.
그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 합니다.
이러한 부모 객체를 Prototype(프로토타입) 객체 또는 줄여서 Prototype(프로토타입)이라 합니다.
Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다.
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
}
const info1 = new func("101", "함수", "실행");
const info2 = new func("102", "자바스크립트", "실행");
const info3 = new func("103", "리액트", "실행");
info1.result();
info2.result();
info3.result();
// 101. 함수가 실행되었습니다.
// 102. 자바스크립트가 실행되었습니다.
// 103. 리액트가 실행되었습니다.
21. 함수 유형 : 객체리터럴 함수
객체 리터럴 방식은 객체 생성 방식 중 가장 일반적이고 간단한 방법으로, 컨텐츠를 그대로 대입하는 방법을 말합니다.
key : value 형식의 data를 직접 입력하는 방법입니다.
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}되었습니다.<br>`);
},
result2 : function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
},
result3: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`);
}
}
const info1 = new func("201", "함수", "실행");
const info2 = new func("202", "자바스크립트", "실행");
const info3 = new func("203", "리액트", "실행");
info1.result1();
info2.result2();
info3.result3();
// 201. 함수가 실행되었습니다.
// 202. 자바스크립트가 실행되었습니다.
// 203. 리액트가 실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
(IIFE, Immediately Invoked Function Expression)는 정의되자마자 즉시 실행되는 함수를 말합니다.
소괄호(())로 함수를 감싸서 실행하는 문법을 사용합니다.
(function(){
document.write("500. 함수가 실행되었습니다.<br>");
})();
(() => {
document.write("501. 함수가 실행되었습니다.");
})();
// 500. 함수가 실행되었습니다.
// 501. 함수가 실행되었습니다.
23. 함수 종류 : 파라미터 함수
한글 그대로 번역하면 '매개변수'란 뜻입니다.
함수를 정의 할 때 외부로부터 받아들이는 임의의 값을 의미합니다.
function func(str = "600. 함수가 실행되었습니다."){
document.write(str);
}
func();
// 600. 함수가 실행되었습니다.
24. 함수 종류 : 아규먼트 함수
우리말로는 '인수' 라고 번역되는데, 함수를 호출할 때 이 때 사용하게 되는 일련의 값들을 아규먼트라고 부릅니다.
function func(str1,str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2");
// 함수실행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 func(){
document.write("2. 함수 실행");
}
function callback(str){
document.write("1. 함수 실행");
str();
}
callback(func);
// 1. 함수 실행2. 함수 실행