기본적인 함수의 생성 및 사용법
JavaScript는 HTML과 CSS에서 하지 못하는 보다 유연한 사용자 입출력 값에 대한 처리와 상호작용을 가능케 합니다. 그래서 Javascript를 주로 사용자가 원하는 상황을 수행하는 함수를 생성하는대에 활용합니다.
- 이 함수를 선언하면 우리가 일일이 동작을 코드로 구현하지 않고도 미리 만들어 놓은 함수의 키워드를 호출 함으로서 코드가 간결해지고 깔끔하게 동작 할 수 있도록 해줍니다.
- 이러한 함수 선언은 크게 익명 함수 표현식과 기명 함수 선언문, 화살표 함수 형태로 함수 선언이 가능한데, 사용법에는 차이가 없으나 기명 함수 선언문은 호이스팅(인터프리터가 작업 전 메모리 공간을 할당하는 작업) 시 최우선적으로 읽혀진다는 차이점이 있습니다.
- 이들 구분은 아래의 코드와 같이 구분 가능하며 이름을 정하는 것 외에도 몇몇의 차이점을 가지고 있으며 이들은 상황 및 표현 방법에 따라 적절히 사용 되나 method 함수에서는 화살표 함수(ES6부터 도입)를 가장 많이 사용하고 있습니다.
- 특히 화살표 함수는 기존의 함수 선언과는 달리 축약형으로서 몇몇의 코드를 제외해도 된다는 점에서 메모리를 절약 할 수 있고 코드를 보다 간결하게 작성 할 수 있는 장점을 가집니다. 단 객체 데이터를 반환 할 때에는 중괄호를 소괄호로 한번 감싸준 후 작성을 해야 합니다. ( ({name : james}) 처럼.)
- 아래의 코드는 각각 input1과 input2 라는 ID를 가진 Input 창에 사용자가 값을 각각 입력하고 button을 클릭 하게되면 script 태그에 연결 되어있는 practice.js 파일 속 사용자가 만든 함수인 add 함수를 onclick 이벤트로 호출하여 더하기를 수행하도록 하는 코드입니다.
- 이처럼 자바스크립트가 하는 일은 주로 사용자가 화면 상에 특정 정보를 입력하고 어떠한 행위를 했을 시 그 값을 받아와 처리하여 다시 사용자에게 반환 하는 작업을 처리 하는데 사용됩니다.
//★ 익명 함수 표현식
const add = function () {
let add =
parseInt(document.querySelector("#input1").value) +
parseInt(document.querySelector("#input2").value);
console.log(add);
return add;
};
//★ 화살표 함수 (return, 중괄호, 변수 선언 생략)
const add = () =>
console.log(
parseInt(document.querySelector("#input1").value) +
parseInt(document.querySelector("#input2").value));
//★ 기명 함수 선언문
function add() {
let add =
parseInt(document.querySelector("#input1").value) +
parseInt(document.querySelector("#input2").value);
console.log(add);
return add;
};
일반적으로 이러한 함수를 만드는 코드는 const (함수명) = function(){} 이며, 해당 중괄호 안에 값을 매게 변수로 받아올지, 그 받아온 값을 어떻게 처리를 해서 반환 할지에 대해 작성을 합니다.
//★ 기본적인 더하기와 빼기 함수 구현법
function sum(a, b){
return a+b;
}
function sub(a, b){
let result = a-b
return result;
}
let a = sum(1,2);
let b = sub(10,5);
console.log(a,b,c);
//a는 두 변수를 더한 값인 3이, b는 두 수를 뺀 값인 5가 각각 출력된다.
특히 함수의 매게 변수는 전달 받는 인자의 개수를 초과하는 값이 전달 될 경우 지정 된 함수의 인자 외에는 무시되지만, arguments 함수를 사용하여 전달 받는 인자값을 직접 선택 받을 수 있습니다.
//★ arguments 함수의 기본 사용법
function add(a, b) { //2. add가 사용 할 매게변수는 a와 b 2개지만
console.log(arguments); //3. arguments를 쓰면 전달 받은 인자값 1,3,5,7이 출력 되고
console.log(arguments[0]); // 4. 그 중 0번째 arguments인 1이 선택 됩니다.
console.log(typeof arguments); // 5. 이때의 arguments의 타입은 Object입니다.
return a + b;
}
console.log(add(1, 3, 5, 7)) /*1. add 함수에 네 개의 인자를 전달하고 전달 받는 값은 1과 3의
더하기 값인 4가 출력됩니다.*/
);
//★ arguments 응용
function getAverage() {
let result = 0;
for (const num of arguments) { //2. for-of를 활용해 arguments들을
result += num; //3. result에 누적 시켜줍니다.
}
return result / arguments.length; // 4. 그리고 누적 합산 된 result 값을 arguments의 길이로
// 5. 나눈 후 결과값을 리턴 해줍니다.
}
console.log(
getAverage(1, 4, 7), // 1. 첫번째 arguments로 1,4,7이 getAverage로 전달 되면
getAverage(24, 31, 52, 80) // 6. 다시 두번째 arguments들을 getAverage에 전달 후 실행
); //arguments를 사용 할 경우에는 굳이 함수의 인자를 특정하지 않아도 됩니다.
또한 함수는 일급 객체(First Class Object)로서의 특성을 가지는데, 즉 function으로 생성 된 함수는 function 타입의 변수로도 사용 될 수 있다는 의미이죠.
- 이러한 일급 객체는 상수및 변수에 할당도 할 수 있고, 다른 함수에 인자로서 전달도 할 수 있으며, 결과값으로서 반환되는 매게가 될 수도 있습니다. 즉 말 그대로 변수로서의 역할을 수행하는 것이죠.
//★ 할당으로서의 역할을 하는 일급 객체
function isOddNum (number) {
console.log(
let answer = (number % 2 ? '홀' : '짝')
+ '수입니다.'
); //짝수인지 홀수인지 판별하는 코드를 작성 후
return answer; // 그 값을 저장한 answer에 저장 후 return
};
const checkIfOdd = isOddNum;
/* 이렇게 만들어진 isOddNum 함수를 checkIfOdd에 할당하면
*/ isOddNum 안의 코드는 전부 checkIfOdd로 할당이 됨.
console.log(checkIfOdd(23)); // checkIfOdd는 정상적으로 실행 가능
//★ 객체에 할당 되는 일급 객체
let person = {
name: '홍길동',
age: 30,
married: true,
introduce: function (formal) { // person 객체에 introduce 속성에는 키 값으로
return formal // funtion이 들어가고 삼항 연산자를 실행한 값을 리턴함
? '안녕하십니까. 홍길동 대리라고 합니다.'
: '안녕하세요, 홍길동이라고 해요.';
}
};
console.log(person.introduce(true));
/* 그래서 person에 introduce를 선택 하고 true를 매게 변수로 전달하면 그 안의 함수가
매게변수를 받아 실행 되고 해당 결과 값을 리턴 받는거임.
이런 이유로 true를 전달 할 경우 introduce의 함수가 실행 되어 formal 삼항 연산의 조건에 따라
true 값인 첫번째 결과값이 출력 되는 것입니다.*/
console.log(person.introduce(false)); // 마찬가지로 false에 대한 결과값이 출력.
//★ 배열에 할당 되는 일급 객체
let arithmetics = [
(a, b) => a + b, //화살표 함수를 사용해 첫번째 값은 a와 b를 더하는 값을 저장
(a, b) => a - b, //나머지 값들도 해당 연산 실행 후 그 값을 저장
(a, b) => a * b,
(a, b) => a / b
];
for (arm of arithmetics) { // for-of문을 사용해 배열의 값들을 꺼내오는데
console.log(arm(5, 3)); // arithmetics의 값들을 하나씩 꺼내오는데 매게변수로 5와 3을 전달하고
// 각각의 연산이 끝난 arithmetics의 값들을 호출 받아 콘솔 출력.
}
//★ 배열과 함수인자를 전달하는 일급 객체 사용 예시
let list = [1, 2, 3, 4, 5]; //1부터 5까지 존재하는 리스트 생성
function doInArray (array, func) { //아래 list와 console.log를 각각 array와 func라는 이름으로 입력을 받아
for (item of array) { // for-of를 사용해 전달 받은 첫번째 array(배열) 안의 item들을
func(item); // 하나 하나 꺼낸 후 두번째 메게로 받은 func 함수의 매게로 전달.
}
}
doInArray(list, console.log);
/*doInArray의 첫번째 매게 변수에 배열 list를,
두번째 매게변수에는 함수 console.log를 입력 받아 list를 하나 하나 출력 합니다.*/
//참고) 이때 전달되는 함수(console.log)를 콜백 함수, 전달 받는 함수(doInArray)를 고차 함수 라고 합니다.
//★ 익명 함수와 변수들을 전달하는 일급 객체
function doNTime (func, repeat, x, y){// 2.그렇게 네 인자가 들어오면
let result = x; // 3.result 값에 x를 저장합니다.
for(i = 0; i<repeat ; i++){ // 4. 그리고 repeat 값(3) 만큼 반복을 하는 동안
result = func(result, y); // 5. result에 첫번째로 받은 익명함수(x,y를 받으면 이 둘을 곱하는 함수)를 실행합니다.
} // 이때 result는 x(5), y는 2가 됩니다.
return result; // 6. result 값에 대한 연산이 다 끝난 후 result를 리턴합니다.
}
console.log(
doNTime((x,y) => x*y, 3, 5, 2) /*1. 네 개의 인자에서 첫번째는 익명 함수((x,y) => x*y)를 전달합니다.
그리고 두번째 값은 반복할 횟수, 세번째 값은 result에 담길 x,
네번째 값은 y를 전달합니다.*/
doNTime((x,y) => x/y, 3, 5, 2) // 7. 첫번째 doNTime이 끝나고 두번째 doNTime을 또 실행합니다.
)
//★ 결과값을 반환 받는 일급 객체 getIntroFunc
function getIntroFunc (name, formal) {// 2. 해당 인자값들을 받은 후
return formal // 3. return 뒤에 바로 삼항 연산자를 작성합니다.
? function () { // 그래서 formal이 참이면 첫번째 함수가, 거짓이면 두번째 함수가 실행된 값을 retrun 합니다.
console.log(`안녕하십니까, ${name}입니다.`); // 4. 템플럿 리터럴로 해당 이름을 표기합니다.
} : function () {
console.log(`안녕하세요~ ${name}이라고 해요.`);
}
}
const hongIntro = getIntroFunc('홍길동', true); // 1. getIntroFunc에 인자값으로 이름과 boolean 을 제공합니다.
const jeonIntro = getIntroFunc('전우치', false); // 5. 다음 코드문 실행생성자 함수 생성 및 사용법
생성자 함수는 같은 양식의 객체들을 반복적으로 만들 경우 사용하는 함수입니다.
- 우선 new 키워드로 특정 생성자 함수를 호출하는 객체를 생성합니다. 그리고 그 객체를 참조하는 변수를 지정하여 인스턴스들을 생성합니다.
- 생성된 객체에 인자값을 생성자 함수에 전달하고, 그 인자값을 생성자 함수가 받게 되면 그 각각의 함수를 this 키워드를 통해 해당 인자를 초기화 시켜줍니다. 그 이후 다시 this 키워드로 실행할 함수를 초기화 시켜준 수 해당 인자값들에 대한 함수를 실행하여 반환 해줍니다.
- 이후 반환된 결과 값을 콘솔 출력이나 이외의 작업으로 처리하면 됩니다.
- 이 작업을 통해 일일이 해당 변수에 대한 오브젝트를 만들어줄 필요 없이 하나의 생성자 함수에 인자들을 동적으로 처리하여 마치 인쇄를 찍어내듯 여러 변수들에 같은 양식으로 다른 데이터를 저장 할 수 있게 되는 것입니다.
- 또한 생성자 함수를 통해 생성 된 객체들이 프로퍼티나 메서드 공유를 할 수 있도록 도와주는prototype 키워드를 통해 공통된 일련의 작업을 수행하는 메서드를 사용 할 수 있습니다. 이 경우
- 이때 prototype으로 만든 프로퍼티나 메서드는 prototype프로퍼티 안에서 따로 보관 및 관리합니다.
- 물론 인스턴스를 활용하지 않고도 해당 생성자 함수 내에서 자체적으로 프로퍼티와 메서드를 생성 할 수 있습니다. 이럴 경우 해당 생성자 함수를 공유하고 있는 인스턴스는 자체적으로 생성된 프로퍼토와 메서드에 접근 및 사용을 하지 못하지만 함수 자체로는 그 함수를 사용하는 것이 가능합니다.
- 이러한 생성자 함수는 기존의 함수들과 구별을 짓기 위해 네이밍을 할때 파스칼 케이스(맨 앞글자를 대문자로) 표기법을 사용합니다.
// 생성자 함수
function YalcoChicken (name, no) { //2. chain1으로부터 '판교'와 3을 받어서
this.name = name; //3. name을 '판교'로 초기화
this.no = no;//4. no를 3으로 초기화
this.introduce = function () { //5. 다시 this 키워드를 사용해 이 introduce함수는
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`; //6. 초기화 된 no(3)와 name('판교')를 용하여 해당 문구를 문자열 이터럴로 반환 해줍ㄴ디ㅏ.
}
}// 인스턴스 생성
const chain1 = new YalcoChicken('판교', 3); //1. 생성자 함수 생성
const chain2 = new YalcoChicken('강남', 17);// 7. 1번부터 6번까지의 작업 다시 반복
const chain3 = new YalcoChicken('제주', 24);// 8. 7번의 작업이 끝나면 다시 1번부터 6번까지의 작업 다시 반복
console.log(chain1, chain1.introduce()); // chain1에 저장된 오브젝트의 프로퍼티들과 반환 받은 introduce 함수를 출력
console.log(chain2, chain2.introduce()); // chain1과 똑같이 출력
console.log(chain3, chain3.introduce()); // chain1과 똑같이 출력
// prototype을 이용해 영어로 소개하는 함수 만들기
YalcoChicken.prototype.introEng = function () { //1. prototype키워드를 삽입 후 변수명 지정
return `Welcome to Yalco Chicken at ${this.name}!`; //2. 지점명을 영어로 소개하는 문장을 반환
};
console.log(chain1.introEng()); /*3. chain1의 introEng 함수를 호출하는데 이때는 이미 위에서 name과 no가 초기화 및 저장 되었기 때문에 인자를 전달 해주지 않아도 된다.
즉 prototype에서 인자를 받지 않는 이유 또한 이미 위의 원 생성자 함수에서 값들을 연결 받고 있기 때문이다.*/
// 생성자 함수 YalcoChicken 자체의 프로퍼티와 함수 만들기
YalcoChicken.brand = '얄코치킨'; // 1. 생성자 함수의 자체 프로퍼티
YalcoChicken.contact = function () { 2. 생성자 함수의 자체 메서드
return `${this.brand}입니다. 무엇을 도와드릴까요?`; // 3. 자체 프로퍼티를 이용합니다.
};
const chain1 = new YalcoChicken('판교', 3); // 4.생성자 함수를 참고하는 인스턴스 생성
console.log(YalcoChicken.contact()); //5. 생성자 함수의 자체 contact 함수를 실행하여 호출하면 정상적으로 해당 안내 문구가 호출되지만
console.log(chain1.contact());//6. chain1 인스턴스는 자체 프로퍼티와 메서드에 접근을 할 수 없기에 contatct 메서드를 호출시 에러가 발생합니다.
Class 함수
class 함수는 class 키워드로 생성한 함수의 일종이며, 객체 지향 프로그래밍을 구현하기 위한 편리한 문법적인 기능을 제공합니다.
- 생성자 함수의 역할을 수행하며, new 키워드를 사용하여 인스턴스를 생성할 수 있습니다. 클래스 내부에는 프로퍼티와 메서드를 정의할 수 있습니다. 즉 전체적인 사용법은 생성자 함수와 비슷하지만 몇가지 차이점을 보이기도 합니다.
- 우선 생성자 함수에서는 함수가 인스턴스로부터 직접 인자를 전달 받았으나, class 함수는 자체 메서드인 constructor에서 전달을 받아 초기화를 합니다. 클래스 당 하나만 사용 가능하며 인스턴스 초기화가 필요 없는 클래스에는 constructor 선언이 불필요합니다.
- 단, class 함수는 호이스팅을 지원 받지 않으므로 다른 함수들과는 달리 실행 순서를 올바르게 작성을 해주어야 하며, new 연산자를 사용하지 않은 인스턴스일 경우 생성자 함수 실행시에는 undefined가 출력 되었으나, class 함수에서는 오류가 발생합니다. 이유는 class의 경우Syntactic Sugar 문법을 위해 ES6이후 출시 된 함수인지라 엄격 모드가 적용 되었기 때문에 이런 제약들이 존재하는 것입니다.
- 이때 해당 인스턴스의 변수를 직접 출력하게 될경우 오브젝트 값이 출력 되는 생성자 함수와는 달리 아무것도 출력이 되지 않습니다.
- 또한 이 class 함수는 ES6 이후부터 객체로서의 함수를 실행 할 때에는 function 키워드를 생략해도 해당 객체가 함수의 기능을 수행함을 인식 할 수 있기 때문에 생략해도 됩니다.
//기본적인 class 함수 생성
class YalcoChicken {//1. 클래스 생성
constructor (name, no) {//2. constructor 메서드를 이용해 인자값들을 초기화
this.name = name;
this.no = no;
}
introduce () { // //3. class 내의 introduce 메서드를 생성하고
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;// 4. 해당 문구를 리턴
}
}
const chain1 = new YalcoChicken('판교', 3);//5. chain1 인스턴스를 생성하여 인자값을 넘겨주고
const chain2 = new YalcoChicken('강남', 17);
const chain3 = new YalcoChicken('제주', 24);
console.log(chain1, chain1.introduce());//6. chain1은 출력이 안되는 대신 introudce 함수를 실행한 리턴값을 받아 출력.
console.log(chain2, chain2.introduce());
console.log(chain3, chain3.introduce());
즉시 실행 함수
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 함수를 정의하고 즉시 호출하는함수 형태입니다. 이를 사용하여 함수 스코프를 생성하고 변수들이 전역 스코프로 노출되는 것을 방지할 수 있습니다.
- IIFE는 함수를 만들자마자 바로 실행하는 패턴을 가집니다.
- 기본적인 작성법은 익명의 함수(function)의 앞뒤로 소괄호() 로 감싸주고 맨 뒤에 다시 소괄호를 하나 작성 해줍니다.
- 마지막 소괄호가 중괄호와 함수를 감싸는 소괄호 사이 중간에 들어가도 해당 함수는 정상적으로 작동 됩니다.
const a = 7
(function (){
console.log(a * 7)
})();
타이머 함수
타이머 함수는 자바스크립트에서 특정 시간 간격 또는 지정된 시간 후에 코드를 실행하는 기능을 제공합니다. 타이머 함수를 사용하여 원하는 시간에 작업을 예약하거나 반복적인 작업을 수행할 수 있습니다.
- 타이머 함수의 기본 시간은 1000ms(밀리 세컨드) 입니다. 즉 0.001초에 해당하는 단위죠.
- setTimeout(함수, 시간) : 일정 시간 후 함수를 실행합니다.
- setInterval(함수, 시간) : 시간 간격마다 함수를 실행합니다.
- clearTimeout() : 설정 되어있는 setTimeout 함수를 종료합니다.
- clearInterval() : 설정 되어있는 setInterval 함수를 종료합니다.
const timer = setTimeout(function(){
console.log('Paul!');
}, 3000); // 3초 후 해당 함수를 실행합니다.
clearTimeout(timer); //setTimeout 정보가 담긴 timer 상수를 종료
const timer = setInterval(() => {
console.log('Paul!');
}, 3000); // 3초 간격마다 해당 함수를 실행합니다.
clearInterval(timer); //setTimeout 정보가 담긴 timer 상수를 종료
'프론트 엔드 > 자바 스크립트 | Javascript' 카테고리의 다른 글
| 5. 배열 선언 및 활용 (0) | 2023.08.06 |
|---|---|
| 4. 조건문 및 반복문 (0) | 2023.08.06 |
| 3. 비교 연산자 (0) | 2023.08.06 |
| 2. 데이터 타입 총정리 (0) | 2023.07.24 |
| 1. 개념 및 변수 선언 (0) | 2023.07.23 |