1. 나이의 평균을 콘솔에 찍기!(남녀구분)

(이전에 렌더링 하던 스크립트에 이어 적는다.)

// 남녀의 평균나이를 담을 공간을 준비한다.
let maleAverage = 0;
let femaleAverage = 0;

function averageAge(data) {
    // JSON에서 남녀의 나이를 걸러서 담을 빈배열을 준비
    // 배열은 순회도 가능하고, 배열의 길이가 곧 인원수이기 때문에 배열!
    let female = [];
    let male = [];
    // 각 성별의 나이를 차곡차곡 더해줄 변수 s이다.
    let s = 0;

    // 여기서 이터레이터는 {...} 객체가 된다!
    for(const iterator of data){
        if (iterator.gender == 'male') {
            male.push(iterator.age);
        } else {
            female.push(iterator.age);
        }
    }
    // forEach는 순회는 하지만 새 배열은 만들지 않음
    male.forEach(i => s +=i)
    maleAverage = (s / male.length)
    // s를 초기화하지 않으면, 남자의 나이가 고대로 남아있게 됨
    s = 0;
    female.forEach(i => s +=i)
    femaleAverage = (s / female.length)
    // 요건 그냥 구분해서 보일 수 있게 이렇게 찍었다.
    console.log('maleAverage : ', maleAverage);
    console.log('femaleAverage : ', femaleAverage);
}

위의 함수를 온클릭 했을때, 실행시켜주는 버튼을 생성하면 끝!!

2. <th>를 클릭하면 정렬시키기

let click = true;

function sortTable(key) {
    if (click) {
        click = false;
        data.sort((a, b) => (a[key] < b[key] ? -1 : (a[key] > b[key] ? 1 : 0)));
    } else {
        click = true;
        data.sort((a, b) => (a[key] > b[key] ? -1 : (a[key] < b[key] ? 1 : 0)))
    }
    renderTable(data)
}

여기서 'click'은 "내가 클릭했다"의 상호작용의 개념이 아니다.

1. <th>에 온클릭 소트테이블을 걸면, 클릭했을때 소트테이블이라는 함수가 작동한다.
2. 이미 기존의 'click'이라는 변수는 참이기 때문에 if문이 실행된다.
3. 'click'이라는 변수가 다시 거짓으로 변경되고, 그 아래문이 실행된다.
4. data.sort뒤의 문장을 로직적으로 이해하는 단계는 아직은 무리이다.
   (우선 오름차순, 내림차순 정렬을 해주는 코드라고 이해하고, 필요시 꺼내쓴다)
5. 그렇게 정렬된 data를 다시 렌더링하는 함수가 실행되어야 화면이 바뀐다.