TIL 02

김지우·2022년 11월 1일

TIL

목록 보기

2/16

> TD: reviwe

부트 캠프 2일차, 오늘은 템플릿 리터럴, 구조 분해 할당, 객체 간단히 표현하는 방법, import 등등 많은 것들을 배웠다.
2주 전만 해도 베이스캠프 때의 자바스크립트 부분에서 많이 무너졌었는데, 이해가 되지 않더라도 포기하지 않고 코딩 리딩 실력을 키운 것이 오늘 큰 도움이 되어 코딩 공부 기간중 가장 뿌듯한 날이었다.

TIL 01: Template-Literal

Template-Literal 이란?

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다. 여러 줄로 이뤄진 문자열을 좀 더 보기 쉽고 한눈에 알아볼 수 있게 정리할 수 있다.

``(dot notation) 안에 작성하며, 변수나 함수는 ${} 로 감싸준다.

자바스크립트 내에서 HTML을 작성할 때에도 사용된다.

TIL 02: Destructuring

구조분해할당(Destructuring) = 비구조화할당

구조분해할당은 객체와 배열에 사용하는 방법이 조금 다르다.

객체 구조분해할당
!키값에 따라 밸류의 값도 달라지니 키값이 매우 중요하다!

 const child = {
 	name: "철수",
    age: 13,
    school : "다람취초등학교"
 }
 
 -->
 
 const name = child.name
 const age = child.age
 const school = child.school
 
 const {name, age, school} = child

배열 구조분해할당
!키값이 없기 때문에 배열 요소의 순서가 중요하다!

const calssmates = ["철수", "영희", "훈이"]

-->

const child1 = classmates[0]
const child2 = classmates[1]
const child3 = classmates[2]

const [child1, child2, child3] = classmates

! 안전한 변수 전달 ! : 인자가 지워졌을 때와 같은 상황이 발생하면 매개변수와 인자의 순서가 원하는 대로 배치되지 않아서 데이터가 오염될 수 있다. 이 때 매개변수와 인자를 {} 로 한 번 더 감싸면 매개변수와 인자의 이름이 같은 곳으로 만 데이터가 입력된다.

TIL 03: ShothHand Property

ShothHand Property: 객체를 더 짧게 표현하는 방법으로, 키와 밸류의 이름을 같게 한다면 밸류를 생략하고 객체를 표현할 수 있다.

const profile = {
    name: "철수",
    age: 12,
    school: "다람쥐초등학교"
}

—>

const name = "철수"
const age = 12
const school = “다람쥐초등학교"

const profile = {name, age, school}