GDSC Ewha 아침 스터디 TIL 12일차 💛

js에서 문자열이란, 처음부터 끝까지 문자로 이루어진 따옴표 안의 열!

+)"abc"+"def" 의 결과는 "abcdef" 가 된다!

 

js 변수 선언 방법

(c와 다르게 int float 등 타입 지정자를 따로 쓰지 않는다!)

const a = 10;

 

변수 이름이 띄어쓰기 포함할 때

->veryLongLongString 이런식으로 대문자화하기로 약속!

 

const(상수 선언) let (변수 선언) var도 있지만 오래된 변수 선언 방식.(업데이트 가능한 변수 선언)

따라서 기본적으로는 const 가끔 let var은 거의 쓰지 말자!!

 

boolean 의 값으로는 true와 false, null, undefined가 있다. 이때 따옴표 쓰지 않도록 주의! null 은 아무것도 없다는 뜻 false 는 값이 있음. 따라서 서로 다르다는 것 이해하기! undefined는 예를들어 변수 선언만 하고, let a; 변수에 값을 지정하지 않은 경우 a 를 log 하면 나오는 값이다. 

*null 은 자연적으로는 절대 발생하지 않고, 개발자가 어떤 variable 안에 값이 없다는 것을 확실히 하기 위해 쓰는 것

ex) const amIFat = null;

*undefined 는 메모리는 있는데 값이 없는 것. 

 

array (배열) 

c 와는 다르게 하나의 배열에 다양한 데이터 타입이 들어갈 수 있음. const 인지 let 인지는 써주어야 함. 

ex) const nonsense = [1,2,"hello", false, null];

 

배열이 맨 뒤에 요소를 하나 더 추가하고 싶다면?? push 메소드를 사용하자 배열명.push(추가하고 싶은 값);

ex) daysOfWeek.push("sun");

 

객체 (Object) 

자바와 달리 const ObjectName = { } 이렇게 간단하게 표현하고, property 를 표현할 때 = 이 아닌 : 를 사용하며 ; 대신 , 를 쓴다. 

ex) const player = {name: "nico", gender: "male"};

console.log 의 console도 객체임!!

property 에 접근하려면 . 을 사용한다. ex) player.name (또는 player["name"]) 

분명 const 는 수정하면 에러가 난다고 했는데..? 라는 의문이 든다면, 여기서 const 는 객체! 따라서 객체의 속성값을 바꾸는 것은 상관이 없기 때문에 객체 밖에 player.name = "hy"; 를 해도 에러가 나지 않음.

객체 바깥에서 객체의 새로운 속성을 추가하는 것은 얼마든지 가능함. ex) player.lastName = "potato";

객체는 배열이 가지지 못하는 의미를 각각의 값에 property로 줄 수 있음.

 

함수 function 

반복해서 쓸 수 있는 코드 조각 

js에서 함수 정의 function funtionName(argument1, argument2) { ~~~~~; } 함수 호출 functionName(argument1, argument2);

인수 = argument = 매개변수 이때 매개변수는 함수 중괄호 블록 내에서만 쓸 수 있음에 주의~~(c에서도 그렇긴 해)

객체 안에서 property의 값으로 함수를 정의할 때!

property: function () {}, 와 같이 해준다! 객체 바깥에서의 함수정의와 다르다는 점 주의

 

event 를 추가하고 싶을 때는 element.addEventListener("event", function); 주의할 점은 function() 괄호를 쓰면 안된다는 것. click 했을 때 addEventListener가 실행시키는 것이기에. function의 () 는 실행을 뜻한다. 

 

mdn headingelement - element - event에서 event 찾을 수 있음. 또는 console.dir(element) 를 통해 찾을 수 있음. 이때

on 접두사는 event listener 를 뜻하는 것으로 실제 사용 시에는 on을 제외해야 함. ex) onabort: null -> abort

 

event 사용 방법 두 가지

1. .addEventListener("click", ); 

2. title.onclick = handleTitleClick;

 

document. 에서 를 사용하지 않고 불러올 수 있는 것: body, title, head 나머지 element 는 querySelector 나 getElementbyId 등으로 찾아와야 함. 

 

.classList 를 이용하면 과거의 class 내용을 까먹지 않고 class를 업데이트 할 수 있다. 

.classList.toggle("clicked") 를 이용하면 해당 클래스가 있으면 리무브 하고 없으면 add 하는 작업을 수행한다.