[TIL]1주차 모각코_바닐라 JS(1)

TAB 2021 겨울방학 학회활동 [슬기로운 코딩생활]

1주차 TIL입니다.

작성자 : 38기_김민서

참고강의: 노마드코더 바닐라JS로 크롬앱 만들기

 

---

0. 공부계획

작년 겨울부터 html,css부터 리액트까지 웹 프론트에 관련되서 여러번 찍먹 해왔었다. 근데 저번 2학년에 프로그래밍어론, 웹프로그래밍 강좌를 수강하면서 제대로 공부가 안된점을 많이 발견했고,,(학점 안녕~)바닐라 js부터 리액트 라이브러리까지 실무및 프로젝트에서 써먹을정도로 제대로 공부해보고 싶은 생각에 노마드코더 바닐라 JS챌린지 수강및 리액트 라이브러리를 이용해서 공부해보려고한다. 만약 시간 여유가 된다면 저번 학기 활동으로 진행한 방탈출게임을 완성해보려고한다.

 

📌1주차 목표: 바닐라 JS 기초문법및 헷갈리는 개념 위주로 복습

📌참고강의: 노마드코더 #1~#2

이미 여러번 학습했던 내용이기때문에 강의를 정독하기 보다는 모르는부분만 정리하고 넘어가려고 한다.

---

1. JS 기본문법

1.1 데이터 타입

JS에는 크게 숫자,문자,논리(boolean)형 등이 있다

console.log(typeof (데이터))를 찍어주면 데이터 타입을 확인할수있다

 

✔ 데이터 타입에는 null, undefined 형도 있는데, 둘의 차이점은

null : 이 데이터에 아무것도 없음을 표시해주는것

undefined : 선언을 해서 메모리에 있긴한데 아무런 값을 넣어주지않은 상태

라고한다

1.2~3 변수및 변수 선언 방법

변수를 선언해주는 방법에는 크게 const, let가 있다

원래 var과 val도 주로 사용하는줄 알았는데, 구버전이라서 코드에 의미를 담을수있는 const와 let을 쓰는게 좋다고 한다

둘의 차이점은 선언후 값의 변경유무이다.(const : non-change / let: changeable)

주로 const를 사용하고 코드진행중 값을 변경하려는 경우에만 let을 사용한다고 한다.

---

JS에서 변수를 묶어서 선언하고싶을때 (ex 요일, 반의 학생정보) 크게 배열과 객체가 있다.

둘의 차이점은 선언할때 [] 대괄호를 사용하면 배열, {} 중괄호를 사용하면 객체이다.

1.4 배열

선언할때는 파이썬과 동일한 형식이고 배열이름 앞에 const나 let을 적어주면된다.

사용방식 또한 파이썬과 거의 동일하여 생략하겠다.

+ 파이썬에서 음수로 인덱스를 넣어주면 작동을 하는데, js에서는 undefined라고 뜬다

 

✔ 배열에 원소를 추가할때는 배열이름.push(추가하고싶은 원소) 코드를 써주면, 해당 원소는 맨 뒤에삽입된다

---

우리가 흔히 console.log("hello world")와 같이 XX.XX, XX()형태로 코드를 작성하는것에서 객체와 함수를 이해할수있다.

1.5,6 객체(XX.XX),함수

사용방법은 아래와 같다

//중괄호 안에 생성하고 싶은 속성 : 값으로 선언해주면 됨
const student = {
      name : minseo;
      age : 23;
      studentNum : 20;
      hi : function(){
      	console.log("안녕하세요~");
      };
};
//접근방법1(XX.XX)
console.log(student.name);//minseo
//접근방법2(배열 접근방식과 유사)
console.log(student["age"]);//23
//속성을 추가할수있다
student["major"]="computer";
//const로 선언했지만 속성값은 변경가능하다
student["age"]=20;//에러안뜸:)
//함수 사용
student.hi();//안녕하세요~

위에서 언급된 console 역시 가지고있는 속성이 많은 JS 내장객체이며, log는 객체의 속성으로 선언된 함수이다.

+지역변수, 전역변수

함수내부에서 사용된 변수를 지역변수라고 하고 코드 전체적으로 사용가능한 변수를 전역변수라고한다.

하지만 변수이름이 같은 경우, 구별할수없기때문에 this를 사용해준다.

1.7 조건문

syntax는 C언어와 거의 흡사하다!

if(condition){
//conditiond은 boolean 형태로 판별가능해야함
//condition이 true라면 if문 실행, 아니라면 else if문 condition2 판별
} 
else if (condition2){//true라면 else if 문 실행
//아니라면 else 실행

}
else{

}

// 관계연산자
// a && b = a and b
/ /a || b = a or b
// 비교연산자
// a == b (값이 같다면 true)
// a === b (값, 타입이 모두 같다면 true)

+조건부 연산자를 사용하면 더 간결하게 작성가능

const result = condition ? bool1 : bool2;
//condition이 true이면 bool1을
//condition이 false이면 bool2를 반환한다