[40m] 도전문제 완료

# 오늘 한 것

 - 도전문제 완료

// 도전문제 3: 레시피 id를 입력하면, (1) 재료를 알려주고, (2) 만드는 법을 알려준다. ( Console.log로 찍기 )

// 필요한 함수: (1) 재료를 알려주는 함수 (2) 만드는 법을 알려주는 함수 (3) 1, 2를 console.log로 찍는 함수

// (1) 재료를 알려주는 함수가 리턴할 것: 총 재료의 개수, 재료들

// (2) 만드는 법을 알려주는 함수가 리턴할 것: 넘버링, 만드는 법

// (3) 1, 2를 console.log로 찍는 함수: variable은 총 두개 ... Recipe, fnc (fnc를 바꾸어가며 활용하게끔)

// 필요한 객체: Recipe (ingredients, howto) ... 샘플 2개

// 객체의 조건 1: 재료는 list로 만든다.

// 객체의 조건 2: 만드는 법은 list로 만든다.

// -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

// 필요한 객체: Recipe (ingredients, howto) ... 샘플 2개

// 객체의 조건 1: 재료는 list로 만든다.

// 객체의 조건 2: 만드는 법은 list로 만든다.

function Recipe (recName, ingr, howto) {

    this.recName = recName;

    this.ingr = ingr;

    this.howto = howto;

}

rec1 = new Recipe (

    '팽이버섯 호박나물',

    ['애호박(1개)', '팽이버섯(1/3봉지)', '다진마늘(3g)'],

    ['애호박 -> 씻고, 필러로 깎고 -> 다진다', '팽이버섯 -> 밑동 자르고 -> 흐르는 물에 씻고 -> 다진다', '내솥 + 실리콘 찜기받침 + 물 240ml -> + 애호박 + 팽이버섯', '다진마늘 -> 해동하여 3g 떠서 -> 섞어준다', '고압찜 25분 -> 소분하기']

)

rec2 = new Recipe (

    '청경채 돼지찜',

    ['청경채(한 단)', '돼지고기(200g)'],

    ['청경채 -> 씻고 -> 다져서 -> 스텐볼로', '돼지고기 -> 스텐볼에서 청경채와 섞기', '실리콘 찜기로 옮겨담고 -> 밥솥, 고압찜 25분 -> 뒤섞어서 고압찜 10분', '소분하기']

)

// console.log(rec1.recName)

// console.log(rec1.ingr)

// console.log(rec1.howto)

// (1) 재료를 알려주는 함수가 리턴할 것: 총 재료의 개수, 재료들

function ingrFn (Recipe) {

    var ingrNum = Recipe.ingr.length

    var ingrDetail = Recipe.ingr

    console.log('<', Recipe.recName, '>')

    console.log('(총 재료 수:', ingrNum, '개)')

   

    ingrDetail.forEach(i => {

        console.log(i);

    })

}

// ingrFn(rec1)

// (2) 만드는 법을 알려주는 함수가 리턴할 것: 넘버링, 만드는 법

function howtoFn(Recipe) {

    var howto = Recipe.howto

    console.log('<', Recipe.recName, '>')

    howto.forEach(i => {

        console.log(howto.indexOf(i)+1, ':', i)

    })

}

// howtoFn (rec1)

// (3) 1, 2를 console.log로 찍는 함수: variable은 총 두개 ... Recipe, fnc (fnc를 바꾸어가며 활용하게끔)

function callRec (Recipe, fnc) {

    fnc(Recipe)

}

callRec (rec1, ingrFn)

callRec (rec2, howtoFn)

 

[Running] node "c:\src\250212js\callback_test_3.js"

< 팽이버섯 호박나물 >

(총 재료 수: 3 개)

애호박(1개)

팽이버섯(1/3봉지)

다진마늘(3g)

< 청경채 돼지찜 >

1 : 청경채 -> 씻고 -> 다져서 -> 스텐볼로

2 : 돼지고기 -> 스텐볼에서 청경채와 섞기

3 : 실리콘 찜기로 옮겨담고 -> 밥솥, 고압찜 25분 -> 뒤섞어서 고압찜 10분

4 : 소분하기

 

 

# indexOf

https://hianna.tistory.com/404

[Javascript] 배열 특정 값 위치(index) 찾기 - indexOf(), lastIndexOf()

 

 - 이렇게 활용했다: 

    howto.forEach(i => {

        console.log(howto.indexOf(i)+1, ':', i)

    })

 

 

# Callback function의 다른 사용례

https://velog.io/@minidoo/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98Callback-Function

[자바스크립트] 콜백 함수(Callback Function)

 

전역변수, 지역변수 콜백함수의 파라미터로 전달 가능

• 전역변수(Global Variable) : 함수 외부에서 선언된 변수
• 지역변수(Local Variable) : 함수 내부에서 선언된 변수

let fruit = 'apple';	// Global Variable

function callbackFunc(callback) {
    let vegetable = 'tomato';	// Local Variable
    callback(vegetable);
}

function eat(vegetable) {
    console.log(`fruit: ${fruit} / vegetable: ${vegetable}`);
}

callbackFunc(eat);

<output>
fruit: apple / vegetable: tomato

 

 

# 배열(Array)

https://arikong.tistory.com/18

[Javascript] 리스트 데이터는 배열이 좋다!

 

 만약 위 데이터를 배열로 만들었으면 어땠을까? 라고 생각하는 순간 새로운 세상이 열렸습니다.

	const information = {
	name: 'arikong',
	age: '4',
	gender: 'male',
	codes: [
	{ code: 'a1', value: 'b1' },
	{ code: 'a2', value: 'b2' },
	{ code: 'a3', value: 'b3' },
	{ code: 'a4', value: 'b4' },
	{ code: 'a5', value: 'b5' }
	]
	}

 언뜻보면 무슨 차이인가 싶겠지만 이제 함수를 사용함에 있어서 객체 하나를 찾아서 그 값을 찾고 수정하고 삭제하는데 상당히 편해질 것이라는 것을 예상할 수 있습니다. 이전 데이터에서는 index를 찾아서 각각의 배열마다 값을 수정해야 하고 확인해야 하는 반면에, 지금 데이터는 find함수를 통해서 바로 찾을 수 있고, filter를 이용해서 걸러낼 수도 있습니다.

 

 

# JavaScript에서 객체 생성하기

JavaScript에서 객체를 생성하는 방법은 다음과 같습니다. Object literals (리터럴 객체), Constructors (생성자 함수), Classes (클래스), Object.create() 메서드.    Object literals    객체 초기화자라고도 불리며, key-value pair로 속성을 정의합니다 예를 들어, `const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};`와 같이 사용합니다 Object.create() 메서드 지정된 프로토타입 객체와 속성을 갖는 새 객체를 만듭니다    기존의 객체를 상속해 확장하는 데 사용됩니다    생성자 함수 정의 없이도 생성할 객체의 프로토타입을 지정할 수 있습니다    Constructors    같은 타입의 객체를 여러 개 생성할 때 사용합니다 생성자 함수는 대문자로 첫 글자를 시작하는 것이 좋습니다

 

# 다음에 할 일

 - Object literals, Object.create(), Constructors: 차이를 알아보기

 - async-await 따라해보기. (하다 말았음): https://milimiliemilie.tistory.com/11 여기의 JS Crash course 참고.