바닐라 JS로 크롬 앱 만들기(~02)

https://nomadcoders.co/javascript-for-beginners/lobby

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

 

변수

const a = 5;
const b = 2;

// 변수 생성
let myName = "minhee"
console.log('hello ' + myName)
// hello minhee

// 변수 값 변경(재할당)
myName = "kimminhee"
console.log("your new name is " + myName)
// your new name is kimminhee

• const 그냥 다 안바뀜_대게 많이 사용
• let는 재할당만 가능_변해야 하는 경우 사용
• var는 재선언, 재할당 모두 가능_코드가 길어질 경우 재선언되거나 재 할당 될 경우 어려워짐, 사용 지양하기

 

• null 아무것도 없음(의도적으로 없다는걸 표현)
• undefined 정의되지 않음(값이 주어지지 않아 비어있는 상태)

---

const toBuy = ["potato", "tomato", "pizza"];
toBuy.push("kimbap");

console.log(toBuy);
// ['potato', 'tomato', 'pizza', 'kimbap']

const로 선언한 배열에서는 배열의 값을 추가할 수 있는 이유
=상수로 선언된 변수에 값을 할당하는 것

변수에는 그 값을 갖는 메모리 주소를 할당한다.
주소를 할당 시, 그 주소가 갖는 값이 배열이 아닌 값이라면 (문자열이든, 정수든, 소수든) '그 값' 을 갖는 변수 자체는 상수로 고정된다 (그 값을 참조해오는 메모리 주소값을 기준으로)

하지만 배열로 할당을 받은 상수 변수의 경우
할당한 배열 값을 갖는 메모리 주소를 받아와서 참조하는 것이다.
상수 변수에 재할당/수정하는 것이 아닌 참조하는 배열의 값을 수정/추가/제거 하는 것이기 때문에 배열의 주소를 가져와서 참조하는 상수 변수 자체에 대해서는 영향이 없음 == 배열의 주소값의 첫 부분(배열[0]의 주소)를 가져오는 것이기 때문에 그 주소에는 변경이 없으므로 상수 변수에는 영향이 없고, 그 주소에 할당되는 값들은 변경이 가능한 것이며, 추가/삭제되는 것 또한 그 이후의 연속된 메모리 주소에 대해 적용되는 것이므로 영향이 없다.

---

object(객체)에서 value를 변경하거나 property(특성)를 추가할 수 있다.

const player = {
  name: "mini",
  points: 10,
  fat: true,
};

console.log(player);
// {name: 'mini', points: 10, fat: true}


player.fat = false;  // 변경
player.lasrName="potato";  // 맨 뒤로 추가
player.points= player.points + 15  // 연산

console.log(player);
// { name: 'mini', points: 25, fat: false, lasrName: 'potato' }

---

객체 안에 함수도 넣을 수 있다.(일반적인 함수의 형태와는 다른거 확인)

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

// player객체 안의 함수 호출
player.sayHello("jin");
player.sayHello('kim')

// Hello jin nice to meet you
// Hello kim nice to meet you

함수를 생성하면서 인자를 넣어주면 후에 함수를 호출할 때 그 인자에 넣을 값을 같이 넣어주면 함수를 실행하면서 인자에 호출시 넣은 값이 들어가게 된다.

function sayHello(name){
	console.log("hello "+name)
}

sayHello("min") // hello min
sayHello("Lin") // hello Lin

인자를 두개 넣어도 된다.(호출 시 많은 인자를 보내더라도 생성된 함수의 인자 갯수와 출력 값에 해당 값에 자리를 만들지 않는다면 아무런 결과도 받아볼 수 없다.)

function sayHello(name, age){
	console.log("hello my name is "+name+" and "+age+" years old.")
}

sayHello("min", 10) // hello my name is min and 10 years old.
sayHello("Lin", 24) // hello my name is Lin and 24 years old.

 

➕함수에서 인수를 사용하는 이유? 함수에 값을 보내려고

➕하나의 함수가 가질 수 있는 인자 수는 정해지지 않았고, 편의로 만드는 경우가 많다. 다만, 인자의 수가 늘어나게 되면 각각의 인자가 어떤 역할을 하게 되는지에 대해 복잡성이 생기고 많을수록 복잡한 프로그램이 된다. 인자가 없는 함수가 사실 가장 이해하기 편하고 사용하기에도 편리하다.  잘 만들어진 함수라면 인자가 없어도 함수가 어떤 역할을 하는지 알 수 있다.  

---

전체 응용

const calculater = {
    plus: function (a, b) {
        console.log(a + b)
    },
    minus: function (a, b) {
        console.log(a - b)
    },
    divide: function (a, b) {
        console.log(a / b)
    },
    power: function (a, b) {
        console.log(a ** b)
    },
};
calculater.plus(2, 4);
calculater.minus(2, 4);
calculater.divide(2, 4);
calculater.power(2, 4);

// 6
// -2
// 0.5
// 16

return

const calculater = {
    plus: function (a, b) {
        return a + b;
    },
    minus: function (a, b) {
        return a - b;
    },
    times: function (a, b) {
        return a * b;
    },
    divide: function (a, b) {
        return a / b;
    },
    power: function (a, b) {
        return a ** b;
    },
};

const plusResult = calculater.plus(2, 3);
const minusResult = calculater.minus(plusResult, 10);
const timesResult = calculater.times(10, minusResult);
const divideResult = calculater.divide(timesResult, plusResult);
const powerResult = calculater.power(divideResult, minusResult);

---

return

함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환(함수 내부에서 일어난 일은 외부로 보냄)

const age = 96;

function calculaterKrAge(ageOfForeigner) {
    // ageOfForeigner + 2;     // undefined
    return ageOfForeigner + 2; // 98
}

const krAge = calculaterKrAge(age);
// return한게 여기 calculaterKrAge(age)의 값이 되고 그제서야 krAge를 console에 출력 할 수 있게 됨

console.log(krAge);

➕return을 사용하는 이유? 함수에서 값을 얻으려고

➕함수에서 return값은 반드시 있어야 한다.  return 값은 함수가 수행한 결과를 확인해서 제대로 동작했는지를 알 수 있는 유일한 값이다. 

---

parseInt( )

parseInt 함수는 첫 번째 인자를 문자열로 변환하고, 그 값을 파싱하여 정수나 NaN을 반환

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/parseInt

parseInt(string)
parseInt(string, radix)

매개변수

• string : 파싱할 값입니다. 문자열이 아닐 경우 추상 연산을 사용해 문자열로 변환합니다. 문자열의 선행 공백은 무시합니다.
  • radix가 2보다 작거나 36보다 큰 경우_NaN
  • 공백이 아닌 첫 문자를 숫자로 변환할 수 없는 경우_NaN
• radix(택) : string의 진수를 나타내는 2부터 36까지의 정수입니다. 주의하세요. 기본 값이 10이 아닙니다! Number 자료형이 아닌 경우 Number로 변환합니다.

반환 값

• 주어진 string에서 파싱한 정수

---

isNaN( )

isNaN() 함수는 어떤 값이 NaN(Not a Number_숫자가 아닌지)인지 판별, isNaN 함수는 몇몇 혼란스러운 케이스을 가지고 있으므로,  Number.isNaN()으로 바꾸는 편이 좋을 수도 있습니다.

isNaN(value)

매개변수

• value : 테스트되는 값

반환 값

• 주어진 값이 NaN(숫자가 아니면)이면 true, 아니면(숫자) false
  • (isNaN-숫자가 아니다 ➡️ true_그래 숫자 아니야! / false_아니 숫자야!)

---

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

if(isNaN(age)){
    console.log("please write a number") // 즉 참인 값이 숫자가 아닌 경우인 것
}else {
    console.log("Thank you for writing your age.")
}

prompt창으로써 값을 입력하면 그 값을 parasInt를 사용해서 Number로 type을 변형해준다. (입력 값이 숫자든 문자든 stringfh 문자형으로 인식되어서 parasInt로 숫자로 바꿔준다)

 

후 parasInt로 인해 숫자로 바뀌었다면 isNaN의 값이 else여서 "Thank~~'가 출력이 되고 prompt로 문자를 입력해서 parasInt를 하였어도 문자라 바뀌지 않은 것을 isNaN이 true로 "please~~"가 출력된다.

---

조건문에 age에 대한 조건을 추가함

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

if(isNaN(age) || age < 0){ // 숫자가 아니거나(isNaN_true) 숫자는 맞는데(isNaN_false) 0보다 작거나
    console.log("please write a real positive 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 === 100) {   
    console.log("Wow~ You are wise.");
} else if (age > 80) {
    console.log("You can do whatever you want.");
}

if(isNaN(age) || age < 0){ 
    console.log("please write a real positive number.") 
}

>숫자가 아니거나(isNaN_true) 숫자는 맞는데(isNaN_false) 0보다 작거나

 

else if (age === 100) {   
    console.log("Wow~ You are wise.");
} else if (age > 80) {
    console.log("You can do whatever you want.");
}

> age>80이 먼저라면 age가 100일 경우 age>80에 해당이 되므로 "You~~"가 출력이 된다. 그래서 age===100을 age>80 보다 먼저 위치하게 함으로써 "Wow~"가 출력이 되고 75, 89, 101등등으로 넘어가게 age>80에 해당하게 되면 age===100을 건너뛰고 "You~~"가 출력 되게 된다. 

 

if((a && b) || (c && d) || (x && y)){
}

라는 해당 식이 있는 경우 x&&y부터 확인하면서 조건을 맞추어 나간다.