[TIL]20210823~25

박창현·2021년 8월 25일
0

TODAY I LEARNED

목록 보기
34/53

노마드코더 바닐라js강의로 공부.

JS

let - 함수 선언, var도 비슷한 역할이지만 옛날 방식임 사용X.
const - 상수 선언.
대부분의 경우 const를 사용하고, 필요한 경우 let을 주로 사용한다.
단, const에서 유심히 봐야할 부분이 있다.
질문글을 그대로 가져오면

cons로 선언하면 변하지 않는 거라고 했는데
const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 에서
어떻게 daysOfWeek.push("sun"); 을 써서 내용물을 추가할 수 있나요?
array 안의 내용물은 예외인건가요?

네 변수 자체는 재할당이 불가능하지만 내용물은 언제든지 변경 가능합니다.
이것을 이해하기 위해서 하나의 박스를 생각하시면 좋을 것 같습니다.
말씀하신대로 const a = 2; 이렇게 있으면 a = 4; 이렇게 바꾸는건 안됩니다.
하지만 배열과 같은 경우에는 내용물 안의 요소들은 변경이 가능합니다.
이게 박스로 생각하면 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 이렇게 선언을 하면 이후에 daysOfWeek = ["hi"]; 이렇게 수정하는건 불가능합니다. 왜냐하면 박스 그 통째로 바꾸려고 하기 때문입니다.
하지만 그 박스 안의 내용물들을 추가하거나 삭제할 수는 있습니다.

즉, const를 상자로 비유하면 상자의 내용물을 넣거나 빼는것은 괜찮지만, 상자 자체를 교체하는 것만 불가능 하다.
앞전 mbti클론코딩에서도 const count=[0,0,0] 꼴에서 각 요소에 접근해서 +=1 을 했는데 이때 이해하지 못한부분을 여기서 이해했다.

Object

c언어의 구조체와 비슷하다. { }로 요소들을 감싼다.

const player = {
  name:"Kid",
  points:"10",
};

위의 코드처럼 작성할 수 있고, player은
player.name을 통해 호출이 가능하다. 물론 player["name"]을 통해서도 가능하다. 내부의 요소를 추가할때는 그냥
player.age="20"; 이런식으로 추가하면 된다.

object의 구조를 잘 보면 console.log 도 똑같은 구조를 가졌다는 걸 알 수 있다. console이라는 object안에 log가 포함되어있는 것이다.

설명이 필요하지 않은 데이터 리스트들은 array로,
설명이 필요한 정보가 담긴 데이터 리스트들은 object로 저장하면 된다.

function

function sayHello(){

};

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

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

이런식으로도 구성할 수 있다.

prompt( )

promt("A")를 하면 alert와 비슷한 창에 "A"를 출력하고, 사용자가 입력할 수 있는 칸을 만들어 준다.
하지만 요즘은 잘 사용하지 않는다. 창에 css를 꾸밀수 없고, js코드를 일시적으로 멈추게 하기때문. 매우 예전에 쓰던 구식이다.

형변환 | parseInt()

parseInt()를 사용하면 숫자로 구성된 string을 int로 변환시켜 준다.

괜찮은 질문이 있어서 본문 그대로 가져왔다.
const age = parseInt(prompt("Please write your age"));
console.log(age);
---> (When written "lalalala") NaN
Because "lalalala" is not a number.
But if I try:
const age = parseInt(prompt("Please write your age"));
console.log(typeof age);
---> (When written "lalalala") number
It says it is a number. It is not a number(NaN), but it is a number.
Should I just understand it as parseInt() turns everything into number first and isNaN can determine if it is actually a number or not?
nicolas는 이내용이 맞고, 이 예시가 js가 이상한 언어인 좋은 예시라고 한다.

== 은 값만을 비교하고
=== 은 유형도 비교하여 === 사용을 권장함.
ex)
0 == false ---> true
0 === false ---> false

profile
개강했기에 가끔씩 업로드.

0개의 댓글