23.7.10 TIL

김진주·2023년 7월 10일

TJL(Today Jinju Learned)

목록 보기

21/35

📌함수 표현식

📌arguments

arguments는 JS 함수 내부에서 사용되는 특별한 객체이다.
이 객체에는 함수에 전달된 인수(argument)를 포함하고 있다.

arguments 객체는 배열 유사 객체(Array-like object)로서, 배열의 일부 메소드(예: length, forEach)를 사용할 수는 있지만, 진짜 배열은 아니기 때문에 배열의 다른 메소드(예: push, pop)는 사용할 수 없다. 하지만 다음과 같이 arguments 객체를 진짜 배열로 변환할 수 있다.

// slice를 빌려써서 배열로 만드는 방법 
// Array의 슬라이스라는 기능을 빌려써서 
// arguments 진짜 배열로 바꿔 realArray에 담았다. (instance method) 
  
   let realArray = Array.prototype.slice.call(arguments);
   realArray.forEach(function(item) {
     total += item;
   })
   Array.from() (Static method)
/* ------------------------------------------------ */

 //% Array.from() (Static method)
   let realArray = Array.from(arguments);
   realArray.forEach(function (item) {
     total += item;
   });

/* ------------------------------------------------ */

  // spread syntax    69~85 
  // 스프레드 문법을 사용하여 배열로 바꿈 
  let arr = [12, 40, 100];
   let realArray = [...arguments];
   
   realArray.forEach(function (item) {
     total += item;
   });
 /* ------------------------------------------------ */

  //% spread syntax + Array.reduce 
  let realArray = [...arguments];
   return realArray.reduce((acc,item) => { //acc - 누적값
    return acc + item
   }, 0) // initValue 최초값

📌즉시 실행 함수

// 즉시 실행 함수 (표현)식
// Immediately Invoked Function Expression - 변수의 보호를 위해 탄생
let IIFE;


// 변수의 보호
// 은닉화 캡슐화 

const MASTER = (function (){//선언부
  var x =10; 
   let uid = 'ajttk753!@'

   return {
    getKey() {
      return uid;
    }
   };
})()//실행부

// 장점: 선언부는 매개변수를 실행부는 인수를 가지는데 즉시실행함수에서는 뭔가를 받았을 때 인자의 이름을 변경하여 사용할 수 있다.

console.log(MASTER.getKey());// MATSTER 변수를 통해서만 접근할 수 있음

🤔함수인데 왜 객체처럼 쓰는 것이 가능할까?
✅ JavaScript에서 함수도 결국 객체로부터 만들어져 객체의 일종이기 때문이다..!
JavaScript는 "함수형 프로그래밍"이라는 개념을 지원하며, 함수를 일급 객체로 취급한다.
이는 함수를 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수에서 반환할 수 있는 것을 의미 함수는 "Function"이라는 내장된 객체 타입의 인스턴스입니다.
∴ 함수는 객체처럼 속성과 메서드를 가질 수 있습니다.
ex)
함수의 속성 - name, length...
함수의 메서드 - call(), apply(), bind()...

🤔함수 선언문과 함수 표현식 중 어떤 것이 더 좋을 까?

✅ 어떤게 더 좋다고 말할 수는 없지만 보통 함수 선언문을 사용하고 콜백함수를 만들 때는 함수 표현식 중 화살표 함수를 많이 사용한다.

📌콜백(callback) 함수

// 콜백 함수 (표현)식 //@ 나중에 실행 시켜줄게
let callbackFunctionExpression = function(callback) {
// const callback = function() { console.log('콜백 함수 실행!)} 내부적으로 일어나는 일

  callback();
};

callbackFunctionExpression(
  function() {
    // console.log('콜백 함수 실행');
  }
)
<*--------------------------------------------------*>
const movePage = function(url,success,fail){

  if(url.match(/http.+www/) && typeof url === 'string'){ // url의 문자열이고 http.+www 값이 들어가면 실행
     success(url)
  }else{
     fail()
  }
}

movePage(
  'www.naver.com', // ==> fail
  function(url){
    console.log('성공 몇초 뒤 해당 페이지로 이동합니다.');
    
    setTimeout(() => {
      window.location.href = url
    }, 3000);
    
  },
  function(){
    console.log('올바르지 않은 주소입니다.');
  }
)