[2023-03-02]Wrapper,Math,Date 객체,가위바위보게임

Wrapper 객체 

 

자바스크립트에는 primitive type과 object type이 있다.

 

객체는 프로퍼티와 메소드를 가지고 있으며, 값이 메모리로 이동되기 때문에
객체주소도 포함하고 있다. 즉 값만 가지고 있는 원시타입과 다르게
간단한 데이터 정보를 가지고 있는 것이다. 

wrapper객체는 원시타입을 객체타입으로 변환해주는 역활을 하는 객체이다.

 

객체 개념을 더 자세히 알아보자

객체는 생성될때 toString이나 hasOwnProperty와 같은 메소드를 이미 가지고 
생성된다.

const dog = {}; //객체 생성
console.log(dog.toString()); // [Object object]
console.log(dog.hasOwnProperty("name")); // false

배열도 객체인데, 배열의 경우 sort라는 메소드를 가지고 있으며,
length라는 프로퍼티도 가지고 있다.

const years = [2004,2008,2006];
console.log(years.length); //3
console.log(years.sort((a,b)=>a-b)); //2004,2006,20008 (오름차순 정렬)

이제, string을 살펴보자.

string도 객체와 마찬가지로 length를 확인할 수 있고, 인덱스 번호를 확인하는 indexOf()도 가지고 있다

const dog = "pudding";
console.log(dog.length);//7
console.log(dog.indexOf("p"));//0

하지만 string은 객체가 아니다

자바스크립트에서 원시타입은 boolean , string , numbers 이다

 

객체의 특징 중 하나는 메소드나 프로퍼티를 추가하고 수정할 수 있다는 것이다.

const dog = {};
dog.init = function(){
this.status = "running";
};
dog.status = "paused";
console.log(dog.status); //paused
dog.init();
console.log(dog.status); // running

하지만 string의 경우, var words = "pudding is happy"; 이 문장 자체에 메소드나 프로퍼티를 추가 할 수 없다.

const name = "pudding";
name.emotions = "happy";
name.speaks = ()=>{
	console.log("pudding is sososo happy");
};

console.log(name.emotions); // undefined
console.log(name.speaks()); // uncaught typeerror

이렇게 프로퍼티와 메소드를 만드려고 하면 에러가 난다.

var name = "pudding";
var result = name.substring(0,2); // pu

이런것도 객체라고 생각해서 메모리에 저장된걸 우리가 쓰는 것처럼 보이지만
사실 원시타입이며 , wrapper라는 객체가 감싸서 객체처럼 쓸 수 있는 것이다.

 

원시타입을 객체처럼 만들어주는 방법이 있는데 , 이는 New 키워드를 쓰면된다.

new String()

const pudding = new String("pudding");
pudding.color = "white";
pudding.age = 1;

console.log(pudding.age); // 1

string은 원시 타입인데, 객체 타입으로 만들어주는 wrapper 객체인 new String()을 만나, 객체처럼 메소드나 프로퍼티를 사용자 마음대로 추가할 수 있다.

new Number()

const age = new Number(13);
age.thisYear = function(){
	console.log(`I am ${this>=20? "an adult":"a minor}`);
}

age.thisYear; // minor

new Boolean()

const answer = new Boolean(true);
answer.print = function(){
	return this.valueOf()? "yes":"no"
};

answer.print() // yes

 

이와같이 원형은 원시타입이였으나, wrapper 객체를 사용하여 , 객체처럼 사용하는 것이다 

 

[String Wrapper 객체의 메소드에서 쓰는 것 ] : 메소드를 가져다 쓰는거니까 타입까지 변환되지 않음 

num.toString() 숫자를 문자열로 변환해준다.

var num = 15;
console.log(typeof num.toString()); // string

만약 함수안에 숫자를 넣으면 , 그 안의 숫자의 진법형태로 변환해준다

var num = 15;
console.log(num.toString(2)); //1111

15의 이진법 출력 

 

[Number Wrapper 객체의 메소드를 쓰는 것 ]

Num.toFixed() 소수점에서 반올림해준다

var num = 5.66;
var fixedNum = num.toFixed();
console.log(fixedNum); //6

 

[결론]
객체는 프로퍼티와 메소드를 가지고 있으며, 원시타입은 프로퍼티나 메소드를 갖고 있지 않다.
원시타입은 wrapper 객체를 사용하여 객체처럼 프로퍼티와 메소드를 추가시킬 수 있는 것이다.

---

Math객체 
객체이지만 생성자가 없기 때문에 따로 new Math()로 쓰지 않고, 바로 Math.ceil() , Math.floor()등등으로 쓸 수 있다.

 

 

 

Math.ceil() : 가장 가까운 정수로 올림해준다  (반올림 X , 그냥 큰 수로 올려버림) 

let a = Math.ceil(0.60); // 1
let b = Math.ceil(0.40); // 1
let c = Math.ceil(5.1); //6
let d = Math.ceil(-5.1); //-5
let e = Math.ceil(-5.9); // -5

페이징에서 많이 쓰인다.

var totalCount = 1000;
var page = Math.ceil(totalCount/15);

한페이지당 15개씩 보여주며 , 총 1000게시물을 가지고 있다.

이러한경우  1000을 15로 나누면 6.6xxxxx 이 나오는데 , 즉 15개씩 게시글을 작성했으나 1개 게시글이 남기 때문에 페이지를 하나 더 만들어 주는 것이다 . 따라서 Math.ceil을 사용하여 페이지가 7개 나오게 만들어 주는 알고리즘이다.

 

Math.random() 0<=x<1 의 숫자를 뽑아주는 함수, Math.floor() 무조건 내려주는 함수 

가위바위보 프로그램을 만들 때 사용하였다.

1에서 3까지 뽑을 때 Math.floor(Math.random()*3)+1 

1.3을 곱한 상태 : 0<=x<3 , 여기에 1을 더하면 , 1<=x<4 즉 x는 1~3까지 뽑을 수 있다.

Math.floor()는 소수점을 제거하는 역할로 썼는데 반올림도 아닌 , 무조건 소수점을 없애버린다.

Math.floor(1.6) => 1 

 

 

Math.min() 가장 작은 수를 뽑아주는 함수 : 숫자로된 문자열을 숫자로 변환해준다.

console.log(Math.min()); // infinity
console.log(Math.min("dsf")); //NaN
console.log(Math.min(1,"-10",-2)); // -10
var arr = [1,2,3];
console.log(Math.min(arr));//NaN

 

Math.max() 가장 큰 값을 뽑아주는 함수 : 숫자로된 문자열을 숫자로 변환해준다.

console.log(Math.max()); // -infinity
console.log(Math.max("dsf")); //NaN
console.log(Math.max(1,"10",-2)); // 10
var arr = [1,2,3];
console.log(Math.max(arr));//NaN

---

 

null, undefined, NaN, Infinity에 대한 비교

자바스크립트에서는 약간은 비슷한 것 같으면서도 전혀 다른 4가지 값을 제공하고 있습니다.

- null은 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미하는 값입니다.

- undefined는 null과는 달리 하나의 타입이며, '타입'이 정해지지 않은 것을 의미하는 값이기도 합니다.

- NaN은 number 타입이며, '숫자가 아님'을 의미하는 숫자입니다.

- Infinity는 number 타입이며, '무한대'를 의미하는 숫자입니다.

 

값

Boolean

Number

String

null	false	0	"null"
undefined	false	NaN	"undefined"
NaN	false	NaN	"NaN"
Infinity	true	Infinity	"Infinity"

 

Date 객체

 객체이기 때문에 new Date() 형식으로 가져와서 쓸 수 있으며 , ("년도-월-일-T시:분:초:밀리초")로 쓴다.

만약 뺴먹은 부분이 있다면 컴퓨터에서 저절로 1월 1일 00시 0분 등으로 맞춰준다.

이건 외국 사이트의 자바스크립트 컴파일러로 했을 때의 결과이다.

var day = new Date("1994-04-21T15:30:00")
console.log(day);//1994-04-21T15:30:00.000Z
var day2 = new Date("1994-03");
console.log(day2);//1994-03-01T00:00:00.000Z

 

만약 서버가 한국이라면 한국 시간 기준으로 나와서 + 9 시간을 더 해준다.

var myDatetime = new Date("1977-12-14T13:30:00");     
var myDate2 = new Date("1977-12");         

Wed Dec 14 1977 13:30:00 GMT+0900 (한국 표준시)
Thu Dec 01 1977 09:00:00 GMT+0900 (한국 표준시)

 

 

 

구분자로 / 나 - 둘다 줄 수 있다

 

var date = new Date("2022/01/01");
var newdate = new Date("2022-01-01");

console.log(date);
console.log(newdate);

2022-01-01T00:00:00.000Z
2022-01-01T00:00:00.000Z

 

주로 날짜를 객체로 만들때, 과거 날짜를 적는다. 카운트 다운 같은거 만듬 

 

https://www.educative.io/answers/how-to-create-a-countdown-timer-using-javascript

How to create a countdown timer using JavaScript

---

가위위보 게임 만들기

처음에 내가 했던 방법은 , if 조건문이 많이 나온다.

[계획]
1을 입력하면 가위, 2를 입력하면 바위,3을 입력하면 보가 나오도록 셋팅한다.
사용자에게는 1~3 중 입력값을 받고, 버튼을 누르면 playGame()함수가 실행되도록 한다.
사용자의 값을 받을 변수와 컴퓨터의 값을 받을 변수를 각각 만들어준다.
컴퓨터의 변수는 Math.random()을 이용하여 컴퓨터로부터 랜덤으로 1~3을 뽑을 수 있도록 설계한다.
이제 둘의 값을 가지고 if문을 이용해 계산을 시작한다

[게임계산]
입력값을 받을 경우와 입력받지 않을 경우 두개로 크게 나눠준다.
값을 입력받지 않은 경우 alert()을 이용해 숫자 입력을 요구한다.
값이 들어있는 경우부터 가위바위보 게임 계산을 시작한다

경우1) 사용자와 컴퓨터 값이 같은 경우 무승부 표시

경우2)
컴퓨터가 1(가위)
-사용자 2(바위) : 사용자 승
-사용자 3(보) : 컴퓨터 승
컴퓨터가 2(바위)
-사용자가 1(가위):컴퓨터 승
-사용자가 3(보):사용자 승
컴퓨터가 3(보)
-사용자가 1(가위):사용자 승
-사용자가 2(바위):컴퓨터 승 
사용자가 1~3이외의 숫자를 입력했을 때
alert()을 이용해 1~3 중 정확한 숫자를 요구

<body>

    <!-- 게임 룰 -->
    <div class="gameRule" style="text-align: center;">
        <h1>컴퓨터와 함께 가위 바위 보 게임을 해봅시다!</h1>
        <p>게임의 규칙 : 1(가위) 2(바위) 3(보)에서 랜덤으로 입력칸에 입력 후 enter를 눌러주세요!</p>
    </div>
    <!-- 사용자 입력칸 -->
    <div class="userAttack">
        <input type="number" id="userAttack" style="display: block; margin: auto; padding:10px;border: 2px solid black;width: 30%">
        <button id="playGame" onclick="playGame()"  style="display: block; margin: auto; padding:10px;border: 2px solid black; width: 30%;">시작</button>
    </div>
    <!-- 게임 결과칸 -->
    <div class="GameOver" style="margin:auto">
        <h1 id="userwin" style="text-align:center;">사용자는 <span id="userAttackDisplay" style="color: blueviolet;"></span>가 입력되었습니다.</h1>
        <h1 id="computerwin" style="text-align:center;">컴퓨터는 <span id="computerAttackDisplay" style="color: blueviolet;"></span>가 나왔습니다.</h1>
        <h1 style="text-align:center;">승자는 <span id="winner" style="color: blueviolet;"></span>입니다.</h1>
    </div>
<script>

function playGame(){
            //요소 셀렉터
             var $ =(selector)=>document.querySelector(selector);
             //컴퓨터의 값
            var randomNumber = Math.floor(Math.random()*3)+1;
            //사용자의 값 
            var userNumber = $("#userAttack").value;

            //게임계산
            if(!userNumber){
                alert("1~3 중 숫자를 입력해주세요")
            }
            else{
            if(randomNumber==userNumber){
                $("#userwin").innerHTML = "";  
                $("#computerwin").innerHTML = "";  
                $("#winner").innerHTML = " 없으며, 무승부 ";  
            }
            else if(randomNumber==1){
                if(userNumber==2){
                    $("#userAttackDisplay").innerHTML = "바위";
                    $("#computerAttackDisplay").innerHTML = "가위";
                    $("#winner").innerHTML = " 사용자 ";
                }else{
                    $("#userAttackDisplay").innerHTML = "보";
                    $("#computerAttackDisplay").innerHTML = "가위";
                    $("#winner").innerHTML = " 컴퓨터 ";
                } 
            }
            else if(randomNumber==2){
                if(userNumber==1){
                    $("#userAttackDisplay").innerHTML = "가위";
                    $("#computerAttackDisplay").innerHTML = "바위";
                    $("#winner").innerHTML = " 컴퓨터 ";
                }else{
                    $("#userAttackDisplay").innerHTML = "보";
                    $("#computerAttackDisplay").innerHTML = "바위";
                    $("#winner").innerHTML = " 사용자 ";
                }
            }
            else if(randomNumber==3){
                if(userNumber==1){
                    $("#userAttackDisplay").innerHTML = "가위";
                    $("#computerAttackDisplay").innerHTML = "보";
                    $("#winner").innerHTML = " 사용자 ";
                }else{
                    $("#userAttackDisplay").innerHTML = "바위";
                    $("#computerAttackDisplay").innerHTML = "보";
                    $("#winner").innerHTML = " 컴퓨터 ";
                }
            }else{
//3이상일때도 안나와서 에러.. .
                alert("1~3중에서만 입력해주세요");
            }
        }
}
</script>

 

 

그런데 , 여기서 조금만 더 생각을 바꾸면 더 짧게 코드를 만들 수 있다.

 

사용자의 숫자를 1,2,3

컴퓨터의 랜덤 숫자를 3,21 

로 바꾸면 된다.

 

[설계]

사용자 
가위 : 1
바위 : 2
보 : 3

컴퓨터
가위 : 3
바위 : 2
보 : 1

사용자 + 컴퓨터 

무승부 
가위(1) + 가위(3) = 4
바위(2) + 바위(2) = 4
보(3) + 보(1) = 4

사용자 이김 
가위(1) + 보(1) = 2
바위(2) + 가위(3) = 5
보(3) + 바위(2) = 5

사용자 짐 
가위(1) + 바위(2) = 3
바위(2) + 보(1) = 3
보(3) + 가위(3) = 6

 

 

function playGame(){
            //요소 셀렉터
             var $ =(selector)=>document.querySelector(selector);
             //컴퓨터의 값
            var compRSP = Math.floor(Math.random()*3)+1;
            //사용자의 값 
            var userRSP = $("#userAttack").value;

            //게임계산
            if(userRSP+compRSP==4){
                $("#winner").innerHTML = "무승부 입니다."
            }else if(userRSP+compRSP==2||userRSP+compRSP==5){
                
                $("#winner").innerHTML = "사용자가 이겼습니다.";
            }else{
                $("#winner").innerHTML = "사용자가 졌습니다.";
            }         
}