[목차]
01. 함수란?
💡
➡️ 코드를 저장 할 수 있는 수단이다.
➡️ function이라는 키워드로 선언하여 코드를 저장한다.
➡️ 함수를 호출을 하려면 먼저 선언이 되어 있어야 호출이 가능하다.
➡️ 자바스크립트 함수는 익명함수와 일반함수가 있다.
➡️ 함수 실행은 함수명 혹은 참조변수 (); → 함수 실행
02. 함수 선언
💡
➡️ 함수 선언 후에 {} → 스코프 (블럭, 유효범위)
➡️ 함수는 지역변수와 전역변수의 차이가 확실하다.
일반함수
👉🏻function 함수명() { }➡️ 일반함수는 호이스팅 기술을 지원한다.
[코드예제] 일반함수
// 호이스팅 가능. 그래서 선언 이전에 호출이 가능하다. fn(); // 선언 전에도 호출 가능 function fn() { console.log('일반함수 실행'); } fn(); // 선언 후에도 호출 가능
일급함수(익명함수)
👉🏻일급함수는 함수를 다른 함수에 매개변수로 전달이 가능하거나, 변수에도 할당이 가능한 함수이다.특징
👉🏻1️⃣ 무명의 리터럴로 생성할 수 있다.(익명함수) 즉, 런타임에 생성이 가능하다. (실행시점에 변수에 담긴다.)2️⃣ 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
3️⃣ 함수의 매개변수에 전달할 수 있다.
4️⃣ 함수의 반환값으로 사용할 수 있다.
[코드예제] 익명함수
// 익명함수는 대입을 해야 선언이 가능하다. // fn1(); // 익명함수는 평가시점이 아닌 실행 시점에 함수가 할당되어 선언 전에 호출 불가능 const fn1 = function() { console.log('익명함수 실행'); } fn1(); // 화살표함수 선언 const arrFn1 = () => { console.log('화살표 함수1 실행'); } const arrFn2 = () => console.log('화살표 함수2 실행'); arrFn1(); arrFn2();
03. 함수 호출
💡
➡️ 선언된 함수명으로 호출을 할 수 있다.
➡️ 함수명(); 방식으로 함수명 ‘()’를 붙여줘야 호출이 된다.
➡️ ‘()’에는 인수를 삽입하여 호출 할 수 있다.
➡️ 익명 함수를 호출시에는 대입된 변수명()를 하여 함수 호출이 가능하다.
[코드예제] 함수 호출
// 함수 선언 및 호출 // 1. 일반함수 선언 (호이스팅 대상) func(); // 일반함수는 선언부 이전 호출 가능 function func () { console.log('일반함수 func 실행'); } // 2. 익명함수 : 변수선언 = function () {} // 익명함수는 선언부 이전에 호출 불가능 const func1 = function() { console.log('익명함수 func1 실행'); } func1(); // 3. 화살표 함수 : 변수 선언 = () => {} // 화살표함수도 익명함수라 선언부 이전에 호출 불가능 const arrowFn3 = () => { console.log('화살표 함수 arrowFn3 실행'); } arrowFn3(); // 함수도 객체 타입으로 분류하기 때문에 주소 복사 가능 let copyFn1 = func1; let copyFn2 = arrowFn3; copyFn1(); copyFn2(); console.log(copyFn1 == func1, '같은 주소 여부확인'); console.log(typeof copyFn1, 'function'); // function 타입 연산 시 function문자열 반환 console.log(typeof null, 'null타입'); // null 타입 연산 시 object문자열 반환 console.log(typeof [], 'array'); // array 타입 연산 시 object문자열 반환
04. 매개변수가 있는 함수
💡
➡️ 함수 호출시 값을 삽입하여 호출을 하게 되면 매개변수로 받을 수가 있다.
➡️ 선언시 ‘()’안에 매개변수명을 지정할 수 있다.
➡️ 매개변수의 갯수만큼 호출 시 값을 넣어 함수를 호출 해야한다.
➡️ function 함수명(매개변수명, 매개변수명) { }
➡️ 매개변수 선언에는 var나 let 키워드가 필요없다.
[코드예제] 매개변수가 있는 함수
// 변수 선언 키워드 안써도 된다. 매개변수명만 선언 // 매개변수 갯수랑 인수 값이 안맞아도 출력이 된다. function exFn(){ console.log('exFn'); // 매개변수명을 선언하지 않더라도 arguments에 인수가 담겨있다. console.log(arguments); } exFn(2); function sumFn(){ let result = 0; for(let digit of arguments){ result += digit; } console.log(result); } function sumFn() { console.log('함수 오버로딩 없음'); // 마지막에 선언된 함수가 호출된다. } sumFn(1); sumFn(1, 2); sumFn(1, 2, 3); sumFn(1, 2, 3, 4); // 익명 함수 일 경우 const subFn = function() { let result = 0; let isFirst = true; for(let digit of arguments){ if(isFirst) { result += digit; isFirst = false; continue; } result -= digit; } console.log(result); } subFn(1, 2); // 화살표 함수 (arguments 없음) // 매개변수 한개 일때 () 없이 사용, 2개 이상일 때 () 사용 const multiFn = num1 => { console.log(num1); // console.log(arguments); } const multiFn1 = (num1, num2) => { console.log(num1 * num2); // console.log(arguments); } multiFn(1); multiFn1(1, 3); // 매개변수에 함수를 전달할 수 있다.(callback 함수) function callbackFn(callback){ callback(); } callbackFn(function(){ console.log('콜백함수 호출'); });
05. 반환 데이터가 있는 함수
💡
➡️ 함수 내부에 return 키워드를 사용할 수 있다.
➡️ return 키워드와 값을 지정하게 되면 함수를 호출한 곳에 값을 전달하게 한다.
➡️ return 키워드를 만날 경우 함수는 종료된다.
[코드예제] 반환 데이터가 있는 함수
function returnTestFn(){ return; } console.log(returnTestFn(), 'return; 의 결과'); // 반환값이 없다. undefined function returnTestFn(){ console.log('호출1'); return; // 함수종료 console.log('호출2'); } returnTestFn(); // 호출1 function returnTestFn2(flag){ console.log('호출1'); if(flag) return; console.log('호출2'); } let result = returnTestFn2(false); // 호출1 호출2 console.log(result); // 반환값이 없다. undefined function objFn(){ return {}; } const obj = objFn(); obj.name = '홍'; console.log(obj); // { name: '홍' } // 즉시 실행 함수, (함수)(); (function(){ console.log('즉시 실행함수'); })();
06. 고차함수
💡
함수를 반환하는 함수
[코드예제] 고차함수
function outterFn(){ return function(){ // return 값에 함수를 반환 console.log('반환함수실행'); } } const returnFn = outterFn(); console.log(returnFn); // 함수 출력 returnFn(); // 반환함수실행
06. 재귀함수
💡
➡️ 선언된 함수 내부에 자기 자신을 호출하는 방법
➡️ 재귀호출은 꼭 필요한 상황이 아니면 지양
[코드예제] 재귀함수
function selfFn(n){ console.log(`${n}번째 호출`); if(n == 10) return n; selfFn(n+1); } selfFn(1); // 1, 2, 3 .. 10번째 호출 // 팩토리얼 function selfFn2(n) { console.log(`${n}번째 호출`); if(n == 1) return n; return n * selfFn2(n-1); } console.log(selfFn2(5)); // 5*4*3*2*1 // 1~100까지 합 function selfFn3(n) { if(n==1) return n; return n + selfFn3(n-1); } let result3 = selfFn3(100); console.log(result3, '1~100까지의 합'); // 제시된 배열을 깊은 복사한 후 배열을 반환 // 반복문 사용없이 (재귀함수로) function deepCopyArr(arr, copyArr){ copyArr.push(arr[copyArr.length]); if(arr.length == copyArr.length) return copyArr; return deepCopyArr(arr, copyArr); } const arr = [100, 200, 300, 400]; const copyArr = deepCopyArr(arr, []); console.log(deepCopyArr(arr, [])); // [100, 200, 300, 400] console.log(arr == copyArr, 'false로 나오면 성공');
07. 내부함수
💡
함수 내부에 함수가 존재
[코드예제] 내부함수
function outterFn1(){ let num = 5; innerFn(); function innerFn(){ let num = 0; console.log(num); // 함수내부에 num을 찾고, 있으면 해당 값 출력 } } outterFn1(); // 0
08. 객체 생성자 함수
💡
➡️ 함수를 new 연산자를 활용하여 객체화 시킬 수 있는 방법이다.
➡️ new 연산자를 활용하여 객체화 되었을 시 Object형태로 변환
특징
👉🏻1️⃣ 함수 내부의 정의(멤버) this 키워드 활용2️⃣ this 키워드로 선언된 변수들은 외부에서 접근 가능
3️⃣ var 혹은 let으로 선언된 변수들은 외부에서 접근 불가능
4️⃣ this 키워드 혹은 함수가 확장이 되었다면 그 함수는 객체 생성자 함수이다.
5️⃣ 객체 생성자 함수 선언시 함수명은 주로 파스칼 표기법으로 한다.
프로토타입(prototype)
👉🏻1️⃣ 원형 : 객체를 만들기위한 구조를 가진 생성자 함수2️⃣ 원형에 메서드를 추가 할 수 있는 키워드
3️⃣ 객체화시 생성되지 않는 메서드를 호출 할 수 있다.
4️⃣ 원형에 추가된 메서드를 객체화된 대상들이 상속 받는다.
➡️ [코드예제] 메모리 절약을 위한 프로토타입(prototype) 사용
const arr1 = [100, 200, 300]; const arr2 = [300, 400, 500]; console.log(arr1); // 원형 기능을 확장해서 사용할 수 있다. Array.prototype.getTotal = function(){ let result = 0; for(let ele of this){ result += ele; } return result; } console.log(arr1.getTotal()); class Course { name = 'ICT융합 자바/스프링 개발자 양성과정'; getName(){ return this.name; } } class Round extends Course { constructor(gisu) { super(); this.gisu = gisu; } getGisu() { return this.gisu; } setGisu(gisu){ this.gisu = gisu; } } const round = new Round('ks47'); console.log(round.getName()); console.log(round instanceof Course); console.log(round instanceof Round);
this
👉🏻1️⃣ 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.2️⃣ 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
➡️ [코드예제] this
function thisFn(){ return this; // 전역쪽의 this. Object 객체를 가르킨다. } let resultThis1 = thisFn(); console.log(resultThis1); // Object function thisFn2() { function thisFn() { console.log(this); // Object 객체를 가르킨다. } thisFn(); } thisFn2(); // 호출시점의 객체 function ThisFn3() { this.name = '이름'; this.getThis = () => console.log(this);; } const thisFn3 = new ThisFn3(); thisFn3.getThis(); // 호출시점의 객체 ThisFn3 function ThisFn4() { this.name='이름'; this.getThis = function() { console.log(this); return function() { console.log(this); } } } const thisFn4 = new ThisFn4(); const subGetThisFn = thisFn4.getThis(); // 호출시점의 객체 ThisFn4 subGetThisFn(); // 리턴된 함수 호출. 호출시점의 객체 Object function ThisFn5() { return this; } const thisFn5 = new ThisFn5(); // 객체 생성 console.log(thisFn5); // ThisFn5 객체
[코드예제] 객체 생성자 함수
function Member() { this.memberId; this.memberPw; let memberLevel; // private 꼼수 this.setMemberId = (memberId) => { this.memberId = memberId; } this.getMemberId = () => { return this.memberId; } this.setMemberLevel = (levelName) => { memberLevel = levelName; } this.getMemberLevel = () => { return memberLevel; } } const member = new Member(); member.setMemberId('id001'); member.memberPw = 'pw001'; member.setMemberLevel('관리자'); let memberLevel = member.getMemberLevel(); console.log(member); // 객체안에 var, let은 보이지 않는다. console.log(memberLevel); // 관리자 class User { name = ''; // public #email = ''; // #(나이스샾) : private getName(){ return this.name; } setName(name){ this.name = name; } get email(){ console.log('get 메소드'); return this.#email; } set email(email){ console.log('set 메소드'); this.#email = email; } } const user = new User(); user.setName('홍길동'); user.email = 'test1'; // 프로퍼티에 직접 접근 console.log(user); // 객체안에 email은 보이지 않는다. console.log(user.email);
[코드예제] 인수가 있는 개체 생성자 함수
/* function MemberArgs(memberId, memberPw, memberLevel) { this.memberId = memberId; this.memberPw = memberPw; this.memberLevel = memberLevel; this.getMemberId = () => { return this.memberId; } this.setMemberId = (memberId) => { this.memberId = memberId; } } const memberInfo = new MemberArgs('id001', 'pw001', '관리자'); console.log(memberInfo); */ // 인수가 많을 때 객체로 만들어서 인수로 넣어준다. function MemberArgs(obj) { this.memberId = obj.memberId; this.memberPw = obj.memberPw; this.memberLevel = obj.memberLevel; this.getMemberId = () => { return this.memberId; } this.setMemberId = (memberId) => { this.memberId = memberId; } } const obj = { memberId : 'id001', memberPw : 'pw001', memberLevel : '관리자' } const memberInfo = new MemberArgs(obj); console.log(memberInfo); class UserArgs { #email; // private은 미리 선언되어 있어야 할당가능. 에러가 없음 constructor(name, email){ // constructor 생성자 함수 this.name = name; this.#email = email; } getName() { return this.name; } setName(name) { this.name = name; } get email() { return this.#email; } set email(email) { this.#email = email; } } const userInfo = new UserArgs('홍길동', 'ks47@ksmart.or.kr'); console.log(userInfo); // 객체안에 email은 보이지 않는다. private
09. 콜백 함수
💡
➡️ 함수의 매개변수로 함수코드를 받고 매개변수로 받은 함수를 호출하는 방식입니다.
➡️ 등록해놓은 함수가 특정 이벤트의 발동에 의해 실행이 되고 실행에 결괏값을 등록해놓은 함수를 실행하면서 인수로 얻어진 값을 던져준다.
➡️ 비동기화 처리시 주로 사용된다.
[코드예제] 콜백 함수
console.log('a 코드 실행'); let resultData = 0; setTimeout(() => { // 3초 뒤 블럭안에 코드들이 실행된다. console.log('b 코드 실행'); resultData += 5; }, 3000); console.log('c 코드 실행'); console.log(resultData); // 0, 즉시 실행되어 0값이 출력 // 특정 기능 function fn(callbackFn) { setTimeout(() => { let result = 30; // 특정함수를 실행 callbackFn(result); }, 2000); } // 오류 //resultData = fn(); // 특정 기능을 수행하는 함수 호출 //console.log(resultData, '<--'); // 특정 기능을 수행하는 함수 호출 fn(function(result){ //console.log(result, '<--'); }); // 숫자를 입력해서 결과를 누적하는 함수 function sum(result, digit, fn) { setTimeout(() => { // 1초뒤에 블럭안에 코드 실행 result += digit; fn(result); // fn매개변수 = function(result) {...} }, 1000); } sum(0, 1, function(result) { // sum 함수의 3번째 매개변수에 함수를 넘겨준다. console.log(result); // 1 sum(result, 2, function(result) { console.log(result); // 3 sum(result, 3, function(result) { console.log(result); // 6 }) }) }); const print = result => console.log(`배열의 합계 : ${result}`); const arr = [300, 450, 500]; sumArr(arr, print); // 배열의 합계 : 1200 function sumArr(arr, arrSum) { setTimeout(() => { let result = 0; for(let ele of arr) { result += ele; } arrSum(result); // arrSum 매개변수에 function(result) {..} }, 4000); }
10. 클로저
💡
➡️ 함수 실행시 상위 함수 내의 환경을 기억하고 있다.
➡️ 주로 콜백함수와 같이 쓰인다. (비동기적인 코드)
[코드예제] 클로저
function closureFn(){ let name = '홍길동'; return function() { // return에 함수 선언 console.log(name); // 해당 함수에 name을 찾고 없으면 상위함수에서 찾는다. } } const resultFn = closureFn(); resultFn(); // 홍길동 // 상위 함수에 누 function cntFn() { let cnt = 0; return function() { cnt += 1; // 현재 함수에 cnt를 찾고 없으면 상위함수에서 찾아서 대입 console.log(cnt); } } const increaseCnt = cntFn(); increaseCnt(); // 1 상위 함수에 있는 cnt(0)를 찾고 +1 해서 출력 increaseCnt(); // 2 상위 함수에 있는 cnt(1)를 찾고 +1 해서 출력 increaseCnt(); // 3 상위 함수에 있는 cnt(2)를 찾고 +1 해서 출력 // var vs let for(var i = 0; i < 10; i++) { // 1초가 되기전에 이미 i = 10이 되어 반복문 종료. setTimeout(() => { console.log(i); // 10이 1초동안 10번 찍힌다. }, i*1000); } for(let i = 0; i < 10; i++) { // 1초씩 후 콘솔이 찍힌다. setTimeout(() => { console.log(i); // 0~9까지 1초동안 찍힌다. }, i*1000); } // var, let 둘다 똑같은 출력 for(var i = 0; i < 10; i++) { // 즉시실행함수 (function(i) { setTimeout(() => { console.log(i); }, i*1000); })(i); }
11. 함수 실습
[코드예제] 함수
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>함수까지 실습</title> </head> <body> <h2>실습1</h2> 실습. 두수의 사칙연산의 결과를 반환하는 함수를 작성하시오. <script> const calc = (num1, str, num2) => { let result; switch (str) { case '+': result = num1 + num2; break; case '-': result = num1 - num2; break; case '*': result = num1 * num2; break; case '/': result = num1 / num2; break; default: result = '사칙연산을 할 수 없습니다.' break; } return result; } console.log(calc(1, '*', 2)); </script> <h2>실습2</h2> 실습. 아래의 실행코드에서 에러가 발생하지 않도록 메서드 내의 코드를 완성하여라. <script type="text/javascript"> const nObj = () => { return { nArr : [], addN(n) { this.nArr.push(n); return this; }, sum() { let sum = 0; for(let digit of this.nArr){ sum += digit; } return sum; } } } var result = nObj().addN(10).addN(10).addN(10).addN(10).addN(10).sum() console.log(result, '결과값'); </script> <h1>객체와 함수(메서드) 실습</h1> <h2>실습3</h2> 실습. 아래의 실행 코드를 보고 선언부를 완성하여라. <script type="text/javascript"> const obj = { // addArr(arr1, arr2, arr3) { // let sum = 0; // // for(let digit of arr1) { // // sum += digit; // // } // // for(let digit of arr2) { // // sum += digit; // // } // // for(let digit of arr3) { // // sum += digit; // // } // sum += this.sumArr(arr1); // sum += this.sumArr(arr2); // sum += this.sumArr(arr3); // return sum; // }, /* 배열의 arguments 이용 */ addArr() { let result = 0; console.log(arguments); for(let arr of arguments) { result += this.sumArr(arr); } return result; }, sumArr(arr) { let result = 0; for(let ele of arr) { result += ele; } return result; } } var result = obj.addArr([10,20,30],[40,50,60],[70,80,90]); console.log(result, '결과값'); </script> </body> </html>
[코드예제] 객체 생성자 함수
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>객체 생성자 함수 실습</title> </head> <body> <h2>실습1</h2> 실습. 사람의 이름, 키, 몸무게를 입력받아 체중체크 객체를 생성하고 사람 별로 정상체중을 확인하는 메소드를 만들고 호출하시오.<br> 정상체중 예시) (키 - 100) * 0.9 <br> 체중미달 예시) (키 - 100) * 0.9 - 5 <br> 체중초과 예시) (키 - 100) * 0.9 + 5 <br> 호출 예시) hongGilDongA = new CheckWeight('홍길동A', 172, 73); 출력 예시) 정상체중입니다, 체중미달입니다, 체중초과입니다. <script> // 함수사용 function CheckWeight1(name, height, weight) { this.name = name; this.height = height; this.weight = weight; this.getName = () => { return this.name; } this.setName = (name) => { this.name = name; } this.getHeight = () => { return this.height; } this.setHeight = (height) => { this.height = height; } this.getWeight = () => { return this.weight; } this.setWeight = (weight) => { this.weight = weight; } this.getResult = () => { let maxWeight = (this.height - 100) * 0.9 + 5; let minWeight = (this.height - 100) * 0.9 - 5; let result = `${this.name}`; if(this.weight > maxWeight) { result = `${result}님 체중초과입니다.`; } else if(this.weight < minWeight) { result = `${result}님 체중미달입니다.`; } else { result = `${result}님 정상체중입니다.`; } return result; } } var hongGilDongA = new CheckWeight1('홍길동A', 172, 69); var hongGilDongB = new CheckWeight1('홍길동B', 172, 73); console.dir(hongGilDongA) console.dir(hongGilDongB) console.log(hongGilDongA.getResult()); console.log(hongGilDongB.getResult()); // 클래스 사용 class CheckWeight2 { constructor(name, height, weight){ this.name = name; this.height = height; this.weight = weight; } getName() { return this.name; } setName(name) { this.name = name; } getHeight() { return this.height; } setHeight(height) { this.height = height; } getWeight() { return this.weight; } setWeight(weight) { this.weight = weight; } getResult() { let maxWeight = (this.height - 100) * 0.9 + 5; let minWeight = (this.height - 100) * 0.9 - 5; let result = `${this.name}`; if(this.weight > maxWeight){ result = `${result}님 체중초과입니다.`; } else if(this.weight < minWeight) { result = `${result}님 체중미달입니다.`; } else { result = `${result}님 정상체중입니다.`; } return result; } } var hongGilDongA2 = new CheckWeight2('홍길동A', 172, 69); var hongGilDongB2 = new CheckWeight2('홍길동B', 172, 73); console.dir(hongGilDongA2) console.dir(hongGilDongB2) console.log(hongGilDongA2.getResult()); console.log(hongGilDongB2.getResult()); </script> <h2>실습2</h2> 실습. 사람의 이름, 국어점수, 영어점수를 입력받아 학생 점수객체를 생성하고 학생의 평균을 확인하는 메소드를 만들고 호출하시오.<br> 출력예시)<br> getTestInfo() 호출시<br> 이름: 홍길동<br> 국어: 100점<br> 영어: 80점<br> getTestAvg() 호출시<br> 이름: 홍길동, 평균점수: 90점 <script> function TestScore1(name, kor, eng) { this.name = name; this.kor = kor; this.eng = eng; this.setName = (name) => this.name = name; this.getName = () => this.name; this.setKor = kor => this.kor = kor; this.getKor = () => this.kor; this.setEng = eng => this.eng = eng; this.getEng = () => this.eng; this.getTestInfo = () => { let result = ``; result += `이름 : ${this.name}\n`; result += `국어 : ${this.kor}점\n`; result += `영어 : ${this.eng}점\n`; return result; } } // arrow function 의 this는 선언될 때 그 위치의 객체를 가르킨다. TestScore1.prototype.getTestAvg = function() { let avg = (this.kor + this.eng) / 2; let result = `이름 : ${this.name}, 평균점수 : ${avg}점`; return result; } var kimMinSu = new TestScore1("김민수",80,90); var hongGilDongB = new TestScore1("홍길동",100,80); // kimMinSu.setKor(90); console.log(kimMinSu); console.log(hongGilDongB); let result1 = kimMinSu.getTestInfo(); let result2 = hongGilDongB.getTestInfo(); console.log(result1); console.log(result2); console.log(kimMinSu.getTestAvg()); console.log(hongGilDongB.getTestAvg()); class TestScore2 { constructor(name, score1, score2){ this.name = name; this.score1 = score1; this.score2 = score2; } setName(name) { this.name = name; } getName() { return this.name; } setScore1(score1) { this.score1 = score1; } getScore1() { return this.score1; } setScore2(score2) { this.score2 = score2; } getScore2() { return this.score2; } getTestInfo() { let result = `이름 : ${this.name}\n국어 : ${this.score1}\n영어 : ${this.score2}`; return result; } getTestAvg() { let avg = (this.score1 + this.score2)/2; let reuslt = `이름 : ${this.name}, 평균점수 : ${avg}점`; return reuslt; } } var kimMinSu = new TestScore2("김민수",80,90); var hongGilDongB = new TestScore2("홍길동",100,80); console.log(kimMinSu.getTestInfo()); console.log(hongGilDongB.getTestInfo()); console.log(kimMinSu.getTestAvg()); console.log(hongGilDongB.getTestAvg()); // 실습. Array에 getSum를 선언하고 [100,200,300]의 배열 요소들의 합산을 반환하는 getSum() 메소드를 호출하시오. const arr1 = [100,200,300]; const arr2 = [10,20,30]; const arr3 = [1,2,3]; const arr4 = [1000,2000,3000]; Array.prototype.getSum = function() { let result = 0; for(let ele of this) { result += ele; } return result; } console.log(arr1.getSum()); console.log(arr2.getSum()); console.log(arr3.getSum()); console.log(arr4.getSum()); </script> </body> </html>
[코드예제] 콜백함수
// 프로토타입 구현 Array.prototype.eleExist = function(value) { let isExist = false; for(let ele of this) { if(value == ele) { isExist = true; break; } } } //1. 아이디 중복체크 확인 function idCheck(id, callback){ setTimeout(function(){ const dbId = ['id001', 'id002', 'id003', 'id004']; // 방법1. 기본 /* let isExist = false; for(let ele of dbId) { if(id == ele) { isExist = true; break; } } */ // 방법2. arr 메서드 사용 let isExist1 = arr.includes(id); // 방법3. 프로토타입으로 구현 let isExist2 = arr.eleExist(id); callback(isExist1); },1000); } // confirmFn의 함수기능 중복결과에 따라 alert으로 // 회원가입이 가능한 경우 : 회원가입이 가능한 아이디입니다. // 회원가입이 불가능한 경우 : 회원가입이 불가한 아이디입니다. // 콜백함수를 활용해서 id 중복체크여부를 콘솔로 출력하시오. const confirmFn = result => { let message = '회원가입이 가능한 아이디 입니다.'; if(result) message = '회원가입이 불가한 아이디 입니다.'; alert(message); } idCheck('id002', confirmFn); //2.다음의 코드를 실행할 수 있는 함수를 정의하시오 //2초 후에 배열의 합산을 콘솔에 출력한다. const consolePrintFn = (arr, result) => console.log(`${arr}의 합산: ${result}`); arrSumTest([150,300,200,600], consolePrintFn); function arrSumTest(arr, sumArr) { let result = 0; for(let ele of arr) { result += ele; } sumArr(arr, result); } // testArr.searchIdx(검색값); 검색값이 있으면 배열의 인덱스 값 반환 // 없으면 -1 반환 const testArr = [150, 300, 200, 600]; Array.prototype.searchIdx = function(value) { let idx = -1; /* for문 사용시 for(let i = 0; i < this.length; i++) { if(this[i] == value) { idx = i; break; } } */ // for in 사용시 for(let i in this) { if(this[i] == value){ idx = Number(i); // for in 은 string 타입 반환 break; } } return idx; } // arr 내장객체 console.log(testArr.indexOf(600)); // Array 내장객체 프로토타입으로 만든 메서드 console.log(testArr.searchIdx(600));
[코드예제] 콜백함수(이벤트와 비동기화 코드)
<h2>이벤트와 비동기화 코드 예</h2> <button type="button" id="myBtn">클릭</button> <script type="text/javascript"> const $myBtn = document.getElementById('myBtn'); let cnt = 0; // 화살표 함수 this (선언시점) const btnEventFn1 = () => console.log(this); // function 키워드 함수의 this (호출시점) const btnEventFn2 = function() {console.log(this);} $myBtn.addEventListener('click', function() { console.log(`클릭 횟수 : ${++cnt}`); }); $myBtn.addEventListener('click', btnEventFn1); $myBtn.addEventListener('click', btnEventFn2); </script>
[코드예제] 콜백함수(이벤트 콜백데이터 활용)
<h2>이벤트 콜백데이터 활용 예제</h2> <div id="myText" style="position: absolute;">한국스마트정보교육원</div> <script type="text/javascript"> const $body = document.querySelector('body'); const $myText = document.querySelector('#myText'); /* document.addEventListener('mousemove', function() { $myText.style.left = event.x + 'px'; $myText.style.top = event.y + 'px'; }) */ </script>
[코드예제] 클로저(버튼 클릭시 카운터 증가)
<button type="button" id="ctnBtn">클릭</button> <h4 id="result"></h4> <script> const $ctnBtn = document.querySelector('#ctnBtn'); const $resultEle = document.querySelector('#result'); const cntArrowFn = (cnt => () => { ++cnt; if(cnt % 10 == 0) cnt = 1; return cnt; })(0); /* const testFn = (function(cnt) { return () => { cnt++; if(cnt % 10 == 0) cnt = 1; return cnt; } })(0); */ $ctnBtn.addEventListener('click', function() { $resultEle.textContent = `클릭횟수 : ${cntArrowFn()}`; }); </script>
tag : #javascript #함수 #선언 #호출 #고차함수 #재귀함수 #매개변수 #콜백함수 #객체 #생성자 #원형 #prototype #클로저
Uploaded by N2T