[노마드코더] Vanilla_Js (2강 - 변수,Boolean, 배열, 함수, 조건문)

Variable : const, let ,var

// console.log
console.log(0987) ; // 콘솔에 내가 넣은 number출력

console.log(5 + 2); // 7
console.log(5 * 2); // 10
console.log(5 / 2); // 2.5
// 2를 3으로 바꾸고 싶으면, 3개의 코드를 수정해야함
// 그렇게 되면 수정하는데 오래걸림 (Worst case 생각)
// 동일한 무언가를 바꾸고 싶을때 변수 설정

const a = 5; 
// a =7; -> 이렇게 선언한다면 오류 (const는 바뀌지 않는 값)
// 만약 선언한 변수의 값을 변경하고 싶으면 let과 var을 사용
// var a = 5; a = 4 -> 가능


console.log(a + 2); // 7
console.log(a * 2); // 10
console.log(a / 2); // 2.5
// 동일한 결과값 출력
// 이렇게 변수를 설정하면 값을 변경하고 싶을때 a하나만 변경해주면 됨

• variable를 선언할때는 다른사람이 나의 코드를 볼때도 이 변수가 어떤 것을 의미하는지 알려주는 이름형식으로 작성해야함
  변수의 이름이 긴 변수를 가져간다면 공백이 아니라 통상적으로 대문자 사용

//console.log 창에는 문자와 문자끼리 더할 수도 있음
myName = "hong";

console.log("your new name is "+myName); // your new name is ho

---

Booleans : ture, false

onst amIFat = false;
const areYouFat = true;
const isAirFat = null; // 아무것도 없음

console.log(amIFat); // false
console.log(areYouFat); // true
console.log(isAirFat); // 아무것도 출력 안 됨

let something;
console.log(something);//undifined

• null === false (x)
  :null은 아무것도 없는 상태로 채워진 상태, false는 값이 있는 경우
  null과 같은 경우는 자연적으로 만들어질 수 없고, 임의로 변수안에 아무것도 없다는 것을 확실히 하기 위해 사용함
• null === undefined (x)
  :null은 아무것도 없는 상태로 변수를 채웠지만, undefined는 변수를 선언하고 아무런 값을 주지 않은 상태
  //사용자가 로그인을 했는지 안했는지 확인할 경우 , 비디오가 재생되고 있는가? (ture or flase)

---

Arrays : 배열

const wed ="wed";
const thu ="thu";
const fri ="fri";
const sat ="sat";
const sun ="sun";

const daysOfWeek = mon + tue + wed + thu + fri; // montuewedthufri
// 단지 문자를 나열할 뿐

const dayOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; // 배열
// 데이터를 나열하기 위한 방법 중 하나
// [] 안에 콤마(,)로 데이터들을 나열할 수 있음

console.log(dayOfWeek); // ["mon", "tue", "wed", "thu", "fri", "sat"]

// Get Item from Array
console.log(dayOfWeek[5]); // sat

// Add one more day to the array
daysOfWeek.push("sun");

console.log(dayOfWeek); // ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]

---

Object : 객체

const player = {
    name : "hong",
    points : 10,
    handsome : true,
};

console.log(player); // {name : "hong", points : 10, handsome : true}
console.log(player.name); // hong
console.log(player["name"]); // hong

player.handsome = false; // const 전체를 하나의 값으로서 업데이트 하려할 때 에러, 객체 안에 값들은 업데이트 할 수 있음
console.log(player); // {name : "hong", points : 10, handsome : false}

player.lastName = "potato";
player.points = player.points + 10;
console.log(player); // {name : "hong", points : 20, handsome : false, lastName : "potato"}

---

function : 함수

• 함수란
  어떤 코드를 캡슐화해서, 실행을 여러 번 할 수 있게 해줌
  함수에 데이터를 전달해 주는 경우, 전달 할 수 있는 데이터는 여러개가 와도 상관없음
  만약 정해진 만큼의 데이터를 함수 호출시 전달해 주지 않을 때, 오류가 발생하거나 undefined

function sayHello(name, age) {
    console.log("Hello my name is " + name + " and I'm " + age);
}

sayHello("hong" , 10); // Hello my name is hong and I'm 10
sayHello("gil", 8); // Hello my name is gil and I'm 8

function plus(a,b){
    console.log(a+b);
}

plus(); // undefined
plus(7, 60); // 67

객체 안에서도 함수 선언가능

const player ={
    name: "nico",
    sayHello : function(otherPersonName){
        console.log("Hello " + otherPersonName + " nice to meet you ") 
    },
}
player.sayHello("hong"); // Hello hong nice to meet you
player.sayHello("gil"); // Hello gil nice to meet you
// 이렇게 함수를 선언하면 상황에 맞게 원하는 데이터 값을 호출 가능

function -> return

• 함수의 결과 값을 얻기 위해 사용
• function이 작동했을 때 return하는 값이 함수를 호출하는 변수의 값이 됨

const age = 96;
function calculateKrAge(ageOfForeigner) {
    return ageOfForeigner + 2;
}
const krAge = calculateKrAge(age);
console.log(krAge) // 98

---

조건문 : if, else, else if

const age = parseInt(prompt("How old are you?"));// parseInt는 string을 number로 바꿔주는 함수
//사용자가 입력한 값이 숫자가 아니라 다른 값을 주게 될 경우를 인지할 수 있음

console.log(isNaN(age)); // typeof가 NaN면 true 아니면 false 반환

if (isNaN(age)) { // is age NaN?
    console.log("Please write a number");
} else if (age < 18){
    console.log("You are too young.");
}else if (age >=18 && age <= 50){
    console.log("You can drink.");
}else if (age > 50 && age <= 80){
    console.log("You should exercise.");
}else if (age > 80) {
    console.log("You can do whatever you want.");
}

-> prompt()

• prompt는 사용자에게 창을 띄울 수 있게 해줌 (alret와 다름)
• prompt 2개의 인자를 받는데 (문자, default)
• 만약 값을 넣지 않고 취소를 누르면 null , 값을 넣게 되면 그 값을 출력
• propmt는 사용자가 데이터를 입력할 때까지 동작을 멈추게 되고, 이는 비효율적 방법
  옛날 방식이므로 잘 사용하지는 않음