Template literal
: '+' 연산자를 사용하지 않아도 새로운 문자열을 삽입할 수 있는 표기법
const lemon = 3
const strawberry = 2
//+ 연산자 사용 표기법
console.log("나는 레몬을" + lemon + "개" + "딸기를" + strawberry + "개" + 샀다.)
//template literal
console.log(`나는 레몬을 ${lemon}개 딸기를 ${strawberry}개 샀다`)
//result
나는 레몬을 3개 딸기를 2개 샀다.
parameter(매개변수)를 사용한 함수 만들기
: 전달인자로 넘겨진 데이터들이 순서대로 매개변수에 담긴다.
function JoinTemplate(name, age, school, date) {
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다.</h1>
<hr />
<div>이름: ${name}</div>
<div>나이: ${age}살</div>
<div>학교: ${school}</div>
<div>가입일: ${date}</div>
</body>
</html>
`
}
const myName = '철수';
const myAge = 13;
const mySchool = '다람쥐초등학교';
const myDate = '2010-09-07';
const result = JoinTemplate(myName, myAge, mySchool, myDate);
console.log(result)
Object(객체)를 활용한 함수 만들기
:{}(중괄호) 사용하여 객체 선언 후 객체 안 정보 하나를 가져올 때는 '객체명.key값' 사용
function JoinTemplate(user) {
return `
<html>
<body>
<h1>${user.name}님 가입을 환영합니다.</h1>
<hr />
<div>이름: ${user.name}</div>
<div>나이: ${user.age}살</div>
<div>학교: ${user.school}</div>
<div>가입일: ${user.date}</div>
</body>
</html>
`;
}
const myUser = {
name: '철수',
age: 13,
school: '다람쥐초등학교',
date: '2010-09-07',
};
const result = JoinTemplate(myUser);
console.log(result);
전달인자로 여러 개의 데이터를 넘겨줄 필요 없이 하나의 객체를 넘겨준다.
➡️ 함수와 함께 호출된 object(객체)를 JoinTemplate의 user라는 parameter(매개변수)에 할당 한다.
구조분해할당
: 객체 또는 배열의 구조를 분해한 뒤 필요한 데이터 할당
객체 구조분해할당
const user = {
name: 'Jamie',
age: 26,
school: 'sm',
date: '2023-03-10',
}
// 기존 방식
const name = user.name
const age = user.age
const school = user.school
const date = user.createdAt
// 구조분해할당
const { name, age, school, date } = user
user라는 객체에서 각각 대응되는 key를 가져와 해당 key를 하나의 변수로 , 그 값을 변수에 할당된 값으로서 활용 한다. ➡️ 기준이 되는 객체에 반드시 해당 이름을 가진 key가 존재 해야 한다.
배열도 구조분해할당 가능
const school = ['Jay', 'Jamie', 'Jen'];
const child1 = school[0];
const child2 = school[1];
const child3 =school[2];
// 구조분해할당을 이용해 child1엔 school[0], child2엔 school[1],child3엔 school[2]을 할당
const [child1, , child2, child3] = school;
🚨🚨객체와 배열 구조분해할당 주의점
객체 : 객체 안의 key값을 가져와 할당 한다. 즉, 객체 안 존재하는 key 값으로 재할당을 해야 하며 순서와 상관 없이 할당 된다.
배열 : 배열의 순서대로 할당 된다.
매개변수 바로 구조분해할당 하기도 가능
// 구조분해할당으로 변경
function JoinTemplate({ name, age, school, createdAt }){
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다.</h1>
<hr />
<div>이름: ${name}</div>
<div>나이: ${age}살</div>
<div>학교: ${school}</div>
<div>가입일: ${date}</div>
</body>
</html>
`
}
const myUser = {
name: 'Jamie',
age: 26,
school: 'sm',
date: '2023-03-05',
}
const result = JoinTemplate(myUser);
console.log(result);
shorthand property names
: 객체의 key와 value 값이 같을 경우 value를 생략하고 작성 가능
const name = 'Jamie'
const age = 26
const school = 'sm'
const createdAt = '2023-03-05'
//value값 생략
const myUser = {
name,
age,
school,
createdAt
}
console.log(JoinTemplate(myUser));
➡️ 이를 바탕으로 myUser에 담긴 값 자체를 함수의 Argument(인수)로 넣어준다. JoinTemplate의 인자로 전달 되는 객체 또한 shorthand property names를 사용해 하나의 객체를 바로 인자로 넣어준 것이다.
function JoinTemplate({ name, age, school, date }) {
return `
<html>
<body>
<h1>${name}님 가입을 환영합니다.</h1>
<hr />
<div>이름: ${name}</div>
<div>나이: ${age}살</div>
<div>학교: ${school}</div>
<div>가입일: ${date}</div>
</body>
</html>
`;
}
const name = 'Jamie'
const age = 26
const school = 'sm'
const date = '2023-03-05'
// const myUser = {
// name,
// age,
// school,
// date,
// };
// shorthand property names 적용
const result = JoinTemplate({ name, age, school, date });
console.log(result);
Back-end Developer