[TIL] 리액트 시작 전에 알아두면 좋은 자바스크립트 문법 간단하게 정리하기

👉🏼 KIM·2024년 9월 29일

TIL

목록 보기

10/55

리액트를 다시 시작하려고 한다.
한때 기본 문법들을 찾아보며 강의를 열심히 듣고는 했는데 벌써 1년이 지나서 다 까먹어버렸다.
다시 영차 영차 힘을 내보려 한다.
간단하게 자바스크립트 사전 문법을 찾아보고 정리해보는 시간을 가졌다.

오늘 공부한것 & 기억하고 싶은 내용

1. let/const 변수 선언

let과 const는 내가 요즘 잘 사용하고 있는 변수 선언 방식이다.
아주 예전엔 var 밖에 없었기 때문에 오류가 많았는데, 요즘엔 변수 때문에 문제가 생기는 일은 별로 없는 거 같다. 하지만 레거시에는 var가 상당하다^^
var의 가장 큰 문제점은 전역 범위로 사용가능하고, 혹 함수 범위로 지정된다 해도 재선언이 가능하고, 업데이트가 될 수 있다는 것이다.
이러한 var의 문제점을 해결하기 위해 나온 변수 선언 방식이 let과 const이다.

let

let으로 선언된 변수는 해당 블록 범위 내에서만 사용이 가능하다.
let은 변수 중복 선언이 불가능하지만, 재할당은 가능하다.

const

const 또한 해당 블록 범위 내에서만 사용이 가능하다.
const는 일정한 상수 값을 유지해야 하는 의미를 가지고 있어서 재할당이 불가능하다. 따라서 선언과 초기화를 동시에 진행해야 한다.

2. 화살표 함수

es6에 도입되었고, 기존에 사용하던 함수 선언식 표현식보다 좀 더 간결하게 사용 가능
function 키워드 대신 ⇒ 화살표 기호를 사용
하나의 매개변수인 경우 소괄호 () 생략 가능 (매개변수가 없을 시 () 생략 불가능)
함수 내부가 단일 표현식인 경우 return 키워드 생략가능 (생략 시 중괄호{} 반드시 생략)
중복된 매개변수 이름을 선언할 수 없음
자신만의 this를 가지지 않음( 상위 스코프의 this를 상속받기 때문에 this 관련 문제를 피할 수 있다)

3. 구조 분해 할당

구조 분해 할당이란, 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 것이다.
코드를 짜다보면 함수에 객체나 배열의 값을 전달해야하는데, 데이터 전체가 아닌 일부분만 필요한 경우가 생긴다. 이럴때 다른 변수로 분해할 수 있게 해주는 것이 구조 분해 할당이다.

리액트의 기존 문법이라고 할 수 있다.

let [firstName, secondName] = []

console.log(firstName); // undefined
console.log(secondName); // undefined

4. 배열 다루기(map, filter, reduce, forEach)

정말 중요한 배열 다루기..
많은 방법이 있으니 코딩할때 적재적소에 활용하면 참 좋을 거 같다.

찾아보니 예전에도 간단하게 정리한 ...TIL가 있었다.

[TIL] JS 기본편 - Callback function(콜백 함수), forEach, map, filter

map

map은 콜백함수로부터 return받은 것을 기반으로 새로운 배열을 만들어 리턴해주는 메소드이다.
배열의 원소들을 쏙쏙 뽑아냄
하지만 arr로 map 을 돌려서 *3의 값을 받아왔지만 arr 변수가 바뀌는 것은 아님

let arr = [1,2,3,4,5];
arr.map(item => item * 3)//[3, 6, 9, 12, 15]
arr //[1,2,3,4,5]

원소와 함께 인덱스도 가져올 수 있다. 단순 연산이 아닌 다른 형태로도 바꿀 수 있음 (아래는 json 형태)

arr.map((item, index)=>{
return {
 "number":item,
 "idx":index
}
});

filter

말그대로 필터링 해주는 메소드이다. 결과가 true면 반환함

arr.filter(item=>{
    if(item % 5 === 0)
        return true;
}); //[5, 10, 15]

reduce

배열을 하나의 값을 변환시켜준다.
4가지 인수를 가진다.
1. accumulator accumulator는 콜백함수의 반환값을 누적
2. currentValue 배열의 현재 요소
3. index(Optional) - 배열의 현재 요소의 인덱스
4. array(Optional) - 호출한 배열
콜백함수의 반환값은 acc에 할당되고, 순회 중 계속 누적되어 최종적으로 하나의 값을 반환
최초 콜백함수 실행 시 acc 인수에 제공되는 값, 초기값을 제공하지 않을 경우 배열의 첫번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생한다.

let arr = [1,2,3,4,5];

arr.reduce((acc, item) => {
	return acc + item;
}); //15

arr.reduce((acc, item) => {
	if(item % 5 === 0)
    	acc += item;
    return acc;
}); //6

forEach()

forEach() 메소드는 콜백함수를 인자로 받아서 배열의 원소 각각에 대해 콜백함수를 호출해준다. 즉 배열 전체를 돌면서 요소 전체에 대해 반복적인 작업을 수행하도록 해준다.

function callback(value, index, array) { }

const numbers = [273, 52, 103, 32, 57]

numbers.forEach(function (value, index, array) { //매개변수로 value, index, array를 갖는 콜백 함수를 사용합니다.
  console.log(`${index}번째 요소 : ${value}`)
})

0번째 요소: 273
1번째 요소: 52
2번째 요소: 103
3번째 요소: 32
4번째 요소: 57