22.11.17 목
DAY 4 - javascript (기초다지기)
📌 new 연산자와 생성자 함수
- 생성자 함수
-함수 이름의 첫 글자는 대문자
-반드시new연산자를 붙여 실행
:재사용할 수 있는 객체 생성 코드를 구현하는데의 의의
📖 풀어보기
✏️ 계산기 만들기
아래와 같은 세 개의 메서드를 가진 생성자 함수, Calculator를 만들어보세요.
- read() – prompt 함수를 이용해 사용자로부터 값 두 개를 받고, 이를 객체 프로퍼티에 저장합니다.
- sum() – 프로퍼티에 저장된 값 두 개를 더한 후 반환합니다.
- mul() – 프로퍼티에 저장된 값 두 개를 곱한 후 반환합니다.
예시
let calculator = new Calculator();
calculator.read();
alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() ); function Calculator () {
this.read = function() {
this.a = +prompt("첫번째 숫자를 입력하세요")
this.b = +prompt("두번째 숫자를 입력하세요")
}
this.sum = function () {
return alert(this.a + this.b);
}
this.mul = function () {
return alert(this.a * this.b)
}
}
✏️ 계산기 만들기
생성자 함수 Accumulator(startingValue)를 만들어 보세요.
Accumulator(startingValue)를 이용해 만드는 객체는 아래와 같은 요건을 충족해야 합니다.
- 프로퍼티 value에 현재 값(current value)을 저장합니다. 최초 호출 시엔 생성자 함수의 인수, startingValue에서 시작값(starting value)을 받아옵니다.
- 메서드 read()에선 prompt 함수를 사용해 사용자로부터 숫자를 받아오고, 받은 숫자를 value에 더해줍니다.
프로퍼티 value엔 startingValue와 사용자가 입력한 모든 값의 총합이 더해져 저장됩니다.
데모를 위한 코드는 다음과 같습니다.
예시
let accumulator = new Accumulator(1); // 최초값: 1
accumulator.read(); // 사용자가 입력한 값을 더해줌
accumulator.read(); // 사용자가 입력한 값을 더해줌
alert(accumulator.value); // 최초값과 사용자가 입력한 모든 값을 더해 출력함❌ 오답
값 입력하는 창 두 개만 나오고, 더하기가 되지 않았다.
function Accumulator (startingValue) {
this.read = function () {
this.a = +prompt('첫번째 값을 입력하세요')
this.b = +prompt('두번째 값을 입력하세요')
}
this.value = startingValue + this.a + this.b
}문제점
문제 파악이 부족했다.
value에 startingValue를 담고, 받아온 값을 다시 value에 모두 더했어야했는데, 그렇게 하지 못했다.
⭕️ 정답
function Accumulator(startingValue) {
this.value = startingValue;
this.read = function() {
this.value += +prompt('더할 값을 입력해주세요.', 0);
};
}
let accumulator = new Accumulator(1);
accumulator.read();
accumulator.read();
alert(accumulator.value);📌 옵셔닝 체이닝 ?.
- obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
- obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
- obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함
💬 특정 정보가 없을 때, 특정 정보에 접근하면 에러가 뜬다.
그래서 ?. 를 붙여 정보가 있는지 없는 지 확인 한다.
undefined 나 null 이면, 에러가 아닌 undefined가 출력
에러를 방지하기 위해쓰는 것 같다.
남발하면 안되고, 또 꼭 있어야 하는데 ?. 를 쓰게 되면 오히려 에러를 발견하지 못해 고생할 수 도 있음!!
📌 심볼
심볼(symbol)
: 유일한 식별자(unique identifier)를 만들고 싶을 때 사용
💬 그동안 쓰지 않았던 자료형이였는데, 일단 가볍게 내용을 훑어봤다.
설명문 같은 역할이며, 디버깅 용도로 사용한다고 한다.
📌객체를 원시형으로 변환하기
객체끼리 더하는 연산이나 빼는 연산을 하게 되면, 자동 형 변환이 발생한다.
- ToPrimitive : 숫자형이나 문자형으로의 형변환을 원하는 대로 조절 할 수 있다.
객체 형 변환은 세 종류로 구분되는데, hint라 불리는 값이 구분 기준이 된다.
- Symbol.toPrimitive : 매서드를 구현해 놓으면, 갖게 되는 값을 보고 string이 되었다가, number가 되기도 한다.
-toString과 valueOf : 직접 형변환 가능
💬 써봤던거는 눈에 잘 들어온다. 처음 본 매서드는 생소하다.
hint라는 것은 이해하기로는 무언가 실행할 때 그것을 감지해서 문자인지 숫자인지 구분을 할 수 있다는 것으로 이해했다.
💬 오늘의 느낀점
어제는 문제 풀이가 많아서 사용법이나 개념을 익히는게 쉬웠다.
오늘은 그동안 자세히 보지 않았던 부분의 개념들을 학습했는데, 아무래도 평소에 쓰지 않았던 거라 다시 읽고 읽고해서 대략적인 개념을 읽힌거 같다.
배워서 어디서 다시 응용할 수 있을까를 생각하면서 학습하는 게 중요한 거 같다!
