JavaScript-Array

1) 초기화: window.onload = f_initial; / f_initial()

목적

• 페이지 로딩 완료 시 버튼 DOM을 잡아 이벤트를 연결

핵심 코드 흐름

• hereObj = document.querySelector("#here")로 출력 대상 확보
• 버튼 1~9를 querySelector("button:nth-of-type(n)")로 선택
• addEventListener("click", f_callN)로 각 기능 함수 연결

포인트

• nth-of-type는 “같은 태그(button)” 중 n번째를 선택
• 버튼이 늘어나면 선택자가 깨질 수 있어 실무에서는 id/class를 더 선호

2) 버튼1: f_call1() — forEach() 순회 출력

목적

• 배열의 각 요소를 순회하면서 index/value/원본 배열을 화면에 출력

핵심

• arr.forEach(function(element, index, arrObj){ ... })
• 콜백 함수의 파라미터(element/index/arrObj)와 arguments 접근을 둘 다 보여줌

출력

• index번째 값, 해당 값(element), 전체 배열(arrObj)을 <p>로 반복 출력

3) 버튼2: f_call2() — map()으로 새 배열 생성

목적

• 원본 배열은 유지하고, 변형된 새 배열을 만들기

핵심

var arr2 = arr.map(function(item,index,arrObj){
  return "변경값:"+item/10;
});

 

출력

• 원본 배열: 10,20,30,...
• 변형 배열: 변경값:1, 변경값:2, ...

4) 버튼3: f_call3() + f_filter() — filter() 조건 필터링

목적

• 특정 조건을 만족하는 요소만 걸러낸 새 배열 생성

조건 함수

function f_filter(item){
  return item%20 ==0;
}

 

5) 버튼4: f_call4() — every() 전체 조건 검사

목적

• 배열의 모든 요소가 조건을 만족하는지 true/false 반환

조건

return item%10 == 0;

 

결과

• 마지막 값 11이 10의 배수가 아니므로 전체 결과는 false

6) 버튼5: f_call5() — some() 일부 조건 검사

목적

• 배열 중 하나라도 조건 만족 시 true 반환

조건

return item == 5;

 

결과

• 배열에 5가 없으므로 false

7) 버튼6: f_call6() — JS Object → JSON 문자열(stringify)

목적

• JavaScript 객체를 JSON 문자열로 변환(서버 전송 형태)

핵심

var obj = {name: "홍길동", age :20 , major:"컴공"};
var str = JSON.stringify(obj);
hereObj.innerHTML = str;

 

출력

• {"name":"홍길동","age":20,"major":"컴공"} 형태의 문자열

8) 버튼7: f_call7() — JSON 문자열 → JS Object(parse)

목적

• JSON 문자열을 JavaScript 객체로 변환(클라이언트에서 사용)

핵심

var str = '{"name": "홍길동", "age" :20 , "major":"컴공"}';
var obj = JSON.parse(str);
console.log(str);
console.log(obj);

 

결과

• 콘솔에 문자열과 파싱된 객체가 출력됨
• 이후 obj.name, obj.age처럼 프로퍼티 접근 가능

9) 버튼8: f_call8() — fetch로 빗썸 “마켓 목록” 조회 후 테이블 출력

목적

• Open API 호출(fetch) → JSON 응답 → 테이블 렌더링

호출 API

• https://api.bithumb.com/v1/market/all?isDetails=false

응답 활용

• 각 항목에서
  • market
  • korean_name
  • english_name
    를 테이블 행으로 출력

핵심 포인트

• fetch().then(response => response.json())로 JSON 파싱
• 반복문으로 row HTML 누적 후 hereObj.innerHTML = output

주의(HTML 구조)

• 현재 코드에서 rowObj에 이미 <tr>...</tr>가 반복되는데,
• output에서 이를 다시 <tr>${rowObj}</tr>로 감싸고 있어 테이블 구조가 중첩될 수 있습니다.
  • 실무적으로는 <tr>${rowObj}</tr> 바깥 tr은 제거하는 편이 안전합니다.

10) 버튼9: f_call9() — fetch로 빗썸 “All ticker” 조회 후 동적 테이블 생성

목적

• 코인별 시세 정보를 받아 “동적 컬럼 헤더 + 다중 행” 테이블 생성

호출 API

• https://api.bithumb.com/public/ticker/All

테이블 생성 방식

(1) 헤더 생성

• jsObj.data["BTC"]의 프로퍼티 목록을 기준으로 컬럼 헤더 생성
  (BTC가 대표 스키마 역할)

(2) 본문 생성

• for (var prop in jsObj.data)로 전체 종목 순회
• prop == 'date'면 날짜 변환 처리 후 skip
• 나머지는 종목명 + 해당 종목의 속성값들을 td로 출력

(3) 날짜 처리

today = new Date(parseInt(jsObj.data["date"])).toISOString();