오늘은 자바스크립트 함수 유형에 대해 복습해보겠습니다!
자바스크립트 함수 유형
👻함수 유형 : 함수와 매개변수를 이용한 형태
매개변수를 이용해 기본값을 지정하고 함수를 호출합니다.
function func(num, str1, str2){
document.write(num +". "+str1+"가 "+str2+"되었습니다.");
}
func("1", "함수", "실행");
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");👻함수 유형 : 함수와 변수를 이용한 형태
변수를 이용해 기본값을 지정하고 함수를 호출합니다.
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);👻함수 유형 : 함수와 배열을 이용한 형태
배열을 이용해 배열 안에 기본값을 지정하고 함수를 호출합니다.
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]);👻함수 유형 : 함수와 객체를 이용한 형태
객체를 이용해 객체안에 기본 키와 값을 지정하고 함수를 호출합니다.
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);👻함수 유형 : 함수와 객체, 배열을 이용한 형태
객체와 배열을 함께 이용해 함수를 호출합니다.
객체와 배열을 이용한 데이터 구조를 다룰 때 특히 유용합니다.
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);👻함수 유형 : 객체 안에 함수를 이용한 형태
객체 안에 함수를 정의하여 함수를 호출합니다.
일반적인 방법은 객체 리터럴을 이용하여 객체를 정의하고, 속성으로 함수를 추가하는 것입니다.
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();👻함수 유형 : 객체생성자 함수
객체 생성자 함수는 객체를 생성하기 위해 사용되는 함수입니다.
객체 생성자 함수는 일반 함수와 구분하기 위해 대문자로 시작하는 이름을 사용합니다.
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();this
this는 현재 실행 중인 함수가 속한 객체를 가리키는 키워드입니다. 함수를 정의하는 시점에서 this는 정의된 함수와는 아무런 연관이 없으며, 함수가 호출되는 시점에 this가 결정됩니다. this의 값은 함수 호출 방식에 따라 결정됩니다.
1. 함수를 일반적으로 호출하는 경우: this는 전역 객체를 가리킵니다.
2. 메서드를 호출하는 경우: this는 메서드를 호출한 객체를 가리킵니다.
3. 생성자 함수를 호출하는 경우: this는 생성된 객체를 가리킵니다.
this 키워드는 함수가 호출되는 방식에 따라 결정되므로, 함수를 정의할 때 this가 어떤 객체를 가리키는지 잘 이해하고 사용해야 합니다.
👻함수 유형 : 프로토타입 함수
프로토타입 함수는 모든 객체가 상속하는 함수입니다.프로토타입 함수는 생성자 함수의 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();
도움이 되셨다면 많은 공감과 댓글 부탁드려요~!!
