[250102 목요일]

익숙함의 차이겠죠?

ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입해서 JS개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선하였다고..하는데요.
난 왜 머리가 아플까? 익숙하지 않아서겠지..?

오늘 학습한 내용중에서 내가 가장 어려운 부분은 화살표함수(Arrow Function)인데..

기존에 사용하던 함수문법을 화살표함수로 변환해서 사용해 보려하니 오히려 헷갈리더라..😢

눈에 익지 않아서 해석하는데도 시간이 좀 걸리는 편이고, 어떤부분을 생략한 것인지 한번에 들어오지가 않았다.

아직 함수나 메소드등을 배우는 중이고, 화살표함수는 this를 반환하지 않는다고 하고, 그로인해서 일부 EventListener의 콜백 함수에서는 사용에 유의해야하고, 생성자 함수도 만들지 못한다고하는데...

많이 사용해 봐야 늘고 다양한 case도 익힐수 있으니, 코드카타 하면서 화살표 함수로 변환가능한 곳은 찾아서 변환하며 사용해보기로..

let, const

• let: 재할당 가능, 재선언 불가
• const : 재할당, 재선언 불가 // 초기값이 없으면 선언 불가 // 할당하는 값이 함수인경우 값 변동 가능

화살표함수(Arrow Function)

• function 이나 return 키워드 없이 함수를 만드는 방법 // this를 반환하지 않음

// 기존 함수 문법
let sum = function(a, b){
	return a + b;
};
// 화살표 함수로 표현하면
// function 생략, => 화살표로 표현
// 단순 return문 1줄만 있다면 return과 {} 중괄호 생략가능
let sum = (a, b) => a + b;
console.log(sum(1,2)); // 3

function double(n){
	return n * 2;
};
//인수가 1개밖에 없다면 인수를 감싸는 괄호를 생략할 수 있음
let double = n  => n * 2;
console.log(double(3)); // 6

// 인수가 하나도 없을 땐 괄호를 비워두면 됨. 단, 이때 괄호는 생략할 수 없음.
let sayHi = () => alert("안녕하세요!");
sayHi();

삼항연산자(ternary operator)

삼항 연산자 문법 condition ? expr1 : expr2

구조 분해 할당(Destructuring)

• [배열] 이나 {객체키:객체값}의 속성을 분해해서 그 값을 변수에 담기<오른쪽에 있는 속성들을 분해해서 왼쪽에 그 값을 할당>

// 배열의 경우 순서가 중요
let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3
//----------------------------------------
// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

// 객체의 경우(key가 중요)
let user = {name: "nbc", age: 30};
let {name, age} = user;
console.log(name, age) // nbc 30

단축 속성명(property shorthand)

• 변수가 미리 준비되어있는 경우 활용하여 객체의 Key와 Value 값이 같다면 생략 가능

const name = "ly-ra";
const age = "27";
//-----------
const obj = {
  name: name,
  age: age,
};
// 아래와 같이 생략하여 사용 가능
const obj = {
  name,
  age,
};

전개 구문

• Spread Operator 구조분해할당과 함께 많이 사용

나머지 매개변수(rest parameter)

• 함수에 전달된 인수들의 목록을 배열로 압축할때 사용.
• 나머지 매개변수는 남아있는 인수를 모으는 역할을 하므로 항상 마지막에 있어야함.

function func (a, b, ...args) { // args는 배열 이름
	console.log(...args)
}
// ---------------
func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

템플릿 리터럴(Template literals)

• 자바스크립트에서 문자열을 입력하는 방식.
• 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공.
• 백틱(`) 과 ${}로 표현

`string text` // 문자열
//----------
`string text 
string text line2` // 개행된 문자열
//----------
`string text ${value} text` //문자열과 변수값 조합

이정도! 오늘 배운것들만 정리해두고 나중에 찾아보자!!