📝 ES6 문법
📂 3. 템플릿 문자열
- 전통적인 문자열 연결은 더하기 기호(+)로 문자열과 변수를 서로 이어붙이는 방식
console.log(lastname + ", " + firstname + " " + middlename);
- 템플릿에서는 ${ }를 사용해 문자열 안에 변수를 집어넣을 수 있기 때문에 문자열을 단 하나만 사용해도 된다.
console.log(`${lastname}, ${firstname} ${middlename}`);
📂 4. 디폴트 파라미터
- 값이 전달되지 않는 함수 파라미터의 기본값을 설정하는 방법
<!DOCTYPE html> <script> function greet(name = "YOUNG MASTER") { console.log("Welcome mr." + name); } greet("PAUL ATREIDES"); // 디폴트 파라미터 greet(); </script>
- 결과
📂 5. 화살표 함수
- function 키워드 없이도 함수를 만들 수 있으며, return을 사용하지 않아도 식을 계산한 값이 자동으로 반환
<!DOCTYPE html> <script> // 일반 방식 let lordify = function (name) { return `열공하는 ${name}`; }; console.log(lordify("나")); // 열공하는 나 //화살표 함수 방식 lordify = (name) => `열공하는 ${name}`; </script>
- 결과
📝 ES6 객체와 배열
<script> // 객체 구조 분할 let sandwich = { bread: "플랫 화이트", meat: "베이컨", topping: ["치즈", "양상추", "칠리소스"], }; let { bread, meat } = sandwich; // let bread = sandwich.bread; // let meat = sandwich.meat; console.log(bread, meat); bread = "식빵"; meat = "삼겹살"; console.log(bread,meat); console.log(sandwich.bread, sandwich.meat); </script>
- 결과
<script> //객체 구조 분할 활용 let person = { firstname: "길동", lastname: "홍", }; let study = ({ firstname }) => { console.log(`오늘도 공부하는 ${firstname}`); }; study(person); </script>
- 결과
개발 연습장