[JavaScript] 자바스크립트 낯설었던 문법들📑

1. 가변변수/불변변수 (var, let, const)

- var은 재정의와 재선언 모두 가능하다.
- let은 가변변수로 재정의가 가능하지만 재선언은 불가능하다.
- const는 불변변수로 재선언과 재정의 모두 불가능하다.

* 재선언: 똑같은 이름의 변수를 다시 만드는 것
* 재정의: 값이 지정된 변수에 값을 바꾸려는 것
* 스코프(scope) : 식별자(ex. 변수명, 함수명, 클래스명 등)의 유효범위

• var의 문제점
  ① 변수 선언이 유연하기 때문에 예기치 못한 값을 반환할 수 있다.
  ② 코드가 길어진다면 어디에서 어떻게 사용 될지 파악하기 힘들다.
  ③ 함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 된다.
  ④ 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
  ➡️ 따라서, var은 잘 사용하지 않으며, let과 const 키워드를 사용하는 것을 권장한다.

//변수 선언
var x = 2;
// 재정의
x = 4;
// 재선언
var x = 4;

2. 모듈 내보내고 가져오기 (export/import)

모듈을 내보내는 방법으로는 named export와 default export가 있다.

// named export 기본 형식
export { 모듈명1, 모듈명2 };
import { 모듈명1, 모듈명2 } from 'js 파일 경로';

// default export 기본 형식
export default 모듈명;
import 모듈명 from 'js 파일 경로';

- named export는 한 파일에서 여러 개를 export할 때 사용 가능하다. export한 이름과 동일한 이름으로 import해야 하며, 중괄호에 묶어서 import 해야 한다.
다른 이름으로 import 하려면 as를 사용하고, 한 파일에 있는 클래스나 변수들을 한 번에 import 하려면 * as를 사용한다.

// named export는 중괄호 포함 import 
import { named1, named2 } from './example.js';

// named export에서 as를 사용하여 다른 이름으로 import
import { named1 as myExport, named2 } from './example.js';

// 한 파일에 있는 모든 클래스나 변수를 * as를 사용하여 한 번에 import
import * as Hello from './example.js';

- default export는 하나의 파일에서 단 하나의 변수 또는 클래스 등등만 export 할 수 있다. 또한 import 할 때 아무 이름으로나 자유롭게 import 가능하며, 중괄호에 묶지 않아도 된다.

// default export 는 중괄호 없이 import 
import default1 from './example.js';

3. 템플릿 리터럴

템플릿 리터럴은 ES6부터 새로 도입된 문자열 표기법으로, 문자열 생성시 따옴표 대신, 백틱(`)을 사용한다. 따옴표와 달리 백틱 안에서는 줄바꿈이 반영된다. 또한, 문자열 사이에 변수나 연산을 넣을 때는 ${} 사이에 표현식을 삽입한다.

var jsp = "자바스크립트";

// 기존 코드
console.log("이건 " + jsp + "입니다.");

// 템플릿 리터럴 방식
console.log(`이건 ${jsp}입니다.`);

// 출력 결과 -> 이건 자바스크립트입니다.

4. 화살표 함수 (arrow function)

화살표 함수는 함수 표현식을 보다 단순하고 간결한 작성하는 문법이다.

// 기본 함수 형식
let sum = function(a, b) {
  return a + b;
};

// 화살표 함수 형식
let sum = (a, b) => a + b;

• 인수가 하나밖에 없다면 인수를 감싸는 괄호를 생략할 수 있다.
• 인수가 하나도 없을 땐 괄호를 비워놓으면 된다. 다만, 이 때 괄호는 생략할 수 없다.
• 본문이 한 줄 밖에 없다면 중괄호를 생략할 수 있다.
• 중괄호는 본문 여러 줄로 구성되어 있음을 알려주며, 중괄호를 사용했다면 return으로 결괏값을 반환해주어야 한다.

5. forEach() / map()

forEach()와 map()은 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 주는 역할을 한다.

- forEach() : 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행

배열.forEach((요소, 인덱스, 배열) => { return 요소 });

- map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환

배열.map((요소, 인덱스, 배열) => { return 요소 });

하지만 forEach()와 map()은 역할은 같지만, 리턴값의 차이가 있다.
forEach()는 기존의 배열을 변경하는 반면, map()은 결과값으로 새로운 배열을 반환한다.

var arr = [1,2,3,4,5];
// forEach()
var newArr = arr.forEach(function(e, i) {
  return e;
});
// return -> undefined

// map()
var newArr = arr.map(function(v, i, arr) {
  return v + 1;
});
// return -> 2, 3, 4, 5, 6

6. reduce()

reduce() : 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

result = sum.reduce((prev, curr, i) => {
  console.log(prev, curr, i);
  return prev + curr;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

* 초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 된다.
* reduce()는 초깃값을 배열로 만들고, 배열에 값들을 push하면 map과 같아진다.

참고 자료
🐰 엘리스 SW 엔지니어 트랙 2기 자바스크립트ⅱ수업
1. var, let, const 차이점 / var, let, const의 차이
2. default export와 named export 차이점
3. 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법
4. 화살표 함수 기본
5. forEach()와 map()의 비교 및 분석
6. reduce() 활용하기