규칙
변수만들때 let, const, var차이
let 재선언 금지, 재할당 가능
const 재선언 금지, 재할당 금지
var 재선언 가능, 재할당 가능
let a = b;
let a = c;
//재선언 금지
let a = b;
a = c;
//재할당은 가능
const a = b;
const a = c;
//재선언 금지
const a = b;
a = c;
//재할당 금지
var a = b;
var a = c;
a = d;
//재선언, 재할당 가능
data type 에는 숫자 , 문자 말고도
boolean 값으로 true,false가 있다.
또 다른 값으로는 null, undefined가 있다.
1. null: 컴퓨터에 값이 없음을 의도적으로 알리기 위해 채워진 값이다
2. undefined: let something; 처럼 변수에 값을 지정하지 않으면
메모리 상에 자리는 존재하지만 값이 채워지지 않은 채로 있다.
좋은질문
재할당
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는 선언한 주소를 바꿀수 없다고 보시면됩니다.
const a = '111';
a는 111이라는 문자열정보가들어있는 메모리 주소를 가리키는거죠. 케비넷 위치라고할까.
a = '222'; 는 222 가들어있는 데이터의 주소로 매핑정보를 바꾸는거라 보시면 됩니다.
배열에 요소를 추가하는건
주소를 바꾸는게 아니라
해당 주소의 데이터를 변경하는 거라
변수에 매핑된 메모리주소는 그대로여서
const 로 선언한 상태에서도 배열의 요소를 변경하는것이
가능하다고 이해하면 편할겁니다.
좋은 댓글이있어서 갖고왔습니다!
펑션의 괄호 안의 매개변수에서 아규먼트를 받아들일 수 있다.
ex)
function sayHello(nameOfPerson) {
console.log(nameOfPerson);
}
sayHello("nico")
sayHello("dal")
sayHello("lynn") // nameOfPerson은 "nico" "dal" "lynn" 을 받았다고 생각하면 됨.
아규먼트는 하나만 받을 수 있는게 아니라 여러개를 받을 수 있음.
ex)
function sayHello(nameOfPerson , age) {
console.log(nameOfPerson);
}
sayHello("nico" , 12);
sayHello("dal" , 20);
sayHello("lynn" , 23); // sayHello function의 매개변수 2개는 아래 2개의 argument를 받는 중임.
function의 값은 function 안에서만 존재한다.
오브젝트 안에서 매개변수가 아규먼트를 받는 방식
ex)
const player = {
name : function(Name) {
console.log("Your Name is " + Name + " 입니다.")
} ,
sayHello : function(Age) {
console.log("Your age is " + Age + " 입니다." )
}
}
player.sayHello(14)
player.name("james")
sNaN 은 무언가가 NaN인지 판별하는 방법
const age= parseInt(prompt (“How old are you?”));
console.log(isNaN(age));
숫자입력하면 false
글자입력하면 ture
if(condition){
실행코드=true ---실행
실행코드=false ----다음 else 값 실행
} else{
}
condition은 boolean으로 판별가능해야 한다, (true , false)
if(isNaN(age)){
console.log(“please wirte a number”);
} else{
console.log(“Thank you for writing your age”);
}
- getElementsByClassName() : 많은 element를 가져올때 씀(array를 반환)
- getElementsByTagName() : name을 할당할 수 있음(array를 반환)
- querySelector : element를 CSS selector방식으로 검색할 수 있음 (ex. h1:first-child)
단 하나의 element를 return해줌
⇒ hello란 class 내부에 있는 h1을 가지고 올 수 있다(id도 가능함) - 첫번째 element만 가져옴
- 조건에 맞는 세개 다 가져오고 싶으면 querySelectorAll
⇒ 세개의 h1이 들어있는 array를 가져다 줌 - querySelector("#hello); 와 getElementById("hello"); 는 같은 일을 하는 것임
하지만 후자는 하위요소 가져오는 것을 못하므로 전자만 쓸거다
금 js파일이 있기 때문에 js를 통해 html의 내용을 가져올 수 있는 거임
- document가 html이 js파일을 load하기 때문에 존재 → 그 다음에 browser가 우리가 document에 접근할 수 있게 해줌
- element의 내부를 보고 싶으면 console.dir()
기본적으로 object로 표시한 element를 보여줌(전부 js object임)
그 element 중 앞에 on이 붙은 것들은 event임 - event: 어떤 행위를 하는 것
모든 event는 js가 listen할 수 있음 - eventListener : event를 listen함 → js에게 무슨 event를 listen하고 싶은 지 알려줘야 함
- title.addEventListener("click") : 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick(){
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);
//click하면 handleTitleClick이라는 function이 동작하길 원함
//그래서 handle~ 함수에 () 를 안넣은 것임
//즉, js가 대신 실행시켜주길 바라는 것임!
- function이 js에게 넘겨주고 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것임( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)
- 함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 거임
