01. 선언적 함수
선언적 함수는 함수를 선언할 때 function 키워드를 사용해서 함수 이름을 정의합니다.
함수 내부 코드 블록을 중괄호 { }로 감싸는 방식으로 작성하는 함수입니다.
{
function func( ){
document.write("실행되었습니다.");
};
func( );
}
결과 확인하기
✍️ 선언적 함수 호출
선언적 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.
변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만,
var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러가 발생하지 않습니다.
이러한 자바스크립트 성질을 '끌어올리기' 호이스팅(Hoistion)이라고 합니다.
02. 익명 함수
익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 줍니다.
익명 함수는 변수 선언 이후에 호출해야 합니다.
{
const func = function( ){
document.write("실행되었습니다.");
};
func( );
}
결과 확인하기
✍️ 즉시 실행 함수
익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 있습니다.
'즉시 실행 함수'는 선언과 동시에 함수가 실행되며 함수명이 없기 때문에 재호출 할 수 없습니다.
보통 처음 한번만 실행하는 초기화 코드에 사용됩니다.
03. 매개변수 함수
매개변수 함수는 매개변수를 사용해 함수를 호출하는 과정입니다. 매개변수 함수에는 매개변수가 있는 함수의 형식, 매개변수가 없는 함수의 형식이 있습니다.
{
function func(str){
document.write(str);
};
func("실행되었습니다.");
}
결과 확인하기
✍️ 매개변수가 있는 함수의 형식
function 함수명(매개변수1, 매개변수2......){
document.wrtie(매개변수1, 매개변수2......)
}
함수명(매개변수1 값, 매개변수2 값......);
✍️ 매개변수가 없는 함수의 형식
매개변수가 있는 함수의 경우 보통 매개변수의 개수가 정해져 있습니다.
그런데 경우에 따라서는매개변수의 개수를 정할 수 없는 함수를 만들어야 하는 경우도 발생합니다.
이런 경우 함수에 전달되는 매개변수 값을 저장해주는 arguments 객체를 사용하여 함수를 만들 수 있습니다.
04. 리턴값(결과/끝) 함수
리턴값 함수는 함수를 통해 처리된 결과를 반환시켜주는 명령어입니다.
함수 내부에서 처리한 결과를 외부로 반환할 때, return 키워드를 사용합니다.
{
function func( ){
const str = "실행되었습니다.";
return str; // return 키워드로 인해 결과 호출
};
document.write(func( ));
}
결과 확인하기
✍️ 리턴값 함수 합 구하기
function d(x, y, z){ // x=1, y=2, z=3의 값을 호출
return x+y+z; // x=1, y=2, z=3의 값을 받아 결과를 반환해준다.
};
document.write(d(1,2,3)); // x=1, y=2, z=3의 값을 부여
결과 : 6
05. 화살표 함수 : 선언적 함수
선언적 함수를 '=>'을 이용하여 함수를간결하게 표현한 방법입니다.
단일 명령문일 경우에는 함수의 중괄호 { }와 return을 생략할 수 있습니다.
{
func = ( ) => {
document.write("실행되었습니다.");
}
// function func( ){
// document.write("실행되었습니다.");
// };
func( );
}
결과 확인하기
06. 화살표 함수 : 익명 함수
익명 함수를 '=>'을 이용하여 함수를간결하게 표현한 방법입니다.
{
const func = ( ) => {
document.write("실행되었습니다.");
};
// const func = function( ){
// document.write("실행되었습니다.");
// };
func( );
}
결과 확인하기
07. 화살표 함수 : 매개변수 함수
매개변수 함수를 '=>'을 이용하여 함수를간결하게 표현한 방법입니다.
{
func = (str) => {
document.write(str);
};
// function func(str){
// document.write(str);
// };
func("실행되었습니다.");
}
결과 확인하기
08. 화살표 함수 : 리턴값(결과/끝) 함수
리턴값(결과/끝) 함수를 '=>'을 이용하여 함수를간결하게 표현한 방법입니다.
{
func = ( ) => {
const str = "실행되었습니다.";
return str;
};
// function 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 + "되었습니다.");
}
// 매개변수로 값을 입력
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는 무엇인가요?
JavaScript에서 this는 현재 실행 중인 코드에서 현재 객체를 참조하는데 사용됩니다.
this는 함수가 어떻게 호출되었는지에 따라 참조하는 객체가 달라집니다.
예를 들어, 함수가 일반적인 방법으로 호출되면 this는 전역 객체를 참조합니다. 하지만 함수가 객체의 메서드로 호출되면 this는 해당 객체를 참조합니다.
또한 this의 값은 실행 컨텍스트에 의해 결정됩니다. 실행 컨텍스트는 현재 실행되고 있는 코드의 환경을 나타내며, this를 포함하여 변수, 함수 등을 저장합니다.
this는 함수 내부에서 사용될 때 유용합니다.
예를 들어, 메서드 내부에서 this를 사용하면 해당 메서드가 속한 객체를 참조할 수 있습니다. 이를 통해 객체의 속성을 참조하거나 수정할 수 있습니다.
20. 함수 유형 : 프로토타입 함수
프로토타입(prototype)을 사용한 함수 유형입니다.
프로토타입(prototype)은 '생성자 함수'로 생성된 객체들은 '생성자 함수'에서 정의한 속성을 그대로 상속받습니다.
{
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. 리액트가 실행되었습니다.
✍️ 프로토타입(prototype) 함수란?
prototype 함수는 자바스크립트에서 모든 객체가 가지는 속성(property)으로, 객체의 원형(prototype object)을 가리킵니다.
객체의 프로토타입은 해당 객체를 생성하는데 사용된 생성자 함수의 prototype 속성으로 설정됩니다.
즉, 생성자 함수를 사용하여 객체를 생성하면 해당 객체는 생성자 함수의 prototype 객체를 상속하게 되고, 이 prototype 객체의 속성과 메서드를 해당 객체에서 사용할 수 있게 됩니다.
이처럼 prototype을 사용하면 객체의 속성과 메서드를 공유하여 메모리 사용량을 줄이고 코드의 재사용성을 높일 수 있습니다.
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}되었습니다.<br>`);
},
result2: function( ){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
},
result3: function( ){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
},
};
// 인스턴스 생성
const info1 = new Func("101", "함수", "실행");
const info2 = new Func("201", "자바스크립트", "실행");
const info3 = new Func("301", "리액트", "실행");
info1.result1( );
info2.result2( );
info3.result3( );
}
결과 확인하기
201. 자바스크립트가 실행되었습니다.
301. 리액트가 실행되었습니다.
22. 함수 종류 : 즉시 실행 함수
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의하고 즉시 실행하는 자바스크립트 패턴입니다.
이 패턴은 전역 스코프에 변수를 추가하는 것을 방지하고 모듈화된 코드를 작성하는 데 사용됩니다.
{
// function func( ){
// document.write("함수가 실행되었습니다.");
// };
// func( );
(function ( ){
document.write("500. 함수가 실행되었습니다.");
})( );
(( ) => {
document.write("501. 함수가 실행되었습니다.");
})( );
}
결과 확인하기
501. 함수가 실행되었습니다.
23. 함수 종류 : 파라미터 함수
파라미터 함수(Parameter Function)는 함수의 인자로서 전달되는 함수를 의미합니다.
파라미터 함수는 함수의 인자로서 전달되어 다른 함수 내에서 호출됩니다.
이를 통해 함수의 유연성과 재사용성을 높일 수 있습니다.
{
// function func(str){
// document.write(str);
// };
// func("600. 함수가 실행되었습니다.");
function func(str = "600. 함수가 실행되었습니다."){
document.write(str);
};
func();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
아규먼트 함수(Argument Function)는 함수 호출 시 인자로 전달되는 함수를 의미합니다.
아규먼트 함수는 함수 내부에서 실행됩니다.
{
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);
}
결과 확인하기
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
✍️ 애니메이션을 원할하게 실행하기 위해 많이 사용합니다.
{
function animation( ){
document.write("애니메이션이 실행되었습니다.");
requestAnimationFrame(animation);
};
animation( );
}
26. 함수 종류 : 콜백 함수(다른 함수에 인수로 넘겨지는 함수)
콜백 함수는 함수를 두번 실행하고 다른 함수에 인수로 넘겨지는 함수입니다.
{
// function func1( ){
// document.write("1. 함수 실행");
// };
// function func2( ){
// document.write("2. 함수 실행");
// };
// func1( );
// func2( );
function func( ){
document.write("2. 함수 실행");
};
function callback(str){
document.write("1. 함수 실행");
str( );
};
callback(func);
}
결과 확인하기
2. 함수 실행
27. 함수 종류 : 콜백 함수(반복문)
콜백 함수 안에 for문(반복문)이 포함되어있어 반복문의 조건식에 맞을 때까지 인수를 넘겨받아 실행됩니다.
{
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. 함수 종류 : 콜백 함수(동기/비동기)
동기는 요청을 보낸 후 결과물을 받아야지만 다음 동작이 이루어지는 방식을 말한다. 즉, 모든 일은 순차적으로 실행되며 어떤 작업이 수행 중이라면 다음 작업은 대기하게 됩니다.
비동기는 서버로부터 데이터를 받아와서 해당 데이터를 뿌려줘야 하므로 맨 처음에 서버로부터 데이터를 받아와서 실행되어야 합니다.
비동기로 처리하지 않고 동기로 처리하게 되면 데이터를 가져오기까지 대기하게 됩니다.
이런 불편 사항을 없애기 위해 비동기 적으로 처리를 해야하는 것입니다. 코드로 가장 많이 사용되는 것은 setTimout이다.
{
//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( );
});
});
});
}
(1초뒤에 실행)funcA가 실행되었습니다.
(1초뒤에 실행)funcB가 실행되었습니다.
(1초뒤에 실행)funcC가 실행되었습니다.
(1초뒤에 실행)funcD가 실행되었습니다.