React 독학 [기초 JavaScript 문법 알아보기]

React를 하기 전에 우선 JavaScript 문법을 알고 있어야 한다

 

var / const / let 

제일 기본적인건 var / const / let 모두 선언을 의미하는데 

let / var 는 변경이 자유로운 변수 

const는 한번 선언하면 값을 바꿀 수 없는 상수이다.

하지만 요즘은 var는 잘 쓰이지 않고 let /const 로만 쓰인다고 한다.

const a = 2;
a = 4; //a 는 위에서 선언한 값을 바꿀 수 없는 const로 선언했기 때문에 값 변경 불가

let b = 12;
b = 5; // b는 변경이 자유로운 let 으로 선언 했기에 값 변경 가능

 

 

 for / forEach

var a= [0,1,2,3]
for(var i=0; i<a.length; i++){
	var item = a[i];
    console.log(item);
} 
// 기존 for 문을 조금 더 경량(?) 화 해서 만든 문법이 아래 forEach

a.forEach(function(item){
	console.log(item)
});

같은 Array에 들어있는 0,1,2,3을 출력하는 코드인데 확실히 아래에 있는 코드가 훨씬 깔끔하고 간결한 걸 볼 수 있다.

 

map

const c = [0,1,2,3];
const newA =[];
for(var i=0; i<c.length; i++){
    var item = c[i];
    newA.push(item*2);

}
console.log(newA); //출력 [0,2,4,6]


const newB = c.map(function(item){
    return item*2;
});

console.log(newB); //출력[0,2,4,6]

Array.map 에 실행할 콜백 함수는 현재 값, 인덱스, map을 호출한 배열을 매개변수로 받는다 

함수 내에서 반드시 새로운 값을 return 해줘야 한다

 

arrow function (화살표 함수)

함수 표현 중 가장 많이 사용하는 표현이지 않을까 싶다

const f =(x,y)=>{
    console.log(x,y);
};
f(7,6) //출력 7 6

const d =(x,y)=>{
    console.log(x+y);
};
d(7,6) //출력 13

const e = (x,y)=>console.log(x,y);
e(1,2); //출력 1 2

이처럼 console.log로 출력 시 + - * 등을 사용하여 값을 출력도 가능하다.

 

template literals

const name = "강아지"

const text = "Hellow" + name ; //출력 Hellow강아지

const text1 = `Hellow ${name}`; // 출력 Hellow 강아지

기존 문법은 문자열 내 변수값을 보여주려면 "문자" + 변수명으로 사용을 했지만

` `(back quoto)로 감싸 문자열 표현도 가능하다 

 

 

후기:

기본적인 문법공부는 항상 복습이 제일 중요한듯.....