일급객체
함수를 변수나 상수의 값과 같이 다루는 언어에 있음.
javascript도 그 중 하나인 언어라는거즤 (☞ﾟヮﾟ)☞.
함수는 객체이니까 참조형이다.
즉, 함수 또한 다른 무언가의 값으로 들어갈 수 있음. 즉 객체와 배열의 값으로도 할당 가능.
일급 객체의 특성
- 상수 또는 변수에 할당될 수 있음
- 다른 함수에 인자로 전달될 수 있음
- 다른 함수의 결과값으로서 반환될 수 있음
1. 할당
let person = {
name: '홍길동',
age: 30,
married: true,
introduce: function (formal) {
return formal
? '안녕하십니까. 홍길동 대리라고 합니다.'
: '안녕하세요, 홍길동이라고 해요.';
}
};
console.log(person.introduce(true));
console.log(person.introduce(false));코드를 입력하세요이렇게 객체의 함수 프로퍼티를 메서드 methods라고 불렀었다.
근데 ⭐ES6⭐ 부터 메서드의 정의가 달라졌음(단축 표현 메서드만 가리킨다)
2. 인자로 전달
함수가 다른 함수를 인자로 전달 받는다.
📌 전달 받는 함수를 고차함수
📌 전달 되는 함수를 콜백함수
let list = [1, 2, 3, 4, 5];
function doInArray (array, func) {
for (item of array) {
func(item);
}
}
// console.log - console이란 객체에서 log란 키에 할당된 함수
doInArray(list, console.log);여기서 doInArray가 고차함수고, console.log가 콜백함수이다.
function doNTimes (func, repeat, x, y) {
let result = x;
for (i = 0; i < repeat; i++) {
result = func(result, y);
}
return result;
}
console.log(
doNTimes((x, y) => x * y, 3, 5, 2),
doNTimes((x, y) => x / y, 3, 5, 2),
);(x, y) => x * y, 3, 5, 2), (x, y) => x / y, 3, 5, 2) 와 같이
변수나 상수에 할당되지 않아 이름이 없는 애들을 익명함수라고 부른다
위의 코드같이 인자로 들어가는 순간 이름이 생긴다. (맞나?)
3. 결과값으로 반환
그니까 요 함수라는 것도 다른 함수로부터 return이 가능하다는 것.
const add = (a, b) => a + b;
const sub = (a, b) => a - b;
const mul = (a, b) => a * b;
const div = (a, b) => a / b;
function comb3ArmFuncs(armFunc1, armFunc2, armFunc3) {
return (x, y) => armFunc3(armFunc2(armFunc1(x, y), y), y);
}
const add_mul_sub = comb3ArmFuncs(add, mul, sub);
const mul_add_div = comb3ArmFuncs(mul, add, div);
const div_add_mul = comb3ArmFuncs(div, add, mul);
/*실행*/
console.log(
add_mul_sub(10, 4),
mul_add_div(10, 4),
div_add_mul(10, 4)
);매개변수
arguments
- 함수 내에서 사용 가능한 지역 변수.
- 배열의 형태를 한 객체임 사실 배열은 아닌데 배열처럼 동작한다. 유사배열이라고 함
- 함수 호출시 전달된 모든 인수들을 배열 형식으로 가진다
// 💡 타입에 안전한 버전
function getAverage() {
let result = 0, count = 0;
for (const num of arguments) {
if (typeof num !== 'number') continue; // continue는 loop 하나만 넘김
result += num; // result에 그 값을 더하고
count++; //하나씩 올려줌
}
return result / count;
}
console.log(
getAverage(2, '가', 8, true, 5)
);재귀함수
어떠한 함수 안에서 해당 함수를 또다시 호출 하는거
자기 자신을 호출하는 함수. 잘못사용하면 무한 루프에 빠짐😥
그런데 한 함수가 다른 함수를 호출할때마다 컴퓨터 메모리에 스택이 쌓임
그래서 너무 많이 반복되겠다 싶으면 loop문을 사용하는게 좋음
재귀함수를 계속 쓰다가 스택이 점점 쌓이게 되다 보면 메모리의 한도를 넘어가게 됨
= 이게 stack overflow
즉시실행함수 IIFE
대장님이 쓰시던 함수.........(익명함수)
(function(){
console.log('hello world!')
})();jQuery에서도 쓰시던 구문이었는데, 도통 이해가 가지 않았음.
👨🌾 대장님 말씀 왈. 쉽게 이야기하면 감옥같은거지. 다른것과 꼬이지 않고 하나의 모듈처럼 작동하는···
라고 하시는데 처음인 으읭? 하다가 요새 조금씩 이해가 되는 상황.
이것저것 파보니 요즘은 잘 사용 안한다는 구문이라는데
여기는 합니다.. 해요.. 정부기관은 쓴다구여....
- 우선 얘는 딱 한번만 사용될 함수에 사용한다.
- 전역 변수들을 사용하지 않고, 복잡한 기능을 일회성으로 실행할 때
- 다른 코드들과의 변수명이나 상수명 충돌을 막기 위해 (특히 많은 코드들이 사용될 때)
근데 이걸 사용한 이유가 var 때문이다. 얘가 블록 스코프 밖에서도 사용이 가능하기때문.
오늘날 const와 let이 있으니
let initialMessage;
{
const month = 8;
const day = 15;
const temps = [28, 27, 27, 30, 32, 32, 30, 28];
let avgTemp = 0;
for (const temp of temps) {
avgTemp += temp
}
avgTemp /= temps.length;
initialMessage = `${month}월 ${day}일 평균기온은 섭씨 ${avgTemp}도입니다.`;
};
console.log(initialMessage);
console.log(month); // 새로고침 후 const를 var로 바꾸고 실행해볼 것👏👏👏 요러케!!! 요러케!!! 사용한다고 한다!
불변성 immutability
let x = 1;
let y = {
name: '홍길동',
age: 15
}
let z = [1, 2, 3];
function changeValue (a, b, c) {
a++;
b.name = '전우치';
b.age++;
c[0]++;
console.log(a, b, c);
}
changeValue(x, y, z);
console.log(x, y, z);실행해 보면 원시타입인 x은 변경이 되지 않았지만, 참조타입인 y와 z는 변함
- 원시 타입 : 인자로 들어간 함수 내에서의 변경에 영향 받지 않음
- 실제 값이 아니라 복사된 값이 들어갔기 때문 - 참조 타입 : 인자로 들어간 함수 내에서 요소가 변하면 실제로도 변함
- 복사된 값도 같은 객체나 배열을 가리키기 때문
⭐️ 함수에 주어진 인자를 변경하는 것은 좋지 않음
- ❌ 외부의 환경을 변경하는 함수는 위험!
- 이상적인 함수: 받은 값들만 처리하여 새 값을 반환 - 정 바꾸고 싶다면 함수 밖에서 함수의 반환값으로 바꾸자.
생성자함수
일반적으로 대문자로 시작하고 객체들을 양산해내는 생성자 함수로 이해하면 된다.
- 👉🏻 function Cong(){} 이렇게
// 생성자 함수
function YalcoChicken (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
}
}
// 인스턴스 생성
const chain1 = new YalcoChicken('판교', 3);
const chain2 = new YalcoChicken('강남', 17);
const chain3 = new YalcoChicken('제주', 24);
console.log(chain1, chain1.introduce());
console.log(chain2, chain2.introduce());
console.log(chain3, chain3.introduce());- 여기서 this는 생성자 함수로 만들어질 객체를 가리킴(= 인스턴스 instance라 부름)
- this.~로 생성될 인스턴스의 프로퍼티들 정의
- 생성자 함수는 new 연산자와 함께 사용
- 암묵적으로 this 반환
- 생성자 함수에서는 메서드 정의 불가 - 객체 리터럴과 클래스에서는 가능
어떠한 객체에 프로퍼티를 함수 내에서 사용하려면 this 사용
👇🏻 function으로 선언된 함수는 일반적으로 생성자 함수의 기능을 갖음
생성자 함수로 만들어진 객체
function YalcoChicken (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
}
}
const chain1 = new YalcoChicken('판교', 3);
console.log(chain1);
// 본사에서 새 업무를 추가
// 프로토타입: 본사에서 배포하는 메뉴얼이라고 이해
YalcoChicken.prototype.introEng = function () {
return `Welcome to Yalco Chicken at ${this.name}!`;
};
console.log(chain1.introEng());
console.log(new YalcoChicken('강남', 17).introEng());