[JS/React] 기초 문법 복습(1): const/let, 템플릿 문자열, 화살표 함수

1. 기초 문법
 

(1) const/let
- js에서는 변수를 선언할 때 var, const, let 세개의 키워드를 사용합니다. var은 스코프와는 무관하게 재선언이 가능하기 때문에 값이 아예 재선언, 재할당되면서 크기가 큰 프로젝트를 할 때 사용하지 않게 됩니다. 하지만, 블록스코프가 있으며 재할당만 가능한 let을 더 사용하게 되었고, const는 재선언, 재할당 모두 불가능하지만 내부에서 객체/배열 내부 값은 변경이 가능하기 때문에 자주 사용됩니다.
-> React에서는 주로 const를 기본으로 사용하고 값 자체가 변경해야할 때 let을 사용합니다.

let x = 1;
if (true) {
  let x = 99; // 블록 안의 별개의 x
}
console.log(x);

const user = { name: "Kim" };
user.name = "Gong"; // OK — 내부 프로퍼티는 변경 가능
//user = {};   ,TypeError — 재할당은 불가

-> 둘다 선언 전 접근이 불가하며 호이스팅이 되지 않기 때문에 사용하기 전에 꼭 선언해줘야합니다.
 
(2) 템플릿 문자열
- +연산자를 통해 문자열과 변수를 합치는 방법이 아닌, `${}`을 사용하여 문자열과 변수를 쉽게 합쳐서 작성할 수 있게 해줍니다.

const name = "Gong";
const age = 23;

const msg = "이름은 "+name+"이고 나이는 "+age+"살 입니다.";
const tempmsg = `이름은 ${name}이고 나이는 ${age}살 입니다.`;

console.log(msg); //이름은 Gong이고 나이는 23살 입니다.
console.log(tempmsg); //이름은 Gong이고 나이는 23살 입니다.

-> 맥에서 백틱을 사용하려면 원화(₩)와 옵션 버튼을 같이 누르면 됩니다.
 
(3) 화살표 함수
- 자바스크립트에서는 원래 function이라는 키워드를 사용하여 함수를 만들지만, 1급 객체로 변수에 담을 수 있고 이때 사용하는 구문이 바로 화살표 함수입니다. (1급 객체란 변수에 저장, 파라미터로 전달가능, 반환값으로 전달가능, 배열이나 객체에 담을 수 있음을 나타냅니다.)

function add(a,b){
  return a+b;
}

const add_arrow = (a,b) => a+b; //화살표 함수
// (파라미터...) => { 코드 }

console.log(add(10,20)); //30
console.log(add_arrow(10,20)); //30

 

const display = () => "안녕하세요";
const double = x => x*2;
const add = (x,y) => x+y;
const greet = name => {
  const msg = `안녕, ${name}`;
  return msg;
}
console.log(display()); //안녕하세요
console.log(double(1)); //2
console.log(add(2,3)); //5
console.log(greet("공구일")); //안녕, 공구일

-> 인자 개수에 따라 괄호랑 return을 생략할 수 있습니다.