[JavaScript] 230324 학습일기

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

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

노마드 코더 <바닐라 JS로 크롬 앱 만들기>로 학습한 내용을 정리하였다.

---

1. array 배열

 

• 파이썬의 list 같은 개념이다.
• 숫자, string, bool 등 여러 자료형이 하나의 array에 함께 들어갈 수 있다.
• 시작과 끝에 대괄호를 붙인다. [와 ]

 

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

const daysOfWeek = [mon, tue, wed, thu, fri, sat, sun];

const nonsense = [1,2,"hello",false,null,true,undefined];

 

 

 

2. 인덱싱 indexing/ Get item from array

 

JS에서 인덱싱하는 방법은 파이썬과 동일하다.

0,1,2,3,4,5 ... 순서로 간다.

 

const mon = "mon";
const tue = "tue";
const wed = "wednes";
const thu = "thu";
const fri = "fri";
const sat = "sat";
const sun = "sun";

const daysOfWeek = [mon, tue, wed, thu, fri, sat, sun];

const nonsense = [1,2,"hello",false,null,true,undefined];

console.log(daysOfWeek[2]);

 

 

3. array에 원소 추가하기

 

array명.push(추가할 원소)

 

원래 daysOfWeek 배열의 항목 중 sun을 지우고

 

daysOfWeek 배열에 sun이라는 원소를 추가해보자.

const mon = "mon";
const tue = "tue";
const wed = "wednes";
const thu = "thu";
const fri = "fri";
const sat = "sat";
const sun = "sun";

const daysOfWeek = [mon, tue, wed, thu, fri, sat];

daysOfWeek.push(sun);

console.log(daysOfWeek[6]);

 

 

이렇게 추가된 것을 볼 수 있다.1

 

---

오브젝트에 대해 알아보자.

 

4. Object

 

하나의 개체(entity)에 여러 특성들을 나타내고 싶은 경우

 

entity.attribute

 

여기서 이 entity가 오브젝트_명이다.

 

모양으로 써주는 것이 효과적이다. 정돈도 편하고.

데이터를 정리하는 좋은 방법이다.

 

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

 

 

 

player.name에 접근하는 방법은 하나 더 있다.

 

object_명["특성_명"]

 

const player = {
    name : "tina",
    points: 10,
    fat : true,
};
console.log(player);
console.log(player.name);
console.log(player["points"]);

다만 그 특성에 "" 따옴표를 붙여줘야 한다.

 

 

 

5. object 업데이트

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

console.log(player);
player.fat = false;
console.log(player);

player.fat을 false로 바꿔줬더니 업데이트 된 모습을 볼 수 있다.

 

그런데 여기서 의문이 생긴다.

 

player는 const로 만들어진 오브젝트라 업데이트가 안 되는데?

그러나 지금은 오브젝트 내부의 무언가를 바꾸는 것이지 object는 동일하다.

 

error는 constant 전체를 하나의 값으로서 업데이트 하려고 할 때 발생한다.

 

 

새롭게 특성을 추가할 수도 있다.

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

console.log(player);
player.lastName = "Lee";
console.log(player);

---

함수를 만들어보자.

 

6. 함수

 

function 함수_명()

{

}

 

 

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

sayHello();

 

 

7. argument

argument는 function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법.

 

아 참고로 

f(x) = x+8

f(3) = 11

 

여기서 x는 parameter, 3은 argument다.

f(3)은 f(x)라는 함수를 호출하는 것이다.

 

function sayHello(nameOfPerson) {
    console.log(nameOfPerson);
}

sayHello("tina");
sayHello("Jay");
sayHello("Johnny");

tina, Jay, Johnny를 argument로 주었다.

 

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

sayHello("tina",10);
sayHello("Jay",20);
sayHello("Johnny",50);

 

8. 오브젝트 안에 함수 넣기

const player = {
    name: "tina",
    sayHello: function(){
        console.log("hello!");
    }
}

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

 

 

오브젝트 내의 함수에 arguments를 넣을 수 있다.

const player = {
    name: "tina",
    sayHello: function(otherPersonsName){
        console.log("hello! " + otherPersonsName + " nice to meet you!");
    }
}

console.log(player.name);
player.sayHello("Jay");

 

오브젝트는 파이썬의 class와 같은 것 같다.

---

9.

console에서 쓸 수 있는 것들은

console.log(console);

이렇게 입력하면 출력된다.

 

 

10.

인자를 하나만 받을 수 있는 함수에 여러개의 인자를 넣어 호출했다고 하자.

그러면 그냥 아무 무리 없이 첫번째 인자에 대해서만 함수의 코드들이 적용된다.

 

 

11. 

calculator라는 오브젝트를 만들어보자.

const calculator = {
    add: function(a,b)
    {
        console.log(a+b);
    },
    sub: function(a,b)
    {
        console.log(a-b);        
    },
    multiply: function(a,b)
    {
        console.log(a*b);
    },
    div: function(a,b)
    {
        console.log(a/b);
    },
    powerof: function(a,b)
    {
        console.log(a**b);
    },
};

calculator.add(1,2);
calculator.powerof(1,2);

---

12. return

return은 function이 function의 밖과 소통하는 방법이다.

function calculateKrAge(ageOfForeigner) {
    return ageOfForeigner +2
}

const krAge = calculateKrAge(96);

console.log(krAge);

 

---

13. prompt

사용자에게 창을 띄울 수 있도록 해줌.

prompt는 message(문자), default 이렇게 두개의 값을 인자로 받음.

근데 우리는 message만 넣어줄 것임.

 

prompt는 사용자에게서 메시지를 보여주고 값을 넣으라고 말해줌.

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

그러면 이렇게 입력창이 뜨고 탭 이름 왼쪽이 계속 돌아가며 로딩중이라는 걸 나타낸다.

 

20을 입력했더니

이렇게 콘솔에 20이 뜬다.

 

prompt는 내가 아무것도 안 하면 아무 일도 일어나지 않게 한다.

이것은 자바스크립트의 코드의 실행을 멈추게 함.(내가 아무것도 입력하지 않으면 console.log 코드는 실행되지 않음.)

그래서 더이상 prompt 함수를 사용하지 않음.

 

prompt를 안 쓰는 이유:

• message가 별로 안 예쁨
• 아무런 스타일, 즉 CSS를 적용시킬 수 없음.
• 어떤 브라우저는 prompt로 생기는 팝업을 제한하기도 함.

따라서 요즘에는 대부분이 HTML, CSS로 만든 자신만의 창을 사용함.

 

 

 

14. typeof

value의 type을 보려면 

typeof

라는 키워드를 써야함.

 

typeof 변수명

 

typeof(변수명)

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

 

실행했을 때 나오는 입력창에 20을 입력했다.

근데 string이란다.

 

prompt를 실행했을 때 나오는 입력창에 무엇을 입력하면 그건 다 string이 된다.

이건 파이썬 input이랑 비슷한 거 같다.

 

 

15.

어떤 자료형의 타입을 변경해보자.

string을 int로 변환해보자.

원래는 숫자인데 "15", "7" 이렇게 스트링으로 받아진 문자들을 바꾸는 것이다.

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

실행했을 때 입력창에 20을 입력했다.

 

그냥 일반적인 문자로 이루어진 찐 문자열을 int로 바꾸려고 하면

const age = parseInt("lalala");
console.log(typeof age);
console.log(age);

type은 바뀌어서 나오는데

age 자체를 콘솔에 출력하려고 하면 NaN이라면서 숫자가 아니라고 나온다.

NaN은 Not a Number라는 뜻이다.

 

 

16. isNaN()

 

isNaN()은 NaN인지 아닌지 확인해주는 함수이며 boolean을 반환한다.

 

NaN이면(숫자가 아니면) true 반환

NaN이 아니면(숫자면) false 반환

 

유저가 입력한 나이가 숫자가 아니면 다시 입력하라는 메시지를 보내도록 만들어보자.

const age= prompt("How old are you?");
if (isNaN(age)) {
    console.log("Please write a number");
}

 

 

17. else if 사용하기

 

18살 미만이면 너무 어려 술을 못 마신다는 메시지를 추가하려고 한다.

const age= prompt("How old are you?");
if (isNaN(age)) {
    console.log("Please write a number");
}
else if (age<18) {
    console.log("You are too young");
}
else {
    console.log("You can drink");
}

 

 

• AND operator: 교집합의 조건은 &&을 사용해 표현한다.
  • C와 동일, 파이썬의 and
• OR operator: 합집합의 조건은 ||을 사용해 표현한다.
  • C와 동일, 파이썬의 or

 

이거 근데 parseInt 안 해도 잘 된다?!