[Javascript] Arrow function, 화살표함수

(1)
function 예쁜함수(){
  //어쩌구
}

(2)
var 예쁜함수 = function(){
  //어쩌구
}

함수는 (1) 또는 (2)처럼 만들 수 있지만 화살표 함수를 통해 만들 수 있음

var 예쁜함수 = () => {
  //어쩌구
}

 

 1. 함수 본연의 기능을 아주 잘 표현 

함수를 쓰는 이유는

1) 여러가지 기능을 하는 코드를 한 단어로 묶고 싶을 때 (그리고 나중에 재사용할 때)

2) 입출력기능을 만들 때 

arrow function을 사용하면 함수 본연의 입출력 기능을 아주 직관적으로 잘 표현

var 두배만들기 = (x) => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

2. 소괄호 생략이 가능

 

파라미터가 하나라면 소괄호를 생략가능

var 두배만들기 = x => { return x * 2 }

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

 3. 중괄호 생략이 가능합니다.  

 

중괄호 안에 return 한 줄뿐이라면 중괄호와 return도 생략 가능

var 두배만들기 = x => x * 2 ;

console.log( 두배만들기(4) );
console.log( 두배만들기(8) );

 

4. arrow function을 쓰면 내부에서 this값을 쓸 때 밖에 있던 this값을 그대로 사용합니다.

arrow function은 어디서 쓰든 간에 내부의 this 값을 변화시키지 않음 

 

---

CASE 1) 메서드 만들기

 

사람이라는 오브젝트가 하나 있습니다. 

이 오브젝트에 sayHi라는 함수를 (메서드를) 하나 추가하고 싶습니다. 

var 사람 = {
  name: '손흥민',
}

사람.sayHi(); //안녕 나는 손흥민

위의 코드처럼 사람.sayHi()라고 작성하면 콘솔 창에'안녕 나는 손흥민'이라는 글자가 나와야 합니다. 

'손흥민'이라고 이름을 하드 코딩해서 출력하기보다는 실제 내 오브젝트에 있는 name에 해당하는 값이 출력되면 참 좋을 것 같군요. 

Q. sayHi()라는 함수를 어디서 어떻게 만들면 될까요? 

 

---

CASE 2 ) 오브젝트 내의 데이터를 전부 더해주는 메서드 만들기

 

오브젝트가 하나 있습니다. 

var 자료 = { 
  data : [1,2,3,4,5] 
}

그런데 이 오브젝트에 전부더하기() 라는 함수를 하나 만들어서 사용하고 싶습니다.

var 자료 = { 
  data : [1,2,3,4,5] 
}
자료.전부더하기();

위처럼 자료. 전부 더하기()라고 쓰면 자료.data 안에 있는 모든 숫자를 더해서 콘솔 창에 출력해주어야 합니다. 

(아마 15가 뜨게 되겠죠?)

Q. 어떻게 코드를 짜면 될까요? 

조건) 위에 있는 자료라는 object 중괄호 {} 내에 코드 작성 금지 

---

CASE 3) SETTIMEOUT

Q. 그럼 setTimeout을 이용해서 1초 후에 this.innerHTML을 콘솔창에 출력하고 싶으면 어떻게 코드를 수정해야 할까요?

<button id="버튼">버튼이에요</button>

<script>

  document.getElementById('버튼').addEventListener('click', function(){
    console.log(this.innerHTML)
  });

</script>

 

문제풀이바로가기

 

 

 

 

 

 

 

 

 

출처:애플 코딩