배열에 속성할당하기

정규표현식 공식문서를 보다가 exec() 함수를 console.log()에 찍어봤다.

const myRe = new RegExp("d(b+)d", "g");
const myArray = myRe.exec("cdbbdbsbz");

console.log(myArray);

이렇게 찍어보니 결과가

[ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz', groups: undefined ]

이런식으로 나왔다.

근데 내가 아는 상식으로는 배열에 객체가 들어가면 들어갔지 저렇게 중괄호도 없이 index : 1 과 input : ‘abcde’ 이렇게 생으로 들어가는게 가능한건가? 하고 배열을 만들어봤다.

이렇게 뜨고

, 가 필요하다는 에러가 떴다.

뭐지? 저거는 함수 만드는 사람들이 어떠한 처리를 해두어서 원래는 불가능한데 저게 가능한건가? 라고 생각하고 넘어가려다가 궁금해져서 찾아봤다.

찾아보니 exec()함수는 배열에 ‘dbbd’와 ‘bb’를 기본값으로 추가한 후, index, input, groups 속성을 배열 객체에 직접할당하여 만들 수 있다고 했다. 그래서 해봤다.

const arr = [
    1,
    2,
]

arr.index = 1;
arr.input = "abcde";
arr.group = undefined;

console.log(arr);

이렇게 하니 결과가 내가 원하는대로

[ 1, 2, index: 1, input: 'abcde', group: undefined ]

이렇게 나왔다.

하지만 좀 신기한게 있었는데, 이렇게 속성으로 배열에 데이터를 넣으면 forEach나 .length로 확인할때는 이러한 속성들을 고려하지 않는다는 점이였다.

이것도 고려하고 arr.input으로 접근도 해봤다.

const arr = [
    1,
    2,
]

arr.index = 1;
arr.input = "abcde";
arr.group = undefined;

console.log("forEach로 돌렸을 때")
arr.forEach((v) => {
    console.log(v);
})

console.log("for문으로 돌렸을 때")
for(let i = 0; i<arr.length; i++){
    console.log(arr[i]);
}

console.log("배열의 길이 확인");
console.log(arr.length);

console.log("배열의 속성에 접근");
console.log(arr.input);

확인해봤을 때

속성은 배열의 길이에는 포함이 안되지만 속성으로 접근은 되었다. 신기했고 이것이 어디에 쓰일지도 궁금했다.

4가지 사용되는 곳이 있었다.

1. 메타데이터 저장
2. 함수 또는 상태 추가
3. 도메인 특화 구조
4. 프로토타입 또는 빠른 해결책

1. 배열에 메타데이터 추가

배열에 저장된 데이터에 대한 추가 정보나 메타데이터를 함께 저장하고 싶을 때 사용한다.

예를 들어 배열이 파일의 내용을 담는다면, 해당 파일의 이름, 생성날짜, 작성자 등의 정보를 배열의 추가적인 속성으로 지정하는데 사용된다.

아래는 예시코드이다.

// 문자열 데이터와 메타데이터를 포함하는 배열을 생성하는 함수
function createProperty(strings, fileName, date, author) {
    const arr = strings.slice(); // 문자열 데이터를 배열로 복사
    arr.metadata = { // 메타데이터를 배열 속성으로 추가
        fileName: fileName,
        date: date,
                author : author,
    };
    // 메타데이터를 출력하는 함수를 배열 속성으로 추가
    arr.printMetadata = function() {
        console.log(`파일 이름: ${this.metadata.fileName}`);
        console.log(`작성일자: ${this.metadata.date}`);
                console.log(`작성자 : ${this.metadata.author}`);
    };
    return arr;
}

const myData = createProperty(['사과', '복숭아', '딸기'], '과일 DB', '2024-02-18', '홍길동');
console.log(myData); // 배열 데이터 출력
myData.printMetadata(); // 메타데이터 출력

이런식으로 사용하는 것이구나를 알았다.

근데 굳이 이렇게 사용해야 하나? 라는 생각이 들었다.

그냥 객체의 속성에 배열을 담고, 속성안에 정보같은 것들을 담아서 사용하면 될거 같았다.

const fileObj = {
    data : ["사과", "복숭아", "딸기"],
    title : "과일 DB",
    date : "2024-02-18",
    author : "홍길동",

    print : function(){
        console.log(`파일데이터 : ${this.data}`);
        console.log(`파일이름 : ${this.title}`)
        console.log(`작성일자 : ${this.date}`)
        console.log(`작성자 : ${this.author}`)
    }
}

console.log(fileObj);
fileObj.print();

이렇게 사용하는게 가독성이 좋을 것 같았다.

찾아보니깐 배열에 속성을 담는 것은 JavaScript에서 유연함을 보여주는 예시 중 하나이긴 한데, 코딩 관행에서는 드물게 사용되는 방식이라 권장되지 않는다고 했다. 그래서 나머지 사용예시에 대한 예시코드는 찾아보지 않기로 했다.

결론

JavaScript에는 배열에 속성을 추가할 수 있는 유연한 방식이 가능하다는 것을 배웠고, 그냥 이런게 있다~ 라는것을 알고, 나중에 이런 코드가 나왔을 때 당황하지 않고 왜 forEach 돌렸는데 포함이 안되는거지?? 라는 의문을 가지고 삽질하는 것을 방지할 수 있는 효과가 있을 것 같다.