자바스크립트로 출석부 만들어보기

나는 코딩으로 학생30명의 출석부를 만들기에 도전해 보겠다.

var student1 = { name : 'lulu', age : 18 }
var student2 = { name :  'Kkang', age : 18}
.
.
.
var student30 = { name : 'Choi', age : 18 }

이렇게 하드 코딩해서 만드는게 정답일까...
정답은 없지만

당연히 비슷한 Object를 복사해서 만드는게 쵴오의 방법 아닐까??

constructor - 붕어빵 틀

붕어빵 틀을 만들어 봅시다.

function Student(){
  // 관습적으로 constructor의 첫번째는 대문자로 사용함
  this.name = 'kim';
  this.age = 18;
}

이렇게 constructor 함수(붕어빵 틀)를 만들었다.

그리고 이제 마법의 주문을 외쳐보자 : 'Hello world' new Student()

new + 함수명을 쓰면 Object가 줄줄이 나온다.

function Student(){
  this.name = 'kim';
  this.age = 18;
}

var 학생1 = new Student();
console.log(학생1) //Student {name: 'kim', age: 18}

// Q. 콘솔에 찍힌 Student는 뭘까?
// A. 학생 1을 만든 object를 만든 constructor의 이름

그런데 이름이 다 똑같지는 안잖슴...

Q. 어떻게 해줘야 할까??

> A. 결국에 constructor도 함수이므로 
	 파라미터자리를 만들어줘서 슈루롱 해주면 되지 않을까?

function Student(name){
  this.name = name;
  this.age = 18;
}

var 학생1 = new Student('choi');
var 학생2 = new Student('Park');
var 학생3 = new Student('Kang');

console.log(학생1.name)// 'choi'
console.log(학생2.name)// 'Park'
console.log(학생3.name)// 'Kang'

이제 맘 편히 붕어빵틀에 팥, 슈크림,치즈 등등 원하는 걸
커스텀 할 수 있게 되어 매우 기쁘다. 😎

그런데 학생들의 행동(함수)도 넣을 수 있을 까??

당연하다. 일딴 Object에 함수 넣는 것부터 차근차근 해볼까?

    var obj = {
        name : 'kim',
        age :  15 ,
        sayHi :  function(){
                console.log(`안녕하쉼까? ${this.name} 이여라`)
                }
        //아니면 
        sayHi(){
            //이렇게 ES6부터 함수 표기 할수 있음
        }
    }
	
    obj.sayHi()// 안녕하쉼까? kim이여라

잘 출력 되니 본론으로 가서 해보자

function Student(name){
  this.name = name;
  this.age = 18;
  this.sayHi = function(){
    console.log(`안녕하쉼까? ${this.name} 이여라`)
  }
}

var 학생1 = new Student('choi');
var 학생2 = new Student('Park');


학생1.sayHi()// 안녕하쉼까? choi 이여라
학생2.sayHi()// 안녕하쉼까? Park 이여라

매우 잘 된다.
이제 여러 행동(함수)추가 하고 싶은것도 마음껏 할 수 있게 되었다.

---

그런데
Q. Object value 값이 없는 값은 어떻게 뜰까?

function Student(name){
  this.name = name;
  this.age = 18;
  this.sayHi = function(){
    console.log(`안녕하쉼까? ${this.name} 이여라`)
  }
}

var 학생1 = new Student('choi');
var 학생2 = new Student();

학생1.name // 'choi'
학생2.name // undefined

A. undefined

---

좀더 있어보이는 개발자 용어

1. Constructor에서 찍어낸 Object
   => instance라고 칭함

2. 붕어빵 틀 === constructor