반응형
JAVASCRIPT 함수 개념에 대해 알아보겠습니다.
함수 Function
function add(a, b) {
return a + b;
} //함수 정의
add(1, 2); //함수 호출
function
- 함수 정의 키워드add
- 함수 이름(a, b)
-parameter
매개 변수, 인자return
- 결괏값 반환add(1, 2)
- 함수 호출
중요 Point
- 함수 단위로 작은 단위의 일들을 묶어야 한다.
- 수행하는 일을 잘 나타낼 수 있는 이름을지어야 한다.
- 매개변수 이름도 의미 있게지어야 한다.
- 함수도 객체(object)이기 때문에 메모리 상에 Hip에 주소가 할당되게 된다.
function add(a, b) {
return a + b;
}
const sum = add;
함수의 이름은 함수를 참조하고 있다.
즉, sum
이라는 변수는 함수의 객체 주소를 가리키고 있다.
기본
function add(a, b) {
console.log('함수 출력');
return a + b;
}
const result = add(1, 2);
console.log(result); // 3
// example 2
function myName(lastName, firstName) {
return `${lastName}, ${firstName}`;
}
let lastName = '김';
let firstName = '서근';
console.log(myName(lastName, firstName));
let lastName2 = '김';
let firstName2 = '미진';
console.log(myName(lastName2, firstName2));
메모리
function add(a, b) {
return a + b;
}
const sum = add;
//add와 sum의 메모리 주소는 동일하다.
console.log('sum:', add(1, 2));
console.log('add:', sum(1, 2));
// 인자 값을 전달하지 않으면?
// 함수 인자 값인 a와 b가 undefined이 되고,
// undefined끼리 더해 리턴을 하기 때문에 숫자가 아닌 NaN이 된다.
function someNumber(a, b) {
console.log(a);
console.log(b);
return a + b;
}
console.log(someNumber()); //NaN
리턴 undefined
// 함수에서 리턴값을 정해주지 않으면 코드상에서 자동으로 undefined이 반환된다.
function add(a, b) {
// return a + b;
}
const result = add(1, 2);
console.log(result); //undefined
// 그렇기 때문에 return이 필요없는 경우엔 return 키워드를 작성할 필요가 없다.
function print(text) {
console.log(text);
}
print('안녕하세요'); //안녕하세요
// 언제 활용할까?
// 사용예 : 조건이 맞지 않을 때 함수 도입부분에서 함수를 일찍 종료시킴
// return == return undefined
// 함수 내에서 조건문을 적용해보자
// num이 12보다 크고 100보다 작거나 같으면 출력하지 않고
// 그 외 값을 출력한다.
// 즉, return을 사용하면 원하는 조건이 아닐때 함수를 일찍 종료시킨다.
function printNumber(num) {
if (num > 12 && num <= 100) {
return; // undefined
}
console.log(num);
}
printNumber(101); //101
printNumber(99); //출력 안됨 (조건이 맞지 않아서 함수를 일찍 종료시켰음)
매개변수
// 매개변수의 기본값은 undefined
// 매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장이 된다.
function sum(a, b) {
console.log(a);
console.log(b);
console.log(arguments);
return a + b;
}
console.log(sum(1, 2));
console.clear();
// 매개변수로 기본값을 넣어줄 수 있다.
function sum2(a = 1, b = 2) {
return a + b;
}
sum2(); //3
console.clear();
// Rest 매개변수
// 몇개의 인자를 받아 올지 모를때 사용한다.
function sum3(...numbers) {
console.log(numbers);
}
sum3(1, 2, 3, 4, 5);
console.clear();
// ...numbers 앞에 a, b, c와 같이 인자를 넣어주면 이를 제외한 값을 출력한다.
function sum4(a, b, c, ...numbers) {
console.log(a); //1
console.log(b); //2
console.log(c); //3
console.log(numbers);
[4, 5];
}
sum4(1, 2, 3, 4, 5); //4, 5
함수 표현식 / 화살표 함수
화살표 함수는 function 키워드를 생략할 수 있고, 함수 이름을 정해주지 않고도 간단하게 함수를 표현할 수 있다.
// 이 함수 표현식을
function add(x,y) {
let temp = x + y;
return temp
}
add(1, 3) //4
// 화살표 함수로 똑같이 표현 가능
add = (x,y) => {
let temp = x + y;
return temp
}
add(1, 3) //4
//함수 이름을 정해주지 않고도 표현 가능
//함수 이름이 없을 땐, 앞 뒤에 () 를 추가해준다.
((x,y) => {
let temp = x + y;
})
(1, 3) //4
// 함수 선언문 : function name() {}
/** 함수 표현식 : const name = fun≠≠ction() {} */
let add = function (a, b) {
return a + b;
};
console.log(add(1, 2)); //3
/** 화살표 함수 const name = () => {} */
add = (a, b) => {
return a + b;
};
console.log(add(1, 2));
/** 별다른 일을 하지않고 어떤 값응 바로 리턴하는 경우엔 화살표와 대괄호 모두 생략 가능하다*/
let sum = (a, b) => a + b;
console.log(sum(1, 2)); //3
/** 생성자 함수 const object = new Function(); **/
/** IIFE(Immediately-Invoked Function Expressions) 함수를 정의하면서 바로 호출하고 싶을때 사용한다. */
// 많이 사용 되지는 않음
(function hello() {
console.log('안녕!');
})();
콜백 함수
일급 객체 first-calss object
함수가 일반 객체처럼 모든 연산이 가능한것. 즉 함수로 아래와 같은 모든 기능일 사용할 수 있다.
- 함수의 매개변수로 전달
- 함수의 반환값
- 할당 명령문
- 동일 비교 대상
고차 함수
- 인자로 함수를 받거나 (콜백 함수),
- 함수를 반환하는 함수를 고차 함수라고 한다.
// 콜백함수
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
/** action은 외부로 부터 주어지는 함수 즉 콜백 함수라고 한다. */
function calculator(a, b, action) {
let result = action(a, b);
console.log(result);
return result;
}
//즉, a와 b는 num으로 가져오되, action 부분에는 변수 함수로 정해준 이름을 넣어주면 된다.
//이것이 콜백함수의 형태이다. (호출 하지 않고주소만 받아옴)
// 전달된 action은 콜백함수라 함.
// 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는것이 아닌 함수를 가리키고 있는 함수의 래퍼런스(참조값)가 전달된다.
// 그렇기에 함수는 고차함수 안에서 필요한 순간에 호출이 나중에 된다.
calculator(3, 2, multiply); //6
calculator(1, 3, add); //4
calculator(10, 2, divide); //5
// 함수내부에서는 정의하는 시점에 action 즉 콜백함수 부분에 어떤 값이 올지 모른다.
// 함수의 래퍼런스를 받아서 필요한 순간에 호출하기 때문에 조건에 맞지 않는다면 영원히 호출되지 않는다.
function calculator2(a, b, action1) {
if (a < 0 || b < 0) {
return;
}
let result = action1(a, b);
console.log(result);
return result;
}
calculator2(-1, -2, add); // 조건에 맞지 않기때문에 콜백함수가 실행되지 않는다.
불변성 Immutability
// 정말 중요한 내용
//! ⭐️ Immutability 불변성
//! mutable 변경할 수 있는
// 함수 내부에서 외부로부터 주어진 인자값을 변경하는것은 매주 좋지 않다.
// 상태변경이 필요한 경우, 새로운 상태를 만들어 반환해야 한다.
// 원시값 - 값에 의한 복사
// 객체값 - 참조에 의한 복사 인것을 다시 기억하자
// function age(num) {
// console.log(num);
// }
// const myAge = 20;
// console.log(myAge); //20
// 그런데 여기서 함수 내부에 외부로 부터 주어진 인자값을 변경한다면?
function age(num) {
num = 12;
console.log(num);
}
const myAge = 20;
age(myAge); //12
console.log(myAge); //20
//12가 출력되는것을 볼 수 있다. 이유는
/*
myAge가 age함수로 메모리 주소가 전달이 되고 출력이 시작되면서 num은 12로 재지정 되므로 myAge는 12가 된다.
myAge를 한 번 출력해본다면 20이 나오는것을 확인할 수 있는데, 20을 함수로 전달해서 인자값이 12로 바뀌었기 때문에 이렇게 함수를 짜는것은 매우 좋지 않다 ❌❌❌
*/
// 다른 예를 들어보자
// function Idcard(string) {
// console.log(string);
// }
// const Seogun = { name: '서근' };
// Idcard(Seogun); //{ name: '서근' }
// 하지만 여기서 함수 내부에 인자 값을 바꾼다면?
function Idcard(string) {
string.name = '미진'; //❌❌❌외부로 부터 주어진 인자를 내부에서 변경하지 말자!! ❌❌❌
console.log(string);
}
Seogun = { name: '서근' };
Idcard(Seogun); //{ name: '미진' }
// 함수 내무에서 무언가를 바꿔야 한다면 아래와 같이 작성할 수 있다. 배열편에서 다룸
function chageName(obj) {
// 이름 부터 변경한다는 느낌을 주도록
return { ...obj, name: '서근' }; // 반환할때는 새로운 오브젝트 만들기
}
읽어주셔서 감사합니다🤟
'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
[JS] 애드센스 디스플레이 광고 반응형 광고 2개 삽입하는 방법 (2) | 2022.09.11 |
---|---|
[JS] 페이지 로딩시 스크롤 막는 방법 (2) | 2022.09.10 |
[JS] 내부링크를 현재 창으로 열도록 해주는 방법 (0) | 2022.09.07 |
(JS) 이미지의 src를 변경하는 방법 (8) | 2022.08.23 |
[JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() (2) | 2022.08.23 |