JavaScript 문법 종합 3주차(숙제)

Q1. 가장 아래의 코드가 실행 되었을 때, “Passed ~” 가 출력되도록 getAge 함수를 채워주세요

// 제시된 틀
var user = {
    name: "john",
    age: 20,
}

var getAged = function (user, passedTime) {
		// 여기를 작성해 주세요!
}


var agedUser = getAged(user, 6);

var agedUserMustBeDifferentFromUser = function (user1, user2) {
    if (!user2) {
		    console.log("Failed! user2 doesn't exist!");
	  } else if (user1 !== user2) { 
        console.log("Passed! If you become older, you will be different from you in the past!")
    } else {
        console.log("Failed! User same with past one");
    }
}

agedUserMustBeDifferentFromUser(user, agedUser);

// Answer

// user객체에 다음과 같은 정보가 있음
var user = {
    name: "john",
    age: 20,
}

// user객체와 passTime숫자를 인자로 받는 함수를 getAged변수로 지정
var getAged = function (user, passedTime) {

    // result도 객체
    var result = {};
    
    // prop는 user객체의 키값을 의미(name age) 
    // 만들어둔 result객체에 user객체의 프로퍼티 키값을 복사
    for (var prop in user) {
        result[prop] = user[prop];
    }

    // 그대로 복사된 result객체의 age의 value에 인자로 받은 passedtime를 더하도록 함
    result.age += passedTime; 
    
    return result;

}
//console.log(getAged) // [Function: getAged]


// agedUser은 매개변수 user객체와 6을 넣은 함수가 작동
var agedUser = getAged(user, 6);
// console.log(agedUser) //{ name: 'john', age: 26 }


// agedUserMustBeDifferentFromUser는 인자로 user1, user2를 인자로 받는 함수를 변수
var agedUserMustBeDifferentFromUser = function (user1, user2) {
    // 즉 user1->user, user2->agedUser 이 들어가는 것 
    // user1 = user
    // user2 = getAged(user, 6) -> function (user, 6) { }
    
        console.log(user1); // { name: 'john', age: 20 }
        console.log(user2); // { name: 'john', age: 26 }
    
        if (!user2) {
                console.log("Failed! user2 doesn't exist!");
          } else if (user1 !== user2) { 
            // 
            console.log("Passed! If you become older, you will be different from you in the past!")
        } else {
            console.log("Failed! User same with past one");
        }
    }
    
    agedUserMustBeDifferentFromUser(user, agedUser);
    // 즉 user1->user, user2->agedUser 이 들어가는 것

var getAged = function (user, passedTime) {
   
    // spread operate(전개구문) -> ...사용 배열이나 객체를 전개하는 문법
    // 배열[]을 전개 할 때는 (), 객체{}를 전개 할 떄는 {}로 묶어야함
    // user은 객체니까 {}
    let agedpeople = {...user} //{ name: 'john', age: 20 }
    agedpeople.age += passedTime
    return agedpeople;

}

---

👌for in 구문에 대해서 숙지가 되었다.

var obj = {
    x : 1,
    y : true,
    z : 'jaehee'
};

for (var k in obj) {
    console.log(k + " : " + obj[k]);
}​

// for in 문의 문법

for ( 변수 in 객체식 ) {
    문장
}

for in문은 객체{ }에서 프로퍼티의 키를 열거하는 구문
-> 프로퍼티란 {name(이름/키) : value(값)} 의 형태로 이루어져 있으며, object의 속성이다.(object는 property의 모음)
즉, 위의 예제 객체 obj 에는 세 개의 프로퍼티가 있다()

for (var k in obj) {

    console.log(k); // x y z 출력

}

프로퍼티의 키를 열거하는 구문으로 obj객체의 key들을 변수k에 담음 그래서 x y z가 콘솔에 출력

for (var k in obj) {

    console.log(k + " : " + obj[k]);
    // obj의 키값 : obj 프로퍼티의 값

}

 

프로퍼티의 값을 출력하고 싶을때는 object["title"]="value" 형태로 작성, 대괄호 사용으로 obj[k]식으로 나타냄

예제에서 변수로 지정된 k는 obj객체의 프로퍼티의 key값을 의미하고, obj객체의 value(값)을 가져오고 싶다면 대괄호를 이용해 줌 -> obj[k]

---

👌spread operator(전개구문)에서 알게 된 것

반복 가능한(iterable) 객체에 적용할 수 있는 문법, 배열이나 문자열 등을 아래처럼 풀어서요소 하나 하나로 전개시킬 수 있다. 

// 배열
const arr1 = [0, 1, 2];
console.log(...arr1); // 0 1 2 

// 객체
let arr2 = {
    name: "nbc", 
    age: 30
}

console.log(...arr2); 
// error
// Object 자체는 iterable 객체가 아니며, 아래와 같이 사용하면 에러가 발생

let result = {...arr2}
console.log(result); // { name: 'nbc', age: 30 }

배열[]을 전개 할 때는 ( ), 객체{ }를 전개 할 떄는 { }로 묶어야함

const user = { name: 'Kim', city: 'Seoul' };

// 프로퍼티 복사, 추가
user = { ...user, age: 28 };
console.log (user); // { name: 'Kim', city: 'Seoul', age: 28 }

// 프로퍼티 복사, 수정
user = { ...user, name: 'John', age: 30 }
console.log(user); // { name: 'John', city: 'Seoul', age: 30 }

객체에서 spread연산자를 이용하면 객체의 프로퍼티를 업데이트 하거나 복사할 수 있다.

---

2. 출력 값에 대한 설명하기_thisbinding관련

Not Francis Ngannou VS John Jones
It is John Jones VS Ciryl Gane

// Ciryl Gane인 변수 fullname
var fullname = 'Ciryl Gane'

// 함수에서의 this의 경우 함수는 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미한다.
// 메서드경우 호출 주체를 명시할 수 있기 때문에 this가 호출의 주체가 된다.(해당 객체를 의미한다.)

// fighter객체
var fighter = {

    fullname: 'John Jones',
    opponent: {

        // 중첩된 객체
        fullname: 'Francis Ngannou',

        // 중첩된 객체 안에 함수
        // 함수에서의 this_전역객체_'Francis Ngannou'
        getFullname: function () {
            return this.fullname;
        }

    },

    // 함수에서의 this_전역객체_'John Jones'
    getName: function() {
        return this.fullname;
    },


    // 화살표 함수(this를 바인딩하지 않는 함수)에서의 this
    // 화살표 함수는 선언될 시점에서의 상위 스코프가 this로 바인딩_'Ciryl Gane'
    // 문자열을 .split(' ')사용하여 공백을 기준으로 분할 Ciryl, Gane 중의 인덱스 0은 Ciryl
    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },


    // 콜백 함수 호출 시 그 함수 내부에서의 this
    // 콜백 함수도 함수기 때문에 this는 전역 객체를 참조하지만
    // 콜백 함수에 별도로 this를 지정한 경우는 예외적으로 그 대상을 참조
    // 따로 call, apply, bind를 사용하지 않았으므로, 'Ciryl Gane' 
    // 문자열을 .split(' ')사용하여 공백을 기준으로 분할 Ciryl, Gane 중의 인덱스 1은 Gane
    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()

}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);

// Not Francis Ngannou VS John Jones
// It is John Jones VS Ciryl Gane

---

👌ThisBindings

함수 속의 this

중첩된 객체 안 함수 속의 this

화살표 함수 속의 this

콜백 함수 안 함수 속의 this