JS
- 함수형 프로그래밍 (FP)
- 함수가 일급함수임을 이용해 전달받은 인자값을 중심으로 결과값을 반환하기 위해 함수를 사용하는 프로그래밍 방법.
- 객체지향 프로그래밍 (OOP)
- 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체로 만들고, 객체들간의 상호작용을 통해 로직을 구성하는 프로그래밍이다.
- 모든 데이터를 객체(object)로 취급하여, 객체가 처리 요청을 받았을 때, 객체 내부에 있는 기능을 사용해 요청을 처리하는 방식.
📓 일급 함수
일급 객체와 일급 함수에 대해 들었다.
🏷️ 일급 객체
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체다.
객체를 변수에 할당 + 파라미터로 넘기기 + 반환값으로 반환하기 등
🏷️ 일급 함수
함수를 일급 객체로 취급하는 것이다.
JS의 경우에는 함수도 객체로 표현이 가능하기 때문에 일급 객체 또는 일급 함수라 부를 수 있다.
JS는 일급 객체이기 때문에 콜백함수, 고차 함수, 클로저가 가능하다고 한다.
자세히는 다음 포스팅에서
📓 순수 함수
🏷️ No Side-Effects (참조 투명성) = Thread-Safe = 함수 정의할때 완전한 문장을 만들어야 함
동일한 입력에 대해 항상 동일한 출력을 반환하는 함수.
외부상태에 영향을 미치는 side effect가 없는 함수.
- 데이터의 불변성을 유지하기 위해 인자로 받은 값을 바꾸지 않고 복사본을 만들어서 조작해야 한다.
- 인자로 받은 값이 배열이나 객체같은 참조타입 이라면 .slice() .filter() .map() 이나 {...param} 로 복사한뒤 작업.
side effect : 함수 바깥 환경을 조작해서 같은 입력값에 대해 항상 같은 값을 리턴하지 못하는 것이 side effect다. (데이터 불변성 유지 X)
// 순수 함수
function add(a, b) {
return a + b;
}
console.log(add(3, 4)); //항상 같은 값을 출력함
console.log(add(3, 4)); // 7
console.log(add(3, 4)); // 7
// 순수함수 아님
let c = 5;
function add2(a, b) {
return a + b + c;
}
console.log(add2(2, 3)); // 10
c = 2;
// 같은 함수임에도 결과가 달라짐
console.log(add2(2, 3)); // 결과 : 7let D = 10;
function add3(a, b) {
D = b; //함수 내부에서 외부 변수 값을 재할당
return a + b;
}
console.log(add3(2, 5)); // 7
console.log(D);//외부 변수 D의 값이 5가 됨.밑의 코드의 경우도 순수함수가 아니다.
obj 객체가 {a : 1} 이었다. 근데 여기서 obj2가 test(obj)를 실행하여 obj를 반환 받았으니 결국 obj2의 값이 변경되면 obj(기존 객체 값)의 값도 같이 변경되는 것이다.
let obj = {a : 1}; // 주소값 0x01
function test(obj){
return obj;
}
let obj2 = test(obj) // 주소값 둘다 0x01
obj2.a = 50 // 객체 obj2의 값을 50으로 변경함.
console.log(obj2) // { a: 50 }
console.log(obj) // { a: 50 }- obj의 참조값이 복사되어 obj2에 할당하니 obj의 값도 같이 변경됨.
🏷️ 순수 함수 사용 이유
순수 함수를 사용하면 데이터 불변성이 지켜진다고 했다. 그 의미는 동작과 결과값의 예측이 쉬워진다는 뜻이다.
또한 side effect를 최소화할 수 있다.
- 코드 재사용 편리 + 디버깅 수월 + 유지보수 편리
🏷️ 불변성 지키는 이유
객체를 다룰 때 주소를 참조하여 값을 조회하는데 이 주소값을 통해 한 곳에서 값을 변경하여 다른 곳에서도 영향을 주지 않게 하기 위해서 불변성을 지킨다.
다시 순수함수의 경우를 보면
let obj1 = {val: 10};
function test(obj, b){
return {val: obj.val + b}
}
let a = test(obj1, 5);
console.log(obj1.val); // 10
console.log(a.val); // 15외부에 생성된 obj1을 직접 건드리지 않고 test 함수에서 val이라는 새로운 객체에 할당하여 반환했다. (생성된 객체의 값을 참조만 함)
📓 JS 값 반환 형태
var myname = 'magnus Eternal'
function testa(name){
var[firstname, lastname] = name.split(' ')
return{
firstname: firstname,
lastname: lastname
}
}
testa(myname) // { firstname: 'magnus', lastname: 'Eternal' }
function testb(name){
var [firstname, lastname] = name.split(' ')
return [
firstname,
lastname,
]
}
var [result, last] = testb(myname)
console.log(result, last) // 'magnus' 'Eternal'
var t = testb(myname)
console.log(t[0], t[1]) // 'magnus' 'Eternal'split(' ') 으로 firstname과 lastname에 각각 분리를 해서 testa로는 객체를 반환하고 testb는 배열을 반환하는 방식이다.
객체를 반환할 때는 firstname과 lastname에 정확한 명시를 해줬지만 배열에서는 result, last 처럼 자유롭게 작성이 가능하다.
당연히 배열이니 인덱스를 통해서도 출력 가능.
🔗 https://mozzi-devlog.tistory.com/11 - [JS] 일급 객체(First Class Object), 일급함수(First Class Function)란?
🔗 https://velog.io/@zuzokim/JS-%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98 - 순수함수
