코딩공부

[1h15m] 생성자

milimiliemilie 2025. 2. 20. 22:34

# 도전문제 1개 완료

// 도전문제1 : 레시피를 실습했는지 체크할 수 있는 기능
// function 1 : undone -> done, done -> undone으로 바꿔준다
// function 2 : function1을 실행하고, console.log로 레시피 이름과 상태를 보여준다.

// 1) 생성자를 선언한다 (new Recipe() {})
function Recipe (no, name, status) {
    this.no = no;
    this.name = name;
    this.status = 'undone';
}

// 2) 샘플 객체 2개를 만든다 (undone, done)
rec1 = new Recipe (1, 'ricePorridge', 'undone');
rec2 = new Recipe (2, 'zucchiniMix', 'done');
// console.log(rec1.name) // ricePorridge
rec1.status = 'undone'
rec2.status = 'done'

// 3) function1을 만든다
function statFn (Recipe) {
    if (Recipe.status == 'undone') {
        Recipe.status = 'done'
    } else {
        Recipe.status = 'undone'
    }
    console.log(Recipe.status)
}
// statFn(rec1) // 'done'
// statFn(rec2) // 'undone'

// 4) function2를 만든다 -- 종료

function chnFn (Recipe, callfn) {
    callfn(Recipe);
    console.log(Recipe.name, Recipe.status)
}

chnFn(rec1, statFn)
// done
// ricePorridge done
chnFn(rec2, statFn)
// undone
// zucchiniMix undone

 

 - 위에서, callback function을 쓰는 부분은 다음과 같다 :

 - chnFn에서는 'callfn'을 argument로 불러오게 하고, 실제 사용 시 chnFn(rec1, statFn)으로써 callfn 자리에 statFn을 대입했다.

 - argument로 불러온 함수는, callfn(Recipe)의 형태로 variable을 가져다 쓰는 함수가 되게끔 만들었다.

function chnFn (Recipe, callfn) {
    callfn(Recipe);
    console.log(Recipe.name, Recipe.status)
}

chnFn(rec1, statFn)
// done
// ricePorridge done

 

# 생성자

 - 다음은 생활코딩에서 배운 것:

1
2
3
4
5
6
7
8
9
10
11
function Person(name){
this.name = name;
this.introduce = function(){
return 'My name is '+this.name;
}
}
var p1 = new Person('egoing');
document.write(p1.introduce()+"<br />");
 
var p2 = new Person('leezche');
document.write(p2.introduce());

생성자 내에서 이 객체의 프로퍼티를 정의하고 있다. 이러한 작업을 초기화라고 한다. 이를 통해서 코드의 재사용성이 대폭 높아졌다.

코드를 통해서 알 수 있듯이 생성자 함수는 일반함수와 구분하기 위해서 첫글자를 대문자로 표시한다.

자바스크립트 생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속이다. 하지만 자바스크립트에서 객체를 만드는 주체는 함수다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 또 자바스크립트가 추구하는 자유로움을 보여주는 사례라고 할 수 있다.

https://opentutorials.org/course/743/6570

 

 - 생성자 만들 때 Class가 아니라 function이라고 해서 의아했는데, 이제 이유를 알겠다.JavaScript라서 그런 거였구나.

 

# 롤백 방법은 없을까?

 - 아래와 같이 샘플 객체 2개를 만들었다. function statFn을 실행시켰는데, 그 후에는 아무리 rec2 = new Recipe (...) 가 포함된 코드를 다시 돌려봐도 'done'이 아니라 'undone'으로 떴다. 강제로 rec.status = 'done'으로 바꾸어서 원래대로 복구시키긴 했는데.... 이게 최선일까?

// 2) 샘플 객체 2개를 만든다 (undone, done)
rec1 = new Recipe (1, 'ricePorridge', 'undone');
rec2 = new Recipe (2, 'zucchiniMix', 'done');
rec2.status = 'done'
console.log(rec1.status)
console.log(rec2.status)
// console.log(rec1.name) // ricePorridge

// 3) function1을 만든다
function statFn (Recipe) {
    Recipe.status = 'undone'
    console.log(Recipe.status)
}
// statFn(rec1) // undone
// statFn(rec2) // undone

 

# Notes

 - 종이에 설계를 먼저 하고, 그 다음에 코드를 짜면 더 수월했다. VS Code에 처음부터 짜넣으면 어쩐지 헤맸다. 왜냐하면 중간중간에 내가 모르는 부분들이 있는데, 그걸 해결하지 않고 설계부터 하려니 문제가 생겼다. 어떤 빈틈을 갈무리해야 하는지, 또 그 빈틈을 메우고 나서는 어디로 돌아와 다시 설계해야 하는지 표시하려면, backspace 눌렀을 때 흔적조차 남지 않는 VS Code보다는 종이가 훨씬 명확했다. 그렇다고 해서 VS Code에서 backspace를 안 쓰고 주석처리로 남겨두자니 코드 자체가 덕지덕지 되어서 가독성이 현저히 떨어졌다.

 

 # 다음에 할 일

 - 도전문제 1개 더 만들어보기 (Callback function 쓰는 것으로)

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

저작자표시 비영리 변경금지