JavaScript - 유사 배열 객체 / Array.from() / 화살표 함수

유사 배열 객체

배열 처럼 보이지만, 사실은 배열이 아닌 객체를 말합니다.

대표적으로 자바스크립트의 함수에서 사용가능한 argumnets 객체가 있습니다.

function example(a,b,c) {
 
    for (let i = 0; i < arguments.length; i++){
    console.log(arguments[i]); 
    }
 
    return a+b+c;
 
}
 
example(1,2,3);

함수 내부에서 arguments라는 이름으로 배열처럼 사용하고 있습니다.

a,b,c로 들어오는 인자들에 접근할 수 있고, 마치 인자들을 하나의 배열로 묶어 제공하는 것 처럼 보이지만

length만 사용가능하고, 다른 Array 속성들은 사용 할 수 없습니다. 즉 배열에 사용 가능한 다른 내장 메서드들은

사용할 수 없기 때문에 배열이 아닌 유사 배열 객체라고 부르는 것 입니다.

 

Array.from()

Array.from()을 사용해서 위의 arguments 유사 배열 객체를 배열의 내장 메서드들을 사용 가능한

진짜 배열로 만들 수 있습니다.

 

Array.from()은 

• 유사 배열 객체 (length 속성과 인덱스를 갖는 요소를 가진 객체)
• 순회 가능한 객체 (Map, Set 등 객체의 요소를 얻을 수 있는 객체)

위의 조건들을 만족하는 경우 모두 Array.from()의 인자로 보내서 새로운 배열을 받을 수 있습니다.

String , Set , Map , arguments 등의 경우가 존재하는데 여기서는 arguments의 예제만 살펴보겠습니다.

function f() {
    return Array.from(arguments);
}
 
let newArray = f(1,2,3);
// newArray - > [1,2,3]의 배열 생성

Array.from()의 인자로 arguments를 넣으면 배열 메서드들을 사용할 수 있는 진짜 배열을 만들 수 있습니다.

 

화살표 함수

화살표 함수는 함수를 간단하게 표현하기 위한 방법입니다.

 

일반적인 함수와는 다르게 this나 super에 대한 바인딩이 없고 메서드로 사용할 수 없으며 생성자로 사용할 수

없습니다. 함수를 간단히 사용하기 위한 도구로 화살표 함수에 대한 다양하고 자세한 내용은 MDN사이트를

통해 공부하면 좋을 것 같습니다.

var elements = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];
 
// 아래는 배열을 반환함 : [ 8,6,7,9 ]
elements.map(function(element) {
    return element.length;
});
 
// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
elements.map(element => {
    return element.length;
});
 
// 화살표 함수에 들어가는 내용이 return문 딱 하나일때,
// return과 중괄호를 생략할 수 있다.
elemnets.map(element => element.length);
 
 

 

위 내용은 모두 MDN 사이트를 참고하였습니다 !

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions