배열연습

const files = [
    { name: 'file1.jpg', id: null }, 
    { name: 'file2.jpg', id: 123 },
    { name: 'file1.jpg', id: 456 },
    { name: 'file3.jpg', id: null },
    { name: 'file2.jpg', id: 789 },
];

여기서 name이 같은 파일들끼리 묶여 있으며, id 값이 있는 항목이 있습니다. 사용자가 id 값이 없는 요소(예: file1.jpg의 첫 번째 항목)를 클릭했을 때, 같은 파일 이름을 가진 항목 중에서 id 값을 출력하도록 해보기

 

첫번 째 방법

1. 아이디 값이 없는 요소 클릭 시, 해당 요소의 name을 기준으로 같은 파일을 찾음.
2. 해당 파일들 중 id 값을 갖고 있는 요소를 찾아서 그 값을 출력

// 예시 배열
const files = [
    { name: 'file1.jpg', id: null }, 
    { name: 'file2.jpg', id: 123 },
    { name: 'file1.jpg', id: 456 },
    { name: 'file3.jpg', id: null },
    { name: 'file2.jpg', id: 789 },
];

// 사용자가 클릭한 아이템 (id가 없는 파일)
const clickedItem = { name: 'file1.jpg', id: null };

// 클릭된 아이템의 name을 기준으로 해당 파일을 가진 항목을 찾고, id가 있는 항목의 id를 출력
function findFileWithId(files, clickedItem) {
    const sameFiles = files.filter(file => file.name === clickedItem.name);  // 같은 파일 찾기
    const fileWithId = sameFiles.find(file => file.id !== null);  // id가 있는 항목 찾기
    return fileWithId ? fileWithId.id : 'No ID found';  // id 값 반환 (없으면 "No ID found")
}

// 사용 예시
const result = findFileWithId(files, clickedItem);
console.log(result);  // 출력: 456 (file1.jpg에 대한 id 값)

1. files.filter(file => file.name === clickedItem.name)는 클릭한 파일 이름(clickedItem.name)과 같은 이름을 가진 모든 항목들을 필터시킨다.
2. sameFiles.find(file => file.id !== null)는 그 중에서 id 값이 존재하는 첫 번째 항목을 찾아낸다.
3. 해당 id 값을 반환하거나, 만약 id가 없다면 "No ID found"라는 메시지를 출력.

 

 

2번째 방법

const files = [
    { name: 'file1.jpg', id: null }, 
    { name: 'file2.jpg', id: 123 },
    { name: 'file1.jpg', id: 456 },
    { name: 'file3.jpg', id: null },
    { name: 'file2.jpg', id: 789 },
];

// 사용자가 클릭한 파일 (id가 없는 파일)
const clickedItem = { name: 'file1.jpg', id: null };

// 클릭된 파일 이름에 해당하는 파일을 찾아서 id가 있는 파일의 id를 출력
function findFileWithId(files, clickedItem) {
    // 동일한 파일을 찾아서 id가 있는 파일 찾기
    for (let file of files) {
        if (file.name === clickedItem.name && file.id !== null) {
            return file.id;  // id 값 반환
        }
    }
    return 'No ID found';  // id가 없으면 "No ID found"
}

// 사용 예시
const result = findFileWithId(files, clickedItem);
console.log(result);  // 출력: 456

설명

1. for 문을 사용하여 files 배열을 순차적으로 탐색한다..
2. 클릭된 파일과 동일한 name을 가진 파일을 찾고, 그 파일에서 id가 있는 경우 해당 id를 반환한다.
3. 만약 id가 없으면 "No ID found".

장점

• 코드가 간단하고 이해하기 쉬우며, 복잡한 메서드(filter, find)를 사용하지 않고 순차적으로 확인하는 방식이라 직관적임.
• 이 방법은 작은 배열에서는 효율적이고, 더 복잡한 로직이 필요 없을 때 적합함