[ javascript ] 함축적인 표현들 - ArrowFunction, Destructuring Assignment

함축적인 표현들 - Arrow Function, Destructuring  Assignment

 

1. Arrow Function : 화살표 함수

화살표 함수(Arrow Function) 이란 기존 function 표현에 비해 짧아 코드 가독성이 좋다.

익명성을 띠며, 생성자로 사용할 수 없다.

 

🔻 기존 방식

let a = function() {
  console.log("function");
}
a();

 

🔻 Arrow Function 방식 (new!)

let a = () => {
  console.log("arrow function");
}
a();.

 

🔻 map함수에 적용

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

// 이 문장은 배열을 반환함: [8, 6, 7, 9]
elements.map(function(element) {
  return element.length;
});

// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
elements.map(element => {
  return element.length;
}); // [8, 6, 7, 9]

// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
// 중괄호({})를 생략할 수 있다.
elements.map(element => element.length); // [8, 6, 7, 9]

 

2.  Destructuring Assignment : 구조 분해 할당

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

 

//객체 
let blog = {
	owner : "noah",
	url : "noahlogs.tistory.com",
	getPost() { 
		console.log("ES6 문법 정리"); 
	}
};

 

🔻 기존 방식

//기존 할당 방식
let owner = blog.owner
let getPost = blog.getPost()

 

🔻 Destructuring Assignment 방식(new!)

//비구조 할당 방식
let { owner, getPost } = blog;  

// 반드시 딕셔너리(blog) 의 키 값과 이름이 같아야 함!

//함수에서 비구조 할당 방식으로 전달된 딕셔너리 값 꺼내기
let blogFunction = ({owner,url,getPost}) => {
	console.log(owner)
	console.log(url)
	console.log(getPost())
}

blogFunction(blog)

---

참고자료

- SpartaCodingClub 앱개발 종합반 강의

- MDN 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions

화살표 함수 - JavaScript | MDN