유사 배열 객체 (array-like object)

💡 유사 배열 객체란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다. (p. 141)

💡 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있으며, length 프로퍼티를 갖기 때문에 유사 배열 객체이고 for 문으로 순회할 수도 있다. (p. 141)

✅ 예시를 통해 알아보기

var a = [1, 2, 3];
a; // [1, 2, 3]
var b = document.querySelector("body").children 
// HTMLCollection [script, style, div ...]

위 예제에서 a는 배열, b는 유사배열이다.

Array.isArray(a); // true
Array.isArray(b); // false

배열인지 판단해주는 Array.isArray 메서드를 사용하면 확실하게 구분되는 것을 알 수 있다. b처럼 []로 감싸져 있지만 배열이 아닌 것을 유사배열이라고 부른다.

✅ 유사배열의 특징

const js = {
	0: 'DOM',
	1: 'is',
	2: 'very',
	3: 'hard',
	length: 4
};

• key 값으로 숫자를 가지고, length 값을 가지는 객체.
• 배열처럼 js[0], js[1], js.length 같은 것을 모두 활용할 수 있다.

• 배열은 JavaScript의 원시 자료형이 아닌 객체형에 속하기 때문에 객체처럼 동작한다. 배열 자체가 객체에 순서를 지정하려고 만든 것.

✅ 유사배열과 배열을 구분해야 하는 이유

배열이 아니기 때문에 배열에 사용하는 메서드(forEach, map, filter, reduce 등)을 사용할 수 없다.

a.forEach(function(a) { console.log(a); }); 
// 1, 2, 3
b.forEach(function(a) { console.log(a); }); 
// Uncaught TypeError: els.forEach is not a function

✅ 유사배열에서 배열 메서드를 사용하려면?

Array.from() 메서드

• 유사 배열 객체를 얕게 복사해 새로운 배열 객체를 만든다.
• 새로운 배열 객체에는 배열 메서드를 사용할 수 있다.

Array.from(b).forEach(function(c) { console.log(c) });
a.forEach(function(d) { console.log(d); });
// 1, 2, 3

• 얕은 복사란?

• 참조값을 복사할 때, 변수가 객체의 참조를 가리키기 때문에 복사된 변수도 객체가 저장된 메모리 공간의 참조를 가리킨다.
• 복사를 하고 객체를 수정하면, 두 변수는 똑같은 참조를 가리키기 때문에 기존 객체를 저장한 변수에 영향을 끼친다.
• 이렇게 객체의 참조값(주소값)을 복사하는 것을 얕은 복사라고 한다.

출처 :

[MDN] Array.form()

**[JavaScript] 유사 배열 객체(Array-like objects)**

**배열과 유사배열**

**[JS] - 얕은 복사와 깊은 복사**

콜백 함수

💡 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 한다. (p. 184)

다른 표현으로는, ‘함수 안에서 실행하는 또 다른 함수’.

✅ 콜백함수의 정의

1. 어떤 함수의 인자로 넘겨지거나,
2. 어떤 이벤트에 의해 호출되어지는 함수

• 인자 :

Parameter(매개변수)는 함수를 정의할 때 사용되는 변수를 의미.

Argument(인자)는 실제로 함수가 호출될 때, 넘기는 변수값을 의미.

function plus (num1, num2) {
	return num1 + num2;
}
// num1과 num2는 parameter이다.

plus(10, 20);
// 10과 20은 argument이다.

✅ 예제 1

function fn(arg){
	arg();
}
 
val = function() { console.log("callback!"); }
fn(val) // callback!

현재 상황

• fn이라는 함수가 선언된다.
• arg라는 매개변수를 받아서, arg() 를 함수로 호출한다.
• fn은 arg라는 함수를 받아서 호출하는 함수다!

함수 호출 과정

• 맨 마지막 줄에서 fn(val)의 형태로 호출.
  • fn 함수에 val 이라는 함수를 인자(입력값)으로 제공해서 호출.
• val은 fn 안에서 arg로 전달된다.
• arg라는 이름을 갖게 되고 arg()를 통해 호출된다.

즉, val은 지금 바로 실행되진 않지만 다른 함수의 입력값으로 전달되어 다른 함수에 의해서 나중에 호출된다.

✅ 예제 2

function onCableConnected(){
	print("케이블이 연결되었습니다");
};

//케이블이 연결될 때 마다 전달된 onCableConnected가 호출된다고 가정
setOnCableConnected(onCableConnected);

↑ 충전 케이블을 연결하면 “케이블이 연결되었습니다”가 표시된다고 가정하는 코드.

• 케이블을 연결한다.
• onCableConnected()에 의해 setOnCableConnected가 호출된다.

setOnCableConnected 는 ‘어떤 이벤트에 의해 호출되어지는 함수’의 조건을 충족.

따라서, 콜백함수라고 할 수 있다.

💡 해외 커뮤니티에서는 ‘call at the back’. 즉, ‘함수를 호출한 다음 그 뒤에서 호출되어 할 일을 지시하는 함수’의 개념으로 설명하기도 한다.

출처:

[JS] 콜백 함수(Callback Function)란?

콜백 함수(Callback)의 정확한 의미는 무엇일까?