📙노마드코더 Vanilla JS 기초 정리1

데이터(요일) 배열

'[ ]'를 사용하여 값을 배열할 수 있다.

const dayOfWeek = ["Mon","Tue", "Wed", "Thu", "Fri", "Sat"];
console.log(dayOfWeek[2]);

dayOfWeek.push("Sun");      // ---------> 끝에 "sun"을 추가
dayOfWeek[3] = "Mon";       // ---------> 4번째 값을 바꿈 (0부터 시작)
console.log(dayOfWeek);

다른 키(Key)값을 가진 오브젝트 선언

'{ }'를 사용하고 각각 필요한 Key와 값을 준다.
단, 값을 주고 끝에 쉼표(,)는 필수.
또한, 반드시 키와 값 사이에 콜론(:) 사용.

const player = {
    name: "soyeon",
    age: 18,
    points: 10,
    fat: true,
};
console.log(player);
player.age = player.age +8;
console.log(player.age);
console.log(player);
player.fat = false;
console.log(player);

function 함수명() 연습

function sayHello(nameOfPerson, age){
    console.log("Hello my name is " + nameOfPerson + " I'm " + age +"years old!");
}
sayHello("dal", 14);
sayHello("soyeon", 25);
sayHello("nico", 29);

function plus(a, b){
    console.log(a + b);
}
function devide(a, b){
    console.log(a / b);
}
plus(18, 27);
devide(15, 5);

const연습

const player = {
    name: "soyeon",
    sayHello: function (oneOtherName) {
        console.log(oneOtherName);
        console.log(document.getElementById("greeting").innerText);
        //HTML -> <h1 id = "greeting"> HELLO! </h1>
        console.log("Hello my name is " + oneOtherName + " I'm ");
    },
    age: 15
}
console.log(player.name);
player.sayHello("sysy");    // ------> 이름 변경 가능
console.log(player);       // -------> 변경된 이름으로 나옴

const me = {
    name: function (otherName){
        console.log("Hello my name is " + otherName + ".");
    },
    age: function (otherAge){
        console.log("I'm " + otherAge + " years old.");
    },
}
console.log(me);
me.name("soyeon");
me.age(26);

caculator 과제

const caculator = {
    plus: function(a, b) {
        console.log(a + b)
    },
    
    minus: function(a, b) {
        console.log(a - b)
    },
    squa: function(a, b) {
        console.log(a ** b)
    },
    div:  function(a, b) {
        console.log(a / b)
    },
};

caculator.plus(2, 3);
caculator.minus(82432, 654);
caculator.squa(5, 3);
caculator.div(20, 4);

return 익히기

console.log는 단순히 콘솔창에 수치만 입력해줄 뿐 다른 의미가 없다.
(자바스크립트 코드에서는 그 값을 바로 얻을 수 없음)
따라서 우리는 변수(const, let, var)에 function을 할당하여 return을 통해 그 값을 반환하여(?) 가질 수 있다.
return을 통해 반환된 function은 더이상 사용 불가!!

const age = 96;
function calculatekrAge(ageOfForeigner){
    ageOfForeigner +2;
}

const krAge = calculatekrAge(age);
console.log(krAge);    // output ------> undefined



const caculator = {
    plus: function(a, b) {
        return a + b;
    },
    minus: function(a, b) {
        return a - b;
    },
    mult: function(a, b) {
        return a ** b;
    },
    div:  function(a, b) {
        return a / b;
    },
};

const plusResult = caculator.plus(2, 3);  // output -----> 5
const minusResult = caculator.minus(645, plusResult);  // output -----> (645-5) 640
const multResult = caculator.mult(minusResult, 2);  // output -----> (640**2 604의 제곱) 409600 
const divResult = caculator.div(minusResult, plusResult);  // output -----> (640/5) 128

if

if문은 조건문을 통해 boolean타입으로 반환된다.
parseInt()는 문자열과 숫자를 구별하여 정수로 반환해주는 함수.
isNaN()은 값이 Not a Number인지 아닌지 구별해주는 함수.
else는 선택사항(사용해도 되고, 안해도 됨)
"==="은 "같다"
"!=="은 "다르다"
"&&"은 "그리고" => 모든 조건이 true여야 true값을 가짐.
"||"는 "또는" => 여러 개 중 하나만 true 값을 가지면 true.
                      모든 값이 다 false일 경우, false.

const age = parseInt( prompt("How old are you?") );

if(isNaN(age) || age < 0){
    console.log("Please write a number.");
} else if(age < 18){
    console.log("You are too young.");
} else if(age >= 18 && age <= 50){
    console.log("Welcome Drinking World!")
} else{
    console.log("Drinking is not good for your health.");
}