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());
}
결과 확인하기
05. 화살표 함수 : 선언적 함수
선언적 함수의 function을 생략한 약식입니다.
{
func = () => {
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
06. 화살표 함수 : 익명 함수
익명 함수의 function을 생략한 약식입니다.
{
const func = () => {
document.write("실행되었습니다.
");
}
func();
}
결과 확인하기
07. 화살표 함수 : 매개변수 함수
매개변수 함수의 function을 생략한 약식입니다.
{
func = (str) => {
document.write(str);
}
func("실행되었습니다.");
}
결과 확인하기
08. 화살표 함수 : 리턴값 함수
리턴값 함수의 function을 생략한 약식입니다.
{
func = () => {
const str = "실행되었습니다.
";
return str;
}
document.write(func();)
func();
}
결과 확인하기
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
func 함수를 정의하고 문자열 매개변수 str을 받아서 동일한 값을 반환합니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략
react에서 많이 쓰는 방식입니다.
변수 값이 하나일때 괄호 생략 가능합니다.
{
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", "리액트", "실행");
}
결과 확인하기
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. 함수 유형 : 객체생성자 함수
생성자 함수를 이용하여 객체를 생성하고, 해당 객체의 메서드를 호출하여 정보를 출력하는 예시입니다.
{
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.리액트가실행되었습니다.
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+"되었습니다.");
} //함수가 밖으로 빠져서 원하는 함수만 실행
const info1 = new func(1,"함수","실행");
const info2 = new func(2,"자바스크립트","실행");
const info3 = new func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
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("202","자바스크립트","실행");
const info3 = new func("302","리액트","실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
}
결과 확인하기
202.자바스크립트가실행되었습니다.
303.리액트가실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
선언적 함수의 변형이라고 생각하면 쉽습니다.
함수를 정의하고 즉시 실행하는 패턴입니다.
전역 스코프에 추가적인 변수를 노출시키지 않고, 함수 내부의 변수와 함수들이 전역 스코프와 충돌하지 않도록 할 수 있습니다.
{
(function(){
document.write("500.함수가 실행되었습니다.")
})();
(() => {
document.write("501.함수가 실행되었습니다.")
})();
}
결과 확인하기
501.함수가 실행되었습니다.
23. 함수 종류 : 피라미터 함수
매개변수 함수 변형이라고 생각하면 쉽습니다.
함수를 인자로 전달하는 패턴입니다.
다른 함수에서 파라미터 함수를 전달받아 해당 함수를 내부에서 실행하거나, 함수의 결과에 따라 다른 동작을 수행할 수 있습니다.
{
function func(str = "600.함수가 실행되었습니다."){
document.write(str);
}
func();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
함수 내에서 사용할 수 있는 특별한 객체입니다.
이 객체는 함수에 전달된 인자들의 정보를 담고 있습니다.
함수 내부에서 이 인자들을 배열 형태로 사용할 수 있게 합니다.
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2");
}
결과 확인하기
함수실행2
25. 함수 종류 : 재귀 함수
자기자신을 호출시키는 함수입니다.
함수를 여러 번 실행시켜야 할 떄 사용합니다.
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.")
} else {
document.write("함수가 실행되었습니다.")
func(num-1);
}
}
func(10);
}
결과 확인하기
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
함수가실행되었습니다.
requestAnimationFrame 메소드를 이용해 애니메이션을 실행하는 코드
무한에 빠지지 않고 로딩도 오래걸리지 않아 재귀함수 대신 많이 사용합니다.
{
function animation( ){
document.write("애니메이션이 실행되었습니다.");
requestAnimationFrame(animation);
}
animation( );
}
26. 함수 종류 : 콜백 함수
함수를 두 번 실행합니다.(다른 함수에 인수로 넘겨지는 함수)
{
function func( ){
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str( );
}
callback(func);
}
결과 확인하기
2.함수가실행되었습니다.
1부터 실행한 다음 2를 실행합니다.
(동시실행 하지 않습니다.)