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()...
✅ 어떤게 더 좋다고 말할 수는 없지만 보통 함수 선언문을 사용하고 콜백함수를 만들 때는 함수 표현식 중 화살표 함수를 많이 사용한다.
// 콜백 함수 (표현)식 //@ 나중에 실행 시켜줄게
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('올바르지 않은 주소입니다.');
}
)
arrow function
은 arguments
를 내장하고 있지 않다!!!
생성자(constructor)
를 내장하고 있지 않다.
장점: 다른 함수들 보다 속도가 빠르다.
단점: constructor를 내장하고 있지 않기 때문에 생성자 함수를 사용할 수 없다 ➡️ 함수로서의 일만 한다.
++++ 함수 표현식은 변수 선언만 호이스팅되고, 실제 함수 할당은 런타임에 이루어지므로, 할당되기 전에 호출할 수 없다. (호이스팅되지 않는게 아님!!!!)