TIL Day-32

코드스테이츠 32일차

31일차 블로깅을 못했는데 어제가 HA여서
아침부터 달리다보니 하루가 지나버려 작성을 못했다.

오늘 아침 1차 제출을 했는데
잘 못푼거같아 조금 아쉽다.

방금 블로깅 중에 1차 제출 체점 결과가 나왔다.
Pre코스를 통과해 Immersive 코스에 탑승하게되었다.
앞으로도 열심히하자

새로 배운 것들

ES6 문법

ES6 문법에 관해서는 지난번에도 한번 포스팅했던적이 있는데
그때에는 전개문구와 rest파라미터에 관해서만 작성했는데
이번엔 다른 문법에 대해서도 작성해 보겠다.

Object initializer (객체 초기자)

새로운 객체를 만들 때 객체의 키와 값이 같은 경우 하나로 묶어서
입력하는 방법이다.

const student = {
  name: 'Pangho',
  grade: 'SSR+',
}

const name = 'Pangho'
const grade = 'SSR+'

const newObj1 = {
  name: name,
  grade: grade,
};

console.log(newObj1)

const newObj2 = {
  name,
  grade,
};
console.log(newObj2)

newObj1과 newObj2는 같다.
MDN Object initializer

Destructuring assignment (구조 분해 할당)

객체에 있는 키의 값에 접근하는 방법이다.

const student {
  name: 'Pangho',
  grade: 'SSR+',
}

const name = student.name;
const grade = student.grade;
console.log(name, grade);

const {name, grade} = student;
console.log(name, grade);

위의 방식은 ES6 이전의 방법이었다면
아래의 방식은 새로 추가된 방법이다.

만약 키의 이름을 변경하고 싶다면 아래와 같이 작성하면 된다.

const {name: studentName, grade: studentGrade} = student
console.log(studentName, studentGrade)

배열에서도 사용이 가능하다

const array = ['dog', 'cat']

const first = array[0];
const second = array[1];
console.log(first, second)

const [first, second] = array
console.log(first, second)

위와 아래 모두 동일한 값을 가져온다.

MDN Destructuring assignment

Spread Syntax (전개 구문)

배열을 복사해올때 유용하게 사용된다

const student1 = {name: 'Pangho', grade: 'SSR+'}
const student2 = {name: 'PIKOTARO', grade: 'ApplePen'}
const array = [student1, student2]

const copyArr = [...array]
console.log(array, copyArr)

사용시 주의사항은 copyArr은 array의 주소를 가져온다.
때문에 원본을 수정할 경우 모두 바뀐다.

student2.grade = 'PenPineapple'
console.log(array, copyArr)

복사한 배열에 값을 추가시키고 싶은 경우 아래와 같이 작성하면 된다.

const copyArr2 = [...array, {name: 'Sans', grade: 'WA!'}]
console.log(array, copyArr, copyArr2)

배열을 하나로 합치는것도 가능하다.

const students1 = ['Pangho', 'PIKOTARO']
const students2 = ['Sans', 'Papyrus']
const students = [...students1, ...students2]
console.log(students)

배열뿐 아니라 객체에서도 사용이 가능하다.

const student3 = {...student1}
console.log(student3)

객체에서도 하나로 합치는것이 가능하다.

const studentList = {...student1, ...student2};
console.log(studentList)

이 경우 주의해야될 점은 키가 같을경우
마지막 객체가 앞의 객체의 키를 덮어씌운다.
때문에 studentList의 결과는 student2만 출력된다.

Spread Syntax는 활용도가 많은만큼
자주 사용하는 문법이니 꼭 익혀두는것이 좋다.

MDN Spread Syntax

Rest Parameters (Rest 파라미터)

함수에 인자를 전달할 때 사용하는 방법이다.

function myScore(a, b, ...manyMoreArgs) {
  console.log(a)
  console.log(b)
  console.log(manyMoreArgs)
}

myScore('67', '120', '89', '78', '42', '117', '24')

함수를 실행하면
첫번째와 두번째는 각각 개발자 콘솔에 출력되고
세번째는 배열로 묶어서 출력한다.

전개구문과 헷갈릴수 있는데
함수의 인자로 ...을 사용하면 ...이후의 인자들을
배열로 묶어서 사용하게된다.

해당 내용은 이전에도 블로그에 포스팅했던적이 있다.
TIL Day-9

Default Parameters (기본값 매개변수)

함수에 인자를 받지 않은 경우 매개변수의 기본값을 정하는 방법이다.

function multiply(a, b = 2) {
  return a * b;
}

console.log(multiply(5))
// output: 10

console.log(multiply(5, 3))
// output: 15

매개변수에 동일 연산자와 함께 값을 넣어주면 된다.
이렇게하면 인자가 전달되지 않은경우 기본값을 이용한다.
숫자외에 문자열도 가능하다.

MDN Default Parameters

Ternary Operator (삼항 연산자)

자바스크립트에서 세가지 피연산자를 취하는 유일한 연산자이다.
주로 if문의 단축형으로 자주 사용된다.

const isCat = true

const cat = isCat ? 'mew' : 'no'
console.log(cat)

위 삼항 연산자 코드를 if문으로 바꿔보면 아래와 같다.

let cat;
if(isCat) {
  cat = 'mew'
} else {
  cat = 'no'
};

?의 앞에는 조건이, 뒤에는 조건에따른 결과가 출력되고
:의 뒤에는 앞의 조건에 맞지 않는 경우의 결과가 출려된다.

?는 if()가 된다고 볼 수 있고
:는 else라고 볼 수 있다.

else if는 아래와 같이 작성할 수 있다.

false ? console.log(1)
 : true ? console.log(2)
 : true ? console.log(3)
 : console.log(4);

// output: 2

다만 개인적으로 삼항 연산자는 else if 가 많이 엉키게되면
보기 더 복잡하다고 생각된다.
간단한 삼항 연산자를 계산할때만 사용하는게 좋다고 생각한다.

MDN Conditional (ternary) operator

Template Literals

문자열을 작성할 때 변수가 섞여 있을 경우
한번에 계산해서 문자열로 만들어 주는 편한 방법이다.

const name = 'Pangho'
console.log = (`Hello ${name}`)

// output: "Hello Pangho"

따옴표대신 백틱(｀)을 사용해 문자열을 시작하면 된다.
변수의 경우 모두 ${}안에 넣어주면 된다.

이런식으로 작성하면 문자열 사이에 공백을 넣기에도 쉽다.

const firstName = 'Donald'
const middleName = 'John'
const lastName = 'Trump'
const fullName = `${firstName} ${middleName} ${lastName}`
console.log(fullName)

// output: "Donald John Trump"

문자열을 작성할때 자주 사용하는 방식이기때문에
익혀두면 문자열을 작성할때 편해진다.

ES6관련 문법은 대부분 작성해두었다.
후에 다른 문법을 배우게되면 다시한번 모아서 작성해봐야겠다.

Arrow Function (화살표 함수)

함수를 좀더 간편하게 작성하는 방법이다.

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

위에 적힌 함수를 좀 더 간결하게 적는 방법이다.

const add = (a, b) => a + b;

function 태그를 생략한 후 괄호에 parameter를 작성한 후
화살표 ⇒ 를 적은 후 return값을 적어주기만 하면된다.

const simpleMultiply = (a, b) => {
	return a * b;
}

화살표 함수안에서 다양한 일을 처리하게 하려면 중괄호{}를 넣고
return값을 넣어주는 것으로 활용할 수 있다.