JavaScript-function

kaydennna92·2022년 5월 11일
0

JavaScript

목록 보기
3/4

함수

함수 (function)

  • 특정한 일을 수행하는 코드의 집합
  • 재사용성 : 반복적인 일이 있다면 줄일 수 있다.
  • 유지보수성
  • 높은 가독성

일급함수 (first-class object)

  • 일반 객체처럼 모든 연산이 가능한 것
  • 함수의 매개변수로 전달
  • 함수의 반환값
  • 할당 할 수 있다.
  • 동일 비교 대상

고차함수 (Higher-order function)

  • 인자로 함수를 받거나 (callback function)
  • 함수를 반환하는 함수

함수
function add(a+b){
  return a+b ;
};

add(1, 2);
-------------------------------
function : 함수 정의 키워드
add : 함수의 이름
(a, b) : 매개변수, 인자, parameter
return : 결과값 반환
add(1, 2) : 함수 호출

  • 함수도 객체,

  • add라는 것은 함수 객체가 담긴 메모리의 주소를 가리키고 있다.

  • const sum = add; 라면, sum은 add가 가리키고 있는 함수 객체의 메모리 주소를 가리킨다.

  • Point! -> 함수의 이름은 함수를 참조하고 있다!!

1. basic!

function add(a, b){
    const result = a + b;
    return result
}

// 함수를 선언만 하고 호출을 하지 않으면 실행되지 않는다.

console.log(add(1, 2)) //함수호출, a -> 1, b -> 2를 인자로 넘겨준다.


// let lastName = '나';
// let firstName = '장엽';

// let fullName = `${lastName} ${firstName}`;
// console.log(fullName)

// let lastName2 = '김';
// let firstName2 = '싸피';

// let fullName2 = `${lastName} ${firstName}`;
// console.log(fullName)


// 위처럼 반복적인 작업을 함수를 이용하여 줄일 수 있다!
// 변경사항이 있으면 함수만 변경해주면 된다. (위의 코드처럼 하면 하나하나 수정해야 한다..-> 굉장히 귀찮음.)
function fullName(firstName, lastName){
    return `${lastName} ${firstName}`;
}

let lastName = '나';
let firstName = '장엽';
console.log(fullName(lastName, firstName))

2. memory

function add(a, b){
  return a + b; 
} // add 라는 변수는 함수객체가 존재하는 메모리의 주소를 가리킨다.
const sum = add; // add와 동일한 함수의 메모리 주소를 가리킨다.

// 결과는 동일.
console.log(sum(1,2));
console.log(add(1,2));
console.log(add()); // -> 인자를 전달하지 않으면? NaN! (undefined + undefined) 이므로..!

3. return

function add(a, b){
  return a+b;
}
const result = add(1, 2);
console.log(result);


//만약에 return이 없다면? 
function add(a, b){
}
const result = add(1, 2);
console.log(result); // undefined 

// return을 명시적으로 하지 않으면, 자바스크립트 엔진이 자동으로 undefined를 반환한다.

// return 활용 예시
// return을 함수 중간에 하게 되면 함수가 즉시 종료된다.
// 사용 예 : 조건이 맞지 않는 경우 함수의 도입 부분에서 함수를 일찍이 종료할 수 있다.

function print(num){
  if (num < 0){
    return undefined; // return; 으로 표현 가능 // 조건을 만족하지 않으면 함수 종료
  }
  console.log(num);
}
print(12);
print(-12);

4. parameter

// 매개변수의 기본값은 무조건 undefined
function add(a, b){
  console.log(a);
  console.log(b);
  return a + b
}
add() // 인자를 전달하지 않으면!
// [출력]
// undefined
// undefined

// 함수라는 객체는 유용한 프로퍼티가 있다. arguments
// 매개변수의 정보는 함수 내부에서 접근이 가능한 arguments 객체에 저장된다.
// 각각의 인자에 접근할 때 arguments[0], arguments[1], arguments[2]로 접근할 수 있다.
function add(a, b){
  console.log(a);
  console.log(b);
  console.log(arguments);
  return a + b
}

add(1,2,3);

// 매개변수에 기본값을 지정하고 싶을 때?
// 이를 default parameters!
function add(a = 1, b = 1){
  console.log(a);
  console.log(b);
  return a + b
};
add(); // 2


//Rest 매개변수 
//몇 개의 인자를 받는 지 모를때!!! 유용하다
1. 

function sum(...numbers){
  console.log(numbers);
}

2. 
function sum(a, b, ...numbers){
  console.log(a);
  console.log(b);
  console.log(numbers);
}

5. expressions

// 함수 선언문 function name () {}
// 함수 표현식 const name = function () {}
// 화살표 함수 const name = () => {}
//함수도 객체이기 때문에 다른 변수에 할당하거나 재할당할 수 있다!

let add1 = function(a,b){ // 무명함수!
	return a + b;
};
console.log(add1(1, 2));

// 화살표 함수
1.
sum = (a, b) => {
  return a + b;
}
console.log(sum(1, 2));

2.
add2 = (a, b) => a + b;
console.log(add2(1,2));


// 생성자 함수 const object = new Function(); 
// 함수는 값으로 계산될 수 있는 표현식이다.! 
//함수를 괄호로 묶으면 함수가 값으로 변환됨.

//IIFE (Immedicately-Invoked Function Expressions)
(function run() {
  console.log('run!!!');
})(); // 함수를 정의하면서 호출하고 싶을때! 이렇게 사용...

6. callback function

// 콜백함수
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// action -> 어떤 계산을 할 함수를 전달받는다.
// 이를 callback 함수라고 한다.
// 함수를 가리키고 있는 함수의 reference(참조값)가 전달됨.
// 그래서 함수는 고차함수 안에서 필요한 순간에 호출이 나중에 된다!
// 언제 쓸지는 몰라 ~ 나중에 쓸꺼야~ okay? 
function calculator(a, b, action) { 
  let result = action(a, b);
  console.log(result);
  return result;
}
calculator(1, 2, add); 
calculator(1, 2, multiply);
// add()라고 하면 함수가 호출되버림.
// add라는 이름만 넘겨주므로 함수의 객체 메모리 주소(reference)가 넘겨진다.

0개의 댓글