오늘은 3주차 내용을 다 듣고 4주차 까지 진행했는데

3주차 내용은
데이터 타입, 실행 컨텍스트, this 에 대해 배웠는데

예전에 자바스크립트를 배우다가 this 를 만나고 포기했었는데
여기서 다시 만나니 조금 익숙했다.

그리고 내가 생각하기에 자바스크립트의 🌸이라고 생각 되는 부분인 비동기를 배웠다.

---

오늘의 문제 (3주차)

나이 든 유저

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

var user = {
    name: "john",
    age: 20,
}

    // gatAged 함수를 완성해주세요!
var getAged = function (user, passedTime) {
    let user2 = {
        name: user.name,
        age: user.age + passedTime,   
    }
    return user2;
}


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);

해당 문제는 getAged 함수를 통해 얕은복사 를 사용하는 문제인데
내가 생각한 문제의 답은 상단의 답이지만

강사님의 답안은

var user = {
    name: "john",
    age: 20,
}

// 객체 만들어 프로퍼티 복사하기
var getAged = function (user, passedTime) {
    var result = {};
    for (var prop in user) {
        result[prop] = user[prop];
    }
    result.age += passedTime; 
    return result;
}


var agedUser = getAged(user, 6);

var agedUserMustBeDifferentFromUser = function (user1, user2) {
    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);

이렇게 작성되어있어서
내가 생각한 답안과 조금 다르길래

왜 다른거지? 라는 생각이 많이 들어서 내일 시간이 되면 강사님께 1:1로 찾아가 여쭤본 뒤 추후에 정리해야겠다!

---

어떤 매치가 성사될까

• 출력의 결과를 제출해주세요, 그리고 그 이유를 최대한 상세히 설명해주세요
• 주의사항 : 브라우저에서 테스트해주세요(Chrome → 개발자 도구 → 콘솔에 입력하여 실행)

var fullname = 'Ciryl Gane'

var fighter = {
    fullname: 'John Jones',
    opponent: {
        fullname: 'Francis Ngannou',
        getFullname: function () {
            return this.fullname;
        }
    },

    getName: function() {
        return this.fullname;
    },

    getFirstName: () => {
        return this.fullname.split(' ')[0];
    },

    getLastName: (function() {
        return this.fullname.split(' ')[1];
    })()

}

console.log('Not', fighter.opponent.getFullname(), 'VS', fighter.getName());
// 여기서 fighter.opponent.getFullname() 가 가르키는 것은 fighter 안에 있는 opponent 안에 getFullname 함수를 호출한것이기 때문에 여기서의 this 는 fighter.opponent JSON 를 가르키게 되고 따라서 함수의 리턴값은 'Francis Ngannou' 입니다

// 여기서 fighter.getName()) 은 fighter 변수명의 gatName() 함수를 호출한것이기 때문에 리턴값으로 fighter 변수명 안에 있는 fullName 즉 'John Jones' 이 리턴되어서 

//이 로그의 값은 Not Francis Ngannou VS John Jones 입니다

console.log('It is', fighter.getName(), 'VS', fighter.getFirstName(), fighter.getLastName);
// 여기서 fighter.getName() 의 값은 위에 서술한것과 같은 이유로 'John Jones' 입니다.

// fighter.getFirstName() 의 리턴 값은 화살표로 인해서 fighter.fullname 에 접근하는것이 아니라 전역변수로 생성된 fullname 을 가르키고 있기 때문에 'Ciryl Gane' 을 담고있지만 .split() 함수로 인해서  'Ciryl' 를 리턴합니다

// fighter.getLastName) 변수 안에 함수가 있기 때문에 스코프체인으로 인해 전역 변수로 생성된 fullname 가르키고 있기때문에 'Ciryl Gane' 을 담고있지만 .split() 함수로 인해서  'Gane' 를 리턴합니다

따라서 출력되는 데이터는 
Not Francis Ngannou VS John Jones
It is John Jones VS Ciryl Gane
입니다.

해당 문제는 this 가 어떤 데이터를 가르키고 있는지에 대한 문제인데
문제의 답은 주석으로 상세히 달아놨다!

처음에 문제 풀때는 이게 맞나? 하면서 스스로를 계속 의심하면서 했는데 다행히 제가 생각한 답이 맞아서 참 다행이다 싶었어요..ㅎㅎ

---

4주차 강의

4주차 강의 메인은 콜백지옥, 동기/비동기 를 배웠는데

콜백지옥의 해결방안으로 Promise, Generator, Async/await 를 알려주셨는데

---

Promise

new Promise(function (resolve) {
	setTimeout(function () {
		var name = '에스프레소';
		console.log(name);
		resolve(name);
	}, 500);
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 아메리카노';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페모카';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페라떼';
			console.log(name);
			resolve(name);
		}, 500);
	});
});

Promise를 사용해서 성공을 했을때는 resolve 를 호출하고 실패 했을때는 reject 을 호출해서 분기 처리가 더 용이하며

.then 을 통해 resolve의 데이터를 사용하여 결과를 도출해낼수 있습니다.

---

이와 반대로
.catch 를 통해 reject 되는 데이터를 사용하여 에러 데이터를 처리할수있습니다.

---

Generator

Generator는 처음 들어봐서 이게 뭐지!? 싶어서 다른 내용들보다 조금 더 신경쓰면서 들었어요!

Generator는 함수에 * 을 붙이며 사용하고 yield 를 통해 함수의 실행 / 중지 를 제어 할 수 있는데
yield 통해 중지 될 경우 next() 메서드를 호출해 다음 Generator 함수를 실행하여
Generator 함수 내부소스가 위 -> 아래 순차적으로 진행이 가능하다!

이렇게 설명만 써져있으면 이해하는데 어려움이 있을수도 있으니!

var addCoffee = function (prevName, name) {
	setTimeout(function () {
		coffeeMaker.next(prevName ? prevName + ', ' + name : name);
	}, 500);
};
var coffeeGenerator = function* () {
	var espresso = yield addCoffee('', '에스프레소');
	console.log(espresso);
	var americano = yield addCoffee(espresso, '아메리카노');
	console.log(americano);
	var mocha = yield addCoffee(americano, '카페모카');
	console.log(mocha);
	var latte = yield addCoffee(mocha, '카페라떼');
	console.log(latte);
};
var coffeeMaker = coffeeGenerator();
coffeeMaker.next();

코드를 참조하여 상단의 설명문을 보면 훨씬 쉽게 이해할 수 있다~

---

Async/await

Async/await 은 앞에 설명된 Promise, Generator 에 비해서 훨씬 쉽게 사용할수 있다.
먼저 코드를 살펴보면

var addCoffee = function (name) {
	return new Promise(function (resolve) {
		setTimeout(function(){
			resolve(name);
		}, 500);
	});
};
var coffeeMaker = async function () {
	var coffeeList = '';
	var _addCoffee = async function (name) {
		coffeeList += (coffeeList ? ', ' : '') + await addCoffee(name);
	};
	await _addCoffee('에스프레소');
	console.log(coffeeList);
	await _addCoffee('아메리카노');
	console.log(coffeeList);
	await _addCoffee('카페모카');
	console.log(coffeeList);
	await _addCoffee('카페라떼');
	console.log(coffeeList);
};
coffeeMaker();

Promise 안에 있는 Async/awai 함수인데 이러한 경우 Async/awai 가 .then의 역할을 대신 한다고 볼 수 있다!

async 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 통해 컨트롤 하면 됩니다!

과제

4주차 강의 과제는 현재 API 오류로 서버가 내려가서 진행이 불가하므로 넘겨주세요!

라는 안내를 받아서 추후에 진행하게되었습니당..