pre-training JavaScript (8) 함수 , 객체

💻 국비 8 일차

---

 

📚 함수

• 오브젝트를 다루는 함수  ( 객체를 다룬다 )

객체를 인자로 전달받는 함수

// 객체로 전달하지 않고 값을 하나씩 전달 받음.
function sample(no , name , ban , kor , eng , math , sci , his , tech){
	// 매개변수가 많은 상태
}  

// 불편
sample(39,"기선",2,39,20,50,60,70);

// 객체로 값을 전달 받는 경우
function sample(student){

}

// 가독성이 뛰어남
sample({
	no : 39,
    name "기선",
    ban : 17,
    kor : 39,
    eng : 20,
    math : 50,
    sci : 60 , 
    tech : 70
    });

 

// 객체를 인자로 전달받는 함수
function check(score){
    let total = score.kor + score.eng + score.math;
    let average = total / 3;

    // 60점 이상이면 합격
    // 그외에는 불합격
    if(average >= 60){
        return "합격" ;
    }else {
        return "불합격";
    }
}

// 객체 자체를 인자,인수로 받아서 score1에 저장
// passed1변수는 check함수를 score1객체를 인자로 호출해  return으로 반환
let score1 = {kor:100 , eng:100 , math:100};
let passed1 = check(score1);
console.log("첫번째 시험 결과 : ",passed1);

// check함수에 직접 바로 객체 인자를 주고 passed2 에 저장
let passed2 = check({kor:80 , eng: 60 ,math:40});
console.log("두번째 시험결과 : ",passed2);

// 위에 것과 다른점은 줄바꿈 밖에 없음
// 가독성 보기 좋으라고 줄바꿈 사용함
let passed3 = check({
    kor : 70,
    eng : 90,
    math :60
})
console.log("세번째 시험결과 : ",passed3);

---

• 인자로 매개변수에 기능도 전달해줄수 있다.

• 매개변수로 다른 함수를 전달받는 함수

function plus(num1,num2){
    let result = num1 + num2;
    console.log("덧셈결과 : ", result);
    console.log();
}

function minus(num1,num2){
    let result = num1 - num2;
    console.log("뺄셈 결과 : ", result);
    console.log();
}

// 매개변수로 다른 함수를 전달받는 함수
function operator(value1 , value2 , fn){
    fn(value1, value2);
}


operator(100 , 200 , plus);
operator(100 , 200 , minus);
operator(100,200,function(x,y){
    let result = x * y ;
    console.log(
        "곱셈결과 : ",result
    )}
)

function divide(num1,num2){
    let result = num1 / num2;
    console.log("나누기 결과 :", result);
}

operator(100,10,divide);

• 함수를 정의 한다
• 그 후에 함수를 호출 하는 방식

📌 동작 방법

• operator( 100 , 10 , divide);  operator 함수를 100 , 10 , divide 함수를 인자로 전달해서 호출한다
• operator 함수 안에서 fn(value1 , value2) 가 실행이 되는데 fn은 divide 함수 
• divide(100,10)가 호출
• divide 함수 안에 100을 10 으로 나눈 결과 10 이 result 변수에 저장이됨
• 나누기 결과 : 10 이 출력된다

---

📚 객체 

• 날짜 객체

속성 : 시간대 , 년도 , 월 , 일 , 시 , 분 , 초 , 오전/오후 . 요일..
기능 : 날짜/시간 변경 , 출력기능

• 성적 객체

속성: 이름 , 과목명 , 국어 , 수학 , 영어
기능 : 출력기능 , 총 점수 조회 , 평균 점수 조회

// 속성과 기능을 모두 포함하는 객체

let score1 = {
    // 속성 property
    name : "기선",
    kor : 67,
    eng : 55,
    math : 60,

    // 기능 method
    getTotal: function(){
        let total = this.kor + this.eng + this.math;
        return total;
    },
    getAverage : function(){
        let average =this.getTotal() / 3;
        return average;
    },
    print : function(){
        console.log("--- 성적 정보 ---");
        console.log("이름 : ",this.name);
        console.log("국어 : ",this.kor);
        console.log("영어 : ",this.eng);
        console.log("수학 : ",this.math);
        console.log("총점 : ",this.getTotal());
        console.log("평균 : ",this.getAverage());
    }
}

// print()를 호출한 객체의 주소 값 ?
score1.print();


// console.log(score1);


// let total1 = score1.getTotal();
// console.log("총점 : ",total1);

// let average1 = score1.getAverage();
// console.log("평균 : ", average1);

---

• 생성자 함수를 이용해 객체 생성

// 객체 리터럴
let score = {
	name : "기선",
    kor :100 ,
    eng : 30,
    math : 50
    getTotal:function(){
    	let total = this.kor + this.eng + this.math;
        return total;
        }
    }

✔ 생성자 함수는 꼭 첫글자 대문자로 !

// 틀린버전 
Score("기선" , 27 , 90 , 93);

// 생성자 함수는 반드시 new 라는 키워드 사용
new Score("기선" , 27 , 90 , 93);

function Score(name , kor , eng , math){
    // property 생성 , 매개변수로 전달받은 값을 property에 대입
    this.name = name;
    this.kor = kor;
    this.eng = eng;
    this.math = math;

    this.getTotal = function() {
        let total = this.kor + this.eng + this.math;
        return total;
    }

    this.getAverage = function(){
        let average = this.getAverage()/3
        return average;
    }

	    this.print = function(){
        console.log("--------성적정보---------")
        console.log("이름 : ",this.name);
        console.log("국어 : ",this.kor);
        console.log("영어 : ",this.eng);
        console.log("수학 : ",this.math);
        console.log("총점 : ",this.getTotal());
        console.log("평균 : ",this.getAverage());
        console.log();
    }

}

let sc = new Score("기선" , 27 , 90 , 93);
let s1 = new Score("김유신" , 100 , 100 , 20 );
let s2 = new Score("김시민" , 30 , 60 , 100 );
let s3 = new Score("한명회" , 90 , 100 , 90 );

console.log(s1);
console.log(s2);
console.log(s3);

sc.print();
s1.print();
s2.print();
s3.print();

---

📌  window ( 참조변수 ) 

Window 객체 ( 자바 스크립트 글로벌 객체 )

• console ← Console 객체 ( 화면 출력과 관련된 객체 )
• document ← Document  객체 ( 우리가 웹페이지에서 보는 문서 정보를 가지고 있음 , 웹 html) 
• location ← Location 객체 ( 웹 브라우저 주소창에 보이는 현재 표시된 주소 ) 
• history ← History 객체 ( 웹 페이지 방문 이력정보 )  // history.back()   history.forward()

▶ window.console.log() 인데  window를 적지 않고 사용한다면 글로벌 객체에서 찾은뒤
생략 한 뒤에 console.log()를 사용 한다