JavaScript- Object(2)

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

목적

• 페이지 로드 완료 후 버튼 클릭 이벤트를 표준 이벤트 모델(addEventListener)로 연결

핵심 코드

• #btn1 ~ #btn6 각각을 클릭하면 f_call1 ~ f_call6 실행

포인트

• 주석에 “고전적 이벤트 모델”이라 쓰셨는데, 실제로는 **고전적(onclick 속성 직접 지정)**이 아니라
  window.onload로 초기화 후 **표준 이벤트 모델(addEventListener)**을 사용하고 있습니다.

2) f_call1() : 객체 리터럴 기본 + 프로퍼티 접근 방식 + 축약 문법

목적

• 객체 속성 접근을 점 표기법 / 대괄호 표기법으로 비교
• 변수명을 그대로 키로 쓰는 프로퍼티 축약(shorthand) 보여주기

핵심 내용

키에 공백이 있는 경우 대괄호로 접근

var obj = {키: "값","user name" : "홍길동"};
obj.키
obj["user name"]

 

프로퍼티 축약

var myname = "홍길동";
var myage = 20;
var obj2 = { myname, myage };

f_call2() : 객체 메서드에서 this의 의미

목적

• 객체 내부 함수(메서드)에서 this가 객체 자신을 가리키는 상황을 설명

핵심 코드

var person = {
  name2: "윤인성",
  eat: function(food){
    `name은: ${this.name2} ...`
  }
};
person.eat("라면");

 

“this 없으면 local > global > window” 설명은 학습 맥락에서는 이해에 도움되지만,
실제로는 실행 컨텍스트(호출 방식)에 따라 this 바인딩이 달라지는 규칙이 핵심이다.
(예: person.eat()처럼 “객체.메서드 호출”이면 this는 person)

4) f_call3() : “객체 배열” + 런타임에 메서드 추가

목적

• 객체들을 배열에 넣고, 반복문으로 각 객체에 getSum/getAvg/toString을 동적으로 붙이는 방식 실습

동작 흐름

1. 학생 데이터(객체) 4개를 배열에 push
2. for (var i in studentArr)로 순회하며 각 객체에 메서드 추가
3. 다시 순회하며 #here에 출력 (toString()이 호출되어 문자열로 표시)

핵심 포인트

• toString()을 정의했기 때문에 studentArr[i]를 문자열로 출력 시 커스텀 문자열이 나옴
• 다만, 이 방식은 “각 객체마다 동일한 함수가 중복 생성”되는 구조라 메모리 효율은 낮음
  → 아래 prototype 방식(f_call4)가 더 정석

5) 생성자 함수 Student() + prototype 메서드들

목적

• 생성자 함수 패턴 + 프로토타입을 이용한 “공유 메서드” 구성

구성 요소

1. 생성자 함수

function Student(name,java,sql,web){
  this.이름 = name;
  this.자바 = java;
  this.sql = sql;
  this.web = web;
}

 

1. 프로토타입 메서드(공유 공간)

• getSum(): 총점
• getAvg(): 평균
• toString(): 출력용 문자열

포인트

• new Student()로 생성된 객체들은 위 메서드를 공유하므로 효율적

6) f_call4() : 생성자 함수로 객체 생성 + 화면 출력 + 배열 반환

목적

• Student 생성자 기반 객체를 만들고 배열로 관리
• toString() 결과를 #here에 누적 출력
• 생성된 배열을 리턴하여 다른 함수에서도 재사용 가능하게 구성

studentArr.push(new Student("홍길동",80,88,77));
...
hereObj.innerHTML += "<p>" + studentArr[i] + "</p>";
return studentArr;

7) f_call5() : String 내장객체 메서드 anchor() + 속성 조작

목적

• 문자열 메서드로 <a> 태그 생성 후 DOM 속성 변경

동작 흐름

1. "문자열 메서드".anchor()로 <a name="..."> 형태 문자열 생성
2. #here에 삽입
3. 생성된 a 태그에서 name 제거, href 추가

document.querySelector("#here > a").removeAttribute("name");
document.querySelector("#here > a").setAttribute("href","http://www.google.com");

 

8) f_call6() : Array 내장객체 join/sort/slice + 객체 정렬

목적

• 숫자 배열 정렬(오름/내림)과 비교 함수를 이해
• 화살표 함수(람다 스타일)로 comparator 작성
• 객체 배열(학생) 정렬: 평균/이름 기준
• slice()로 배열 복사

핵심 흐름

1. 숫자 배열 join

beforeStr = arr.join("**");

 

1. 오름차순 / 내림차순

arr.sort((a,b)=> a-b); // asc
arr.sort((a,b)=> b-a); // desc

 

학생 배열 생성(재사용)

var studentArr = f_call4();

 

평균 기준 정렬

studentArr.sort((a,b)=> a.getAvg() - b.getAvg());

 

배열 복사

var backupArr = studentArr.slice();

 

이름 기준 정렬(localeCompare)

studentArr.sort((a,b)=> a.이름.localeCompare(b.이름)); // asc
studentArr.sort((a,b)=> b.이름.localeCompare(a.이름)); // desc