기본 함수 와 함수 유형 정리
기본 함수
선언적 함수
·직접 선언 하는 방식입니다.
·함수를 호출하기 이전에 먼저 정의해야 합니다. 함수 정의가 코드의 상단으로 호이스팅(hoisting)되기 때문입니다. 호이스팅이란, 변수나 함수를 코드의 상단으로 끌어올리는 작업을 말합니다.
{
function add(){
document.write("선언적 함수");
}
add();//선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생 시키징 않습니다. 이러한 자바스크립트 성질을 호이스팅(Hoistion) 이라고 합니다.
}
//결과:선언적 함수※선언적 함수 화살표 함수로 만들기
{
func = () => { //function을 없애고 =과 =>를 넣어 간략하게하였습니다.
document.write("선언적 함수");
}
func();
}
//결과
선언적 함수
익명함수
·함수를 정의할 때 함수 이름을 지정하지 않고, 함수를 변수에 할당하거나 다른 함수의 인자로 전달하는 등의 용도로 사용되는 함수를 의미합니다.
·변수에 함수를 할당하면 해당 변수를 이용해 함수를 호출할 수 있습니다.
·익명 함수는 주로 콜백 함수(callback function)로 사용되며, 이때 함수를 직접 호출하는 것이 아니라 다른 함수의 인자로 전달됩니다.
{
const add = function(){
document.wrtie("익명 함수")
}
add();
}
//결과: 익명 함수※익명함수 화살표 함수로 만들기
{
const func = () => {
document.write("익명 함수");
}
func();
}
//결과
익명 함수
매개변수 함수
함수에 입력으로 전달되는 값을 의미합니다. 함수는 매개변수를 통해 외부에서 입력된 데이터를 사용하여 동작하며, 매개변수를 사용하여 함수의 입력값을 유연하게 처리할 수 있습니다.
{
function func(str){
document.write(str);
}
func("매개변수 함수");
}
//결과: 매개변수 함수※매개변수 함수 화살표 함수로 만들기
{
func = (str) => {
document.write(str);
}
func("매개변수 함수");
}
//결과
매개변수 함수
리턴값 함수
함수가 처리한 결과를 함수 외부로 반환하는 함수입니다. 함수를 호출한 곳에서는 반환된 값을 받아서 다른 동작을 처리하거나 변수에 할당할 수 있습니다.
{
function func(){
const str = "리턴값 함수";
return str;
}
document.write(func());
}
//결과: 리턴값 함수※리턴값 함수 화살표 함수로 만들기
{
func = (str) => {
document.write(str);
}
func("리턴값 함수");
}
//결과
리턴값 함수
함수 유형
함수와 매개변수를 이용한 형태
함수를 사용하여 코드의 재사용성과 유지보수성을 높이기 위해 매개변수를 이용하여 다양한 입력값을 받아 처리하는 방법입니다.
{
function func(num, str1, str2){
document.write(num +"."+ str1 + "가" + str2 + "되었습니다."+"");
}
func("1", "함수", "실행"); //매개변수
func("2", "자바스크립트", "실행");
func("3", "리액트", "실행");
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
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);
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
함수와 배열을 이용한 형태
배열을 인자로 받아 처리하는 함수를 정의하고, 이 함수를 호출할 때 배열을 인자로 전달하여 사용하는 방식입니다.
{
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]);
}
//결과값
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
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);
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
함수와 배열, 객체를 이용한 형태
배열과 객체를 조합하여 처리하는 함수를 정의하고, 이 함수를 호출할 때 배열과 객체를 인자로 전달하여 사용하는 방식입니다.
{
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);
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
객체 안에 함수를 이용한 형태
객체 안에 함수를 이용한 형태 입니다.
{
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();
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
객체생성자 함수
·객체를 생성하기 위해 사용되는 함수입니다. 객체 생성자 함수를 이용하면, 유사한 속성을 가지는 객체들을 간편하게 생성할 수 있습니다.
·객체 생성자 함수는 일반적으로 함수 이름의 첫 글자를 대문자로 쓰는 관례를 따릅니다.
·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 + "되었습니다."+"");
}
}
//인스턴스 생성 (new를 붙여주어야합니다.)
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
프토토타입 함수
객체 생성자 함수에서 필요한 함수만을 실행하기 위해 함수를 객체 밖으로 내보낸 형태입니다.
{
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 + "되었습니다."+"");
}
//인스턴스 생성 (new를 붙여주어야합니다.)
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
//결과
1.함수가실행되었습니다.
2.자바스크립트가실행되었습니다.
3.리액트가실행되었습니다.
※this
this는 JavaScript에서 함수가 실행되는 문맥(context)를 가리키는 특수한 키워드입니다. 함수를 호출할 때, this는 호출한 객체를 가리킵니다.
@this 키워드 사용 경우
·객체 내부에서 메서드를 호출할 때: this는 메서드를 호출한 객체를 가리킵니다.
·함수를 호출할 때: this는 전역 객체를 가리킵니다. 이는 strict mode에서는 undefined가 됩니다.
·생성자 함수를 이용하여 객체를 생성할 때: this는 새로 생성된 객체를 가리킵니다.
·call, apply, bind와 같은 메서드를 이용하여 함수를 호출할 때: this는 메서드의 첫 번째 인자로 전달된 객체를 가리킵니다.