화살표 함수 - 익명 함수 + 매개변수 함수 + 리턴값 함수
const func = (str) => {
return str;
};
document.write(func("실행되었습니다"))
func 함수는 하나의 매개변수 str을 받아들이고, 이 매개변수를 그대로 반환한다.
함수가 호출될 때, func("실행되었습니다")와 같이 문자열 "실행되었습니다"가 매개변수로 전달된다.
이 문자열은 함수 내부에서 str이라는 매개변수에 저장된다.
그리고 이 함수는 return 키워드를 사용하여 매개변수 str을 반환한다.
즉, 문자열 "실행되었습니다"가 반환된다.
document.write() 함수를 사용하여 반환된 문자열이 화면에 표시된다.
화살표 함수 - 익명 함수 + 매개변수 함수 + 리턴값 함수 (괄호가 생략된 형태)
const func = str => {
return str;
}
document.write(func("실행되었습니다"))
함수의 이름은 func이고, 매개변수는 str이다.
화살표 함수의 형태를 사용하여 함수를 정의한다.
return 키워드를 사용하여 str 매개변수를 반환한다.
이 함수는 문자열을 받아들이고 그 문자열을 그대로 반환하는 기본적인 함수이다.
마지막으로 document.write( ) 함수를 사용하여 반환된 문자열을 추ㅜㄹ력한다.
func("실행되었습니다") 라인에서 함수가 호출되며, 이때 매개변수로 문자열 "실행되었습니다"가 전달된다.
그리고 함수는 전달받은 문자열 "실행되었습니다"를 반환하고, 이 문자열이 document.write( )를 통해 출력된다.
화살표 함수 - 익명 함수 + 매개변수 함수 + 리턴값 함수 (괄호와 return이 생락된 형태)
const func = str => str;
document.write(func("실행되었습니다"))
const func = str => str; 라인에서 함수의 이름은 func이고, 매개변수는 str 이다.
화살표 함수의 형태를 사용하여 함수를 정의한다.
함수의 본문은 return 키워드 없이 str 매개변수를 그대로 반환한다.
이 함수는 문자열을 받아들이고, 받아들인 문자열을 그대로 반환하는 기능을 가졌다.
func("실행되었습니다")를 호출하여 문자열 "실행되었습니다"를 전달한다.
이때, 함수 내부에서는 매개변수 str이 문자열 "실행되었습니다"로 설정되고, 이 문자열이 함수 내부의 표현식으로 평가된다.
그리고 평가된 문자열이 바로 함수의 반환 값이 된다.
마지막으로 document.write( ) 함수를 사용하여 반환된 문자열을 출력한다.
func("실행되었습니다") 라인에서 함수가 호출되며, 이때 매개변수로 문자열 "실행되었습니다"가 전달된다.
그리고 함수는 전달받은 문자열 "실행되었습니다"를 반환하고, 이 문자열이 document.write( )함수를 통해 출력한다.
함수 유형 - 함수와 매개변수를 이용한 형태
{
function func(num, str1, str2) {
document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "<br>");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
}
document.write("<br>",1,"<br>");func 함수는 세 개의 매개변수 num, str1, str2를 가지고 있다.
이 함수는 document.write( ) 메서드를 사용하여 입력받은 세 개의 매개변수를 조합하여 문서에 출력한다.
먼저 "func" 라는 이름의 함수가 정의되어 있다.
이 함수는 세 개의 입력값 (num, str1, str2)을 받아서 document.write( ) 메서드를 사용하여 입력된 내용을 화면에 출력한다.
그리고 함수를 세 번 호출하면서, 각 호출마다 다른 입력값(num, str1, str2)를 전달한다.
함수를 호출하는 부분에서는 func( ) 함수에 첫 번째 인자로 1, 두 번째 인자로 "함수", 세 번째 인자로 "실행"을 전달하여 호출하고, 두 번째와 세 번 째 호출에서는 각각 "자바스크립트", "리액트"를 첫 번째 인자 대신 전달하여 호출한다.
함수 유형 - 함수와 변수를 이용한 형태
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);
func()는 num, str1, str2까지 총 세 개의 매개변수를 가지며, 각각 숫자와 문자열 속성을 가진다.
주어진 매개변수를 사용하여 문장을 생성하고 이 문장을 document.write를 사용하여 웹 페이지에 출력한다.
이 함수를 사용하기 위해 youNum1, youStr1 등이 상수로 선언되어 있으며, 각각 숫자와 문자열을 저장하는데 사용된다.
func()함수를 호출하여 출력할 문장을 생성한다.
각각의 호출은 num으로 숫자열을, str1로 첫번째 문자열을, str2로 두번째 문자열을 전달한다.
이렇게 전달된 매개변수들은 함수에 의해 문장으로 조합되어 출력된다.
함수 유형 - 함수와 배열을 이용한 형태
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]);
함수 func()는 세 개의 매개변수를 가지며, 문장을 생성하고 출력한다.
매개변수 num은 숫자, str1과 str2는 문자열 타입이다.
상수(const) num은 [1,2,3] 배열을 할당 받으며, 상수 info는 ["함수", "자바스크립트", "리액트","실행"] 배열을 할당받는다.
이 배열들은 각각 숫자와 문자열을 저장하는데 사용된다.
함수 func()를 호출할 때, 배열의 인덱스(키)를 사용하여 각가의 매개변수를 전달한다.
첫번째 호출에서는 num[0], info[0], info[3]을 전달하고,
두번째 호출에서는 num[1], info[1], info[3]을 전달한다. 같은 방식으로 인덱스만 바뀌어 세번째 호출도 수행된다.
함수 func()는 이러한 매개변수를 사용하여 문장을 생성하고, 문장은 document.write를 사용하여 출력된다.
출력된 문장은 "숫자. 문자열1 이 문자열2 가 되었습니다"의 형태를 갖는다.
함수 유형 - 함수와 객체를 이용한 형태
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);
상수(const)info는 객체 형태를 띄며 num1, num2, num3, name1, name2, name3, word까지 7개의 속성을 가진다.
이 속성들을 각각 숫자와 문자열을 저장하며, 이들은 함수 호출 시에 매개변수로 사용된다.
함수 func()를 호출할 때는, 객체 info의 속성에 접근하여 각각의 매개변수를 전달한다.
첫번째 호출에서는 info.num1, info.name1, info.word를 전달하고,
두번째 호출에서는 info.num2, info.name2, info.word를 전달한다. 같은 방식으로 세번째 호출도 실행된다.
객체를 불러오는 방식으로 .(온점)을 찍어 속성에 접근하여 매개변수를 전달할 수 있게 한다.
함수 유형 - 함수와 배열, 객체를 이용한 형태
function func(num, str1, str2) {
document.write(num + ". " + str1 + "가 " + str2 + "되었습니다", "");
}
const info = [
{
num: 1,
name: "함수",
}, {
num2: 2,
name: "자바스크립트"
}, {
num3: 3,
name: "리액트",
word: "실행"
}
]
func(info[0].num, info[0].name, info[2].word);
func(info[1].num2, info[1].name, info[2].word);
func(info[2].num3, info[2].name, info[2].word);
상수(const)info는 배열 형태를 띄며, 배열 안에는 세 개의 객체가 저장되어 있다.
객체마다 숫자와 문자열을 저장하며, 세번째 객체는 word라는 속성도 추가로 갖는다.
함수 func를 호출할 때는, 배열 info의 각 객체에 접근하여 각각의 매개변수를 전달한다.
배열의 값에 접근하기 위해 [ ] 대괄호를 사용하고 객체의 값에 접근하기 위해 .(온점)을 사용한다.
배열 안에 객체가 있는 형태를 갖추고 있기 때문에 배열의 값에 접근하는 방법과 객체의 값에 접근하는 방법 두 가지 모두를 사용한다.
함수 유형 - 객체 안에 함수를 이용한 형태
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();
상수 info는 객체를 나타내며, 속성으로 숫자와 문자열을 저장한다.
또한 result1~3까지 속성으로 추가되어 있다.
이들 속성은 함수를 나타내며, 문장을 생성하고 출력한다.
각각의 속성들은 다음과 같은 역할이다.
num1, num2, num3: 각각 숫자 값을 가진다.
name1, name2, name3: 각각 문자열 값을 가진다.
word: 문자열 값을 가진다.
result1, result2, result3: 함수 값을 가진다. 각각의 함수는 document.write 메서드를 사용하여 입력된 속성 값을 조합하여 웹 페이지에 출력한다.
result1, result2, result3이 전부 객체의 속성이기 때문에 함수를 세 번 호출하기 위해 info 뒤에 온점을 찍어 객체 안에 저장되어 있는 result에 접근한다.
함수 유형 - 객체 생성자 함수
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 + "되었습니다", "<br>");
}
}
//인스턴스 생성
const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");
info1.result();
info2.result();
info3.result();
Func라는 생성자 함수를 정의하고, 해당 함수를 통해 객체를 생성하는 방식이다.
생성자 함수는 num, name, word 3개의 인자를 받아서 해당 인자를 프로퍼티로 가지는 객체를 생성한다.
this 키워드를 통해 생성된 객체의 프로퍼티를 저장한다.
result라는 메서드는 생성자 함수 Func를 통해 생성된 객체에 포함되는 함수로, 프로퍼티를 참조하여 결과값을 출력하는 역할을 한다.
생성자 함수는 일반 함수와 차이를 두기 위해 함수명의 첫 문자를 대문자로 표현한다.
생성자 함수로 생성된 객체의 속성 추가, 삭제, 변경은 다른 객체의 속성에 영향을 주지 않는다.
또한, 함수 안의 this는 함수를 통하여 생성되는 객체를 의미한다.
함수 유형 - 프로토타입 함수
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();
생성자 함수 Func를 정의하고 Func.prototype 객체에 result 메서드를 추가한 후, "new" 연산자를 사용하여 생성자 함수를 호출하여
객체 인스턴스를 생성하고, 생성된 인스턴스에서 result 메서드를 호출한다.
Func 생성자 함수는 num, name, word 3개의 인자를 받아서 객체의 프로퍼티로 할당한다.
Func.prototype.result 메서드는 생성된 객체 인스턴스에서 호출될 수 있도록 프로토타입 체인에 추가된다.
result 메서드는 this를 통해 함수 안에 생성된 데이터를 이용하여 문장을 만들고 이를 document.write를 이용하여 출력한다.
생성자 함수에서 정의한 속성을 그대로 상속받는다.
생성자 함수 내에 정의하지 않고도 생성된 객체에서 호출하여 사용할 수 있다.