[TIL] React를 위한 Javascript 기초

Javascript로 원하는 DOM요소에 접근해서 바꿔줄 수 있다.

(class, id, tag로 접근)

const title = document.getElementById("title");
title.style.backgroundColor = "yellow";

script를 body 영역 제일 아래에 넣는 이유

요소들이 전부 생긴 다음에 script를 읽어오게 하기 위해
만약 script를 위로 올리면 요소들이 생기기 전에 script를 읽어오기 때문에 오류가 난다.

ES6문법

• let, const 추가
  - let: 재선언은 안 되지만 재할당은 가능
  • const: 재선언도 재할당도 안 됨
  • var는 함수 레벨 스코프 / let, const는 블록 레벨 스코프
    (scope: 이 변수를 사용할 수 있는 범위)
    (block: {} 중괄호 안)

function scope() {
	const a = 0;
      let b = 0;
      var c = 0;
      if (a === 0) {
        const a = 1;
        let b = 1;
        var c = 1;
        console.log(a, b, c); //1, 1, 1
      }
  	console.log(a, b, c); // 0, 0, 1
}
// var c = 1; 때문에 c는 값이 바뀌어버림
//a, b는 if문 괄호 안에 있는 애들이랑 밖에 있는 애들이 다른 것.

함수를 만드는 3가지 방법

1. 함수 선언식

   function do_something(){...}

2. 함수 표현식

   //함수 이름은 생략 가능
   let do_something = function [함수 이름](){...}

3. 화살표 함수

   //화살표 함수는 함수 표현식의 단축형
   let do_something = () => {...}

class
객체를 정의하기 위한 상태와 함수로 구성되어 있다.
객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용한다.

class Cat {
	constructor(name){		//constructor: 생성자 함수. Cat이라는 클래스가 처음 생기면 얘가 초기화 단계를 거침 (초기화: 초기값을 설정해주는 것)
		this.name = name;	//즉, 어디선가 받아 온 name을 Cat이라는 클래스 안에 넣어주겠다는 것.
    }
  	showName(){
		console.log(this.name);	//이 this는 나 자신을 가리키는 키워드. 즉, Cat
    }
}
//여기서 this는 class 안에 썼기 때문에 Cat을 의미한다.
//this를 함수 안에서 쓰면 그 함수가 나온다.
.
.
let cat = new Cat("perl");	//new: 새로 무언가 만들 때 생성자 함수와 함께 사용.(세트로 생각하자)
cat.showName();			//perl
.
let cat2 = new Cat("mov");
cat2.showName();		//mov

상속
이미 만들어 둔 class를 가지고 와서 자식 클래스를 만드는 것

class MyCat extends Cat{		//extends라는 키워드를 쓰면 상속받을 수 있다.
	constructor(name, age){
   		super(name);		//super라는 메서드는 부모의 this를 그대로 가져온다.
      	this.age = age;
    }
  	showAge(){
    	console.log(this.age);
    }
}

조건부 삼항 연산자

간단한 if문 느낌
return 안에는 if문을 사용할 수 없는데 이럴 때는 1을 출력하고 이럴 때는 0을 출력하고 싶을 때 삼항 연산자를 사용한다
사용법:
조건 ? 참일 경우 : 거짓일 경우

let is = 5;
let e = is === 5 ? 3 : 4;
return e;
// 3

Array 내장 함수(많이 사용)

1. map

배열에 있는 요소들을 변환해 줄 때 많이 사용(반복문을 돌리는 것)
(ex. 모든 요소에 +1 해줄 때)

const arr_num = [0, 1, 2, 3, 4];
const new_arr = arr_num.map((arr_item) => {
return arr_item + 1;
})						//1, 2, 3, 4, 5
console.log(new_arr);	// [1, 2, 3, 4, 5]
console.log(arr_num);	// [0, 1, 2, 3, 5]

map함수는 원본 배열을 그대로 두고 새로운 배열을 반환한다.

2. filter

어떤 조건을 만족하는 요소들만 골라서 새 배열로 만들어 준다.

const arr_num = [0, 1, 2, 3, 4];
const new_arr = arr_num.filter((arr_item) => {
return arr_item > 2;
})
console.log(new_arr);	//[3, 4]

3. concat

배열을 합치거나 배열에 특정 값을 추가해 새로운 배열을 반환하는 함수
원본 배열은 변하지 않는다.

const arr_num = [0, 1, 2, 3, 4];
const new_arr = [3, 4];
.
const merge = arr_num.concat(new_arr);
console.log(merge);		//[0, 1, 2, 3, 4, 3, 4]

concat은 중복 항목을 제거해주지 않는다.(셀프로 제거)
중복 제거 Tip)

// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다.
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const new_merge = [...new Set([...arr_num, ...new_arr])];
console.log(new_merge);		//[0, 1, 2, 3, 4]

4. from

쓰임새가 매우 다양함
-1) 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때
-2) 새로운 배열을 만들 때 (초기화한다고도 표현해요.)

//문자열을 각각 요소로 배열로 만들기(문자열 말고도 다 됨)
const my_name = "jamie";
const my_name_arr = Array.from(my_name);
console.log(my_name_arr);		//['j', 'a', 'm', 'i', 'e']
//새로운 배열을 만들어 보자(=빈 배열을 초기화하자)
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});
console.log(new_array);		//[0, 1, 2, 3]

5. reduce

reduce()는 배열의 모든 요소들에 대해서 연산을 수행하여 하나의 결과 값을 리턴합니다.
예를 들어, reduce()를 사용하면 배열의 모든 숫자를 순차적으로 더해서 10이라는 결과를 계산할 수 있습니다.

// arr의 모든 요소의 합을 구해보자!
const arr = [1, 2, 3, 4];
let sum = arr.reduce((total, val, idx, arr) => total + val, 0);
console.log(sum);	// 10
//reduce는 total의 값과 val값이 서로 더해지면서 쌓이는 것을 볼 수 있다.
//위 예시는 intitial value가 0임으로 total의 초기값이 0임을 확인할 수 있다.

다른 Array 객체의 메서드들
every: 배열의 모든 요소가 주어진 함수에 대해 참이면 ture, 그렇지 않으면 false를 반환.
forEach: 배열의 모든 요소에 대해 주어진 함수를 실행.
indexOf: 주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾음.
join: 배열 요소를 문자열로 합침.
push: 배열의 맨 끝에 새로운 요소를 추가.
splice: 배열에 요소를 추가하거나 삭제
slice: 배열에서 특정한 부분만 잘라냄.
reverse: 배열의 배치 순서를 역순으로 바꿈.
sort: 배열 요소를 지정한 조건에 따라 정렬.
toString: 배열에서 지정한 부분을 문자열로 반환.

Date객체 메서드
getFullYear()
getMonth()
getDate()
getDay(): 0~6숫자로 요일을 표시 (0부터 일요일이 시작됨)
getTime()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
//설정할 땐 set
setFullYear() 연도 설정
setMonth()
setDate()
...

다양한 메서드들이 있으니까 필요할 때 찾아서 쓰자.