Computer Science/FrontEnd

노마드 코더 JS #2 | Welcome to JavaScript

토마토. 2022. 2. 20. 12:13

#2.3 const and let

변수를 만드는 두 가지 방식 const와 let

const는 constant 값이 바뀔 수 없음

let은 바뀔 수 있어서 값을 업데이트할 수 있음

형변환 필요 없음 알아서 해주는 듯

console.log(523432);
console.log("String");
console.log('String');
console.log(5+2);
console.log(5*2);
console.log(5235/2432);

let a = 5;
a = "nico";
const b = "a";
console.log(a);
console.log(a);
console.log(b);

 

const가 디폴트, 변수를 업데이트해야 하는 경우 let을 사용함

var은 아무 규칙도 없음

var 쓰지 말 것

 

#2.4 Booleans

true, false

const amIFat = true;
console.log(!amIFat);

null

아무것도 없는 것

const amIFat = true;
console.log(!amIFat);
const nullEx = null;
let something; //undefined
console.log(something);

undefined

 

#2.5 Arrays

데이터를 저장하는 방법

가장 기본적인 데이터를 저장하는 방법은 배열.

const daysOfWeek = ["mon","tue","wed",false,null,true,undefined,1];
console.log(daysOfWeek);

-> 자바스크립트 쉬운 언어 같다. 

 

인덱싱도 마찬가지로

console.log(daysOfWeek[5]);

array를 가지고 할 수 있는 다양한 조작

const daysOfWeek = ["mon","tue","wed",false,null,true,undefined,1];
// Get Item from Array
console.log(daysOfWeek);
// Add one more day to the array
daysOfWeek.push("hi");
console.log(daysOfWeek);
const toBuy = ["potato", "tomato"];
toBuy.push("kimbab");

 

#2.6 Objects

object를 생성해야 할 때가 있다.

ex - 비디오 게임을 만들고 있다면? 

캐릭터, 플레이어를 만든다고 하자. 

데이터를 정리하기 위해서? 

const player = {
    name:"nico", //properties
    points:10,
    fat:true,
};
console.log(player);
console.log(player.name);

player.fat = false;

console.log(player);
console.log(player.name);

object 안에 추가하는 것도 가능할까

const player = {
    name:"nico", //properties
    points:10,
    fat:true,
};
console.log(player);
console.log(player.name);

player.fat = false;
player.lastName = "Park";
console.log(player);
console.log(player.name);

 

#2.7 Function part One

function sayHello(){
    console.log("Hello!");
}

console.log(sayHello());

 

#2.8 Functions part Two

데이터를 보내는 법은?

function sayHello(nameOfPerson){
    console.log("Hello! " + nameOfPerson);
}

console.log(sayHello("youngzoo"));
console.log(sayHello("tomato"));
console.log(sayHello("nico"));
function plus(a, b){
    console.log(a+b);
}
function divide(a, b){
    console.log(a/b);
}
plus(1, 2);
divide(1, 2);

 

player object를 만들어보자

const player = {
    name:"nico",
    sayHello:function(name){
        console.log("Hello "+name+" nice to meet you");
    },
};
console.log(player.name);
player.sayHello("nico");

 

#2.9 Recap

- let, const 수정 가능 여부가 다름. 항상 const를 사용하되 가끔 let 사용

- null, undefined, string, integer

 - array (array.push()) 

 

#2.10 Recap II

- arrays

- properties -> object

- function : get data

const calculator = {
    add:function addition(fNum, sNum){
        console.log(fNum+sNum);
    },
    subtract:function minus(fNum, sNum){
        console.log(fNum-sNum);
    },
    multiply:function multi(fNum, sNum){
        console.log(fNum*sNum);
    },
    divide:function divid(fNum, sNum){
        console.log(fNum/sNum);
    },
    power:function pow(fNum, sNum){
        console.log(fNum**sNum);
    }
}

calculator.add(1,2);
calculator.subtract(1,2);
calculator.multiply(1,2);
calculator.divide(1,2);
calculator.power(1,2);

 

 

#2.11 Returns

console.log 말고 다른 걸 사용해보자!

나에게 변수로 돌려주면 좋겠다. 

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

 

const calculator = {
    add:function addition(fNum, sNum){
        return (fNum+sNum);
    },
    subtract:function minus(fNum, sNum){
        return (fNum-sNum);
    },
    multiply:function multi(fNum, sNum){
        return (fNum*sNum);
    },
    divide:function divid(fNum, sNum){
        return (fNum/sNum);
    },
    power:function pow(fNum, sNum){
        return (fNum**sNum);
    }
}

const plusResult = calculator.add(1,2);
const minusResult = calculator.subtract(1,2);
const timesResult = calculator.multiply(1,2);
const divideResult = calculator.divide(timesResult,2);
const powerResult = calculator.power(1,divideResult);

 

#2.12 Recap

return이 필요한 이유

중요한 개념임

그 다음에 어떻게 HTML로 JS를 바꿀 수 있을까? 

 

#2.13 Conditionals

type 변환하는 법

기본은 string

const age = prompt("How ole are you?");
console.log(typeof age);

parseInt()라는 함수 사용함

const age = prompt("How ole are you?");
console.log(parseInt(age));

int가 아닌 string은 체크

만약 그 결과가 NaN이라면, 에러 메시지 출력해줄 수 있음

 

#2.14 Conditionals part Two

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

console.log(isNaN(age)); // int 아니라서 NaN이면 true

if (isNaN(age)){
    alert("Error. Please write a number");
}
else {
    console.log(age);
}

 

#2.15 Conditionals part Three

else if

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

console.log(isNaN(age)); // int 아니라서 NaN이면 true

if (isNaN(age)){
    alert("Error. Please write a number");
}
else if (age < 18) {
    console.log("you are too young.");
}
else {
    console.log(age);
}

 

#2.16 Recap