유사배열은 실제 배열은 아니지만 배열과 유사한 동작을 하는 객체를 나타냅니다. 

유사배열 객체는 다음 특징을 가집니다:

1.인덱스를 사용하여 요소에 접근할 수 있어야합니다.

2.length 속성을 가지고 있어서 요소의 개수를 알 수 있어야합니다.

3.반복 가능(iterable)하므로 for...of 루프나 forEach와 같은 반복 메서드를 사용할 수 있습니다.

4.Array객체가 아니어서 .map등 사용이 안됩니다. Array 객체로 변환 후 사용해야합니다.

대표적 예시 : 문자열(String), 함수 인자(arguments), NodeList, TypedArray

//문자열(String): //문자열은 각 문자에 대한 인덱스로 접근할 수 있으며 length 속성이 있습니다.
const str = "Hello";
console.log(str[0]); // "H"
console.log(str.length); // 5

//arguments는 함수라면 처음부터 갖고 있는 숨겨진 속성입니다.
function example() {
    console.log(arguments[0]);// 1
    console.log(arguments.length);// 3
}
example(1, 2, 3); 

const elements = document.querySelectorAll("div");
console.log(elements[0]); // 첫 번째 div 요소
console.log(elements.length); // 요소의 개수

//TypedArray: Uint8Array, Int32Array와 같은 TypedArray 객체도 유사 배열입니다.
const uint8Array = new Uint8Array([1, 2, 3]);
console.log(uint8Array[0]); // 1
console.log(uint8Array.length); // 3

제너레이터(generator) 객체는 유사 배열이 아닙니다.

제너레이터 객체는 반복 가능한(iterable) 객체로, next() 메서드를 사용하여 값을 순차적으로 생성하고 반환하는 객체입니다.

function* gen(from=0, to=10, step=1){
    for( let i=from; i<to; i+=step)
        yield i;
}

const x = gen();
try{
    console.log( x.join(',') )
}catch(e){
    console.error('gen은 generator객체여서 join안됨', e);
}
console.log( x[3] ); //undefined , next()로 접근 
console.log(Array.prototype.join.call([...x], '|'));

display: inline-block; /* 또는 display: inline-flex; */

HTML요소에서 클래스 목록을 얻습니다. DOMTokenList 객체를 반환합니다.

관련 메소드는

add(className): 클래스 추가

remove(className): 클래스 삭제

toggle(className): 클래스 토글 (존재하지 않으면 추가, 존재하면 삭제)

contains(className): 클래스 포함 여부 확인

item(index): 클래스 목록에서 인덱스로 클래스 얻기

length: 클래스 목록의 길이

가 있습니다.

const element = document.getElementById("myElement");
// 클래스 추가
element.classList.add("newClass");
// 클래스 삭제
element.classList.remove("oldClass");
// 클래스 토글
element.classList.toggle("active");
// 클래스 포함 여부 확인
const hasClass = element.classList.contains("active");
console.log(hasClass);
// 클래스 목록의 길이
const classCount = element.classList.length;
console.log(classCount);

설정 하지 않았을때 (position: static ) 기본은 요소가 일반적인 문서 흐름에 따라 다른 요소와 겹치지 않고 자연스럽게 쌓이며 배치됩니다. top, right, bottom, left 속성 무시: static 위치 속성을 가진 요소는 top, right, bottom, left 속성을 사용하여 위치를 조절할 수 없습니다.

position: relative; 부모 요소의 컨텍스트 내에서 동작합니다.

position: absolute; 부모 요소의 컨텍스트 내에서 동작합니다.

position: relative;

부모 요소 내에서 자신의 원래 위치를 기준으로 상대적인 위치를 조절합니다.

부모 요소의 레이아웃 흐름에 영향을 미치지 않으며, 다른 요소와 겹치지 않습니다.

부모 요소의 위치를 변경할 때, position: relative;로 설정된 자식 요소도 함께 움직이지만, 다른 요소에 영향을 주지 않습니다.

position: absolute;

부모 요소 중에서 position 속성이 static이 아닌(기본 값) 첫 번째 부모 요소를 기준으로 위치를 결정합니다.

부모 요소의 레이아웃 흐름에서 제거되며, 다른 요소와 겹칠 수 있습니다.

부모 요소의 위치를 변경하면 position: absolute;로 설정된 자식 요소도 영향을 받아 위치가 변경됩니다.

position: sticky

스크롤될 때 일정 위치에서 고정되도록 하는 속성입니다.부모 요소의 영향을 받습니다.top, right, bottom, left 속성을 사용하여 고정되는 위치를 지정할 수 있습니다.

position: fixed;

viewport 기준 절대 좌표 고정입니다.

aliases: create, innit

npm init 와 동일한 명령어 입니다.

package.json을 생성합니다.

npm-init | npm Docs (npmjs.com)