01. 선언적 함수
함수는 코드 블록을 묶어서 하나의 기능으로 만든 것으로, 필요할 때마다 호출하여 사용할 수 있는 독립적인 기능을 제공합니다.
{
function func( ){
document.write("실행하기
");
}
func( );
}
결과 확인하기
함수 : 함수는 매개변수를 통해 입력값을 전달 받고, 반환값을 통해 출력값을 전달할 수 있습니다.
함수는 function 키워드를 사용하여 정의하며, 함수 이름, 매개변수, 함수 몸체로 구성됩니다.
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( ));
}
결과 확인하기
09. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값
함수는 코드 블록을 묶어서 하나의 기능으로 만든 것으로, 필요할 때마다 호출하여 사용할 수 있는 독립적인 기능을 제공합니다.
화살표 함수는 function 키워드 대신 화살표 연산자(=>)를 사용하여 함수를 정의합니다.
{
const func = (str) => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
10. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략
함수는 코드 블록을 묶어서 하나의 기능으로 만든 것으로, 필요할 때마다 호출하여 사용할 수 있는 독립적인 기능을 제공합니다.
화살표 함수는 function 키워드 대신 화살표 연산자(=>)를 사용하여 함수를 정의합니다.
{
//변수값이 하나일때 괄호를 생략이 가능합니다.
const func = str => {
return str;
}
document.write(func("실행되었습니다."));
}
결과 확인하기
11. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략
함수는 코드 블록을 묶어서 하나의 기능으로 만든 것으로, 필요할 때마다 호출하여 사용할 수 있는 독립적인 기능을 제공합니다.
화살표 함수는 function 키워드 대신 화살표 연산자(=>)를 사용하여 함수를 정의합니다.
{
const func = str => str;
//return도 생략할 수 있습니다.
document.write(func("실행되었습니다."));
}
결과 확인하기
12. 화살표 함수 : 선언적 함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴 생략
함수는 코드 블록을 묶어서 하나의 기능으로 만든 것으로, 필요할 때마다 호출하여 사용할 수 있는 독립적인 기능을 제공합니다.
화살표 함수는 function 키워드 대신 화살표 연산자(=>)를 사용하여 함수를 정의합니다.
{
func = str => str;
//const 도 생략할 수 있습니다.
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);
}
결과 확인하기
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]);
}
결과 확인하기
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 : "실행",
resurlt1: function(){
document.write(info.num1 +". "+ info.name1 + "가 " + info.word + "되었습니다.
");
},
resurlt2: function(){
document.write(info.num2 +". "+ info.name2 + "가 " + info.word + "되었습니다.
");
},
resurlt3: function(){
document.write(info.num3 +". "+ info.name3 + "가 " + info.word + "되었습니다.
");
}
}
info.resurlt1();
info.resurlt2();
info.resurlt3();
}
결과 확인하기
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();
}
결과 확인하기
20. 함수 유형 : 프로토타입 함수
프로토타입(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();
}
결과 확인하기
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("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "리액트", "실행");
//실행문
info1.result1( );
info2.result2( );
info3.result3( );
}
결과 확인하기
22. 함수 종류 : 즉시 실행 함수
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 자바스크립트에서 함수를 선언하고 즉시 실행하는 방법입니다.
{
//즉시 실행 함수
(function (){
document.write("함수가 실행되었습니다.1
");
})();
//즉시 실행 화살표 함수
(( ) => {
document.write("함수가 실행되었습니다.2");
})( );
}
결과 확인하기
23. 함수 종류 : 파라미터 함수
파라미터 함수(Parameter Function)는 자바스크립트에서 함수를 정의할 때 매개변수(parameter)를 사용하는 함수입니다.
파라미터 함수를 사용하면 함수 내에서 외부에서 전달된 값을 사용할 수 있습니다.
{
function func(str = "함수가 실행되었습니다."){ //함수내에서 외부에서 전달된 값을 사용할 수 있다.
document.write(str);
}
func();
}
결과 확인하기
24. 함수 종류 : 아규먼트 함수
아규먼트 함수를 사용하면 함수 호출 시 동적으로 전달되는 인자를 활용하여 함수를 실행할 수 있습니다.
{
function func(str1, str2){ //인자값 str1을 [0], str2을 [1] 자리로 보면된다.
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2
");
}
결과 확인하기
25. 함수 종류 : 재귀 함수(자기자신을 호출시키는 함수)
재귀 함수는 반복적인 작업을 수행해야 할 때나 복잡한 알고리즘을 구현할 때 유용하게 사용됩니다.
{
function func(num){
if(num<=1){ //false
document.write("함수실행1");
} else {
document.write("함수실행2");
func(num-1); //재귀 함수기 때문에 계속반복
}
}
func(10);
}
결과 확인하기
26. 함수 종류 : 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)
콜백 함수(Callback Function)는 다른 함수에게 인자로 전달되어 실행되는 함수입니다.
즉, 콜백 함수는 함수의 인자로 전달되어 언제든지 호출될 수 있는 함수를 말합니다.
{
function func(){
document.write("2.함수 실행");
}
function callback(str){ //callback함수기 때문에 먼저 실행
document.write("1.함수 실행");
str();
}
callback(func); //실행문 확인하기
}
결과 확인하기
26. 함수 종류 : 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)
콜백 함수(Callback Function)는 다른 함수에게 인자로 전달되어 실행되는 함수입니다.
즉, 콜백 함수는 함수의 인자로 전달되어 언제든지 호출될 수 있는 함수를 말합니다.
{
function func(){
document.write("2.함수 실행");
}
function callback(str){ //callback함수기 때문에 먼저 실행
document.write("1.함수 실행");
str();
}
callback(func); //실행문 확인하기
}