[코딩애플] JavaScript ES6 강의 정리 (Part1 5강 ~ 6강)

이언덕·2024년 6월 4일
스터디코딩애플프론트엔드

코딩애플

목록 보기
26/37
post-thumbnail

5강 / Arrow function은 function을 대체하는 신문법이 아님

ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했다.
arrow function 이라는 문법인데 이걸 이용하면 함수를 만들 수 있다.

Arrow function 문법

자바스크립트에선 함수를 이런 식으로 만들어서 사용한다.

(1)
function testFun(){
  //실행할 코드
}

(2)
let testFun = function(){
  //실행할 코드
}

함수는 (1) 또는 (2)처럼 만들고
testFun(); 이렇게 함수를 사용한다.
(function 키워드로 시작하는것 말고도 (2)번처럼 변수에다가 함수를 등호=로 집어넣어서 함수를 만들 수 있다. )
근데 ES6 신문법을 사용하면 함수를 이렇게 만들 수도 있다.

let testFun = () => {
  //실행할 코드
}

function이라는 길고 복잡한 키워드 대신에
=> 이런 화살표를 사용해서 함수를 만들어내는 신문법이다.
그냥 그런게 있구나 하고 외우면 된다.
근데 외우기 전에 이 문법의 용도를 아는게 중요하다.


1. 함수 본연의 기능을 아주 잘 표현하는 문법입니다.

혹시 프로그래밍할 때 function 문법은 왜 사용할까?
모른다면 지금 당장 외워야한다.

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

이럴 때 함수를 써야 한다.
그리고 arrow function을 사용하면 함수 본연의 입출력기능을 아주 직관적으로 잘 표현해준다.

입출력기능이 뭔소리에요?

함수가 뭔지부터 알아보자.
함수는 수학에서 온 개념이다.
원래 함수는 뭐 숫자를 집어넣으면 뭔가 다른 숫자를 배출하는 블랙박스같은 역할을 한다.

위 그림처럼 input을 집어넣으면 output을 출력해주는 박스가 바로 함수이다.

문제) f(x) = x + 2 입니다. 그럼 f(2)는 뭘까요?

답은 4이다.
f(x) 이게 함수이다.
아까 박스처럼 그림으로 표현하자면 이럴 것이다.

위에선 x를 집어넣으면 x + 2 를 출력해주는 함수를 만들어 쓰고 있던 것이다.
그럼 프로그래밍에선 어떨까? 2를 집어넣으면 x + 2를 출력해주는 함수를 어떻게 만들어쓸까?

function plus(x){
  return x + 2
}

이런 문법을 이용해서 만들어 사용한다.
함수의 소괄호안에는 input역할을 하는 파라미터가 있고
함수내에 return이라는 것은 output역할을 하는 키워드이다.
그럼 이제 plus(2); 이렇게 사용하시면 4가 출력된다.
소괄호에 뭔가 집어넣으면 return을 이용해 뭔가 뱉어내는 것
이게 바로 함수의 입출력 기능이다.

그래서 arrow function을 쓰시면 입출력기능이 쉽고 예쁘게 표현된다.

let multiply = (x) => {
  return x * 2;
};

console.log(multiply(4));
console.log(multiply(8));

숫자를 넣으면 2배를 해주는 함수를 하나 만들었다.
함수 표현식 자체가 x가 x * 2가 됩니다~ 라고 말하는 것 같다.
매우 이해하기 쉬워진다.
이게 장점1이다.


2. 소괄호 생략이 가능합니다.

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

let multiply = x => { return x * 2 }

console.log( multiply(4) );
console.log( multiply(8) );

이렇게 해도 된다는 소리이다.


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

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

let multiply = x => x * 2 ;

console.log( multiply(4) );
console.log( multiply(8) );

생략하니 이제 x가 어떻게 변하는 함수인지 입출력기능이 바로 한눈에 들어온다.

원래 {} 중괄호 끝날 땐 세미콜론 안쳐도 잘 되는데
생략할 땐 세미콜론은 적어주어야한다.


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

우리가 함수를 쓸 때.. 함수가 쓰인 위치에 따라서 내부의 this값이 변한다고 저번시간에 배웠다.
근데 arrow function은 어디서 쓰든간에 내부의 this 값을 변화시키지 않는다.
그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수이다.
(이게 장점 4이자 arrow function을 쓰는 핵심 이유이다.)
예시를 봐보자.

let testObj = {
  testFun : function(){ console.log(this) }
}

testObj.testFun()

위의 코드는 실행하면 무슨 결과가 나올까?

this값을 출력하라고 한다. this가 뭘까?
testFun()를 가지고 있는 object인 testObj이 콘솔창에 출력될 것이다.



그럼 이건 뭐가 출력될까?

let testObj = {
  testFun : () => { console.log(this) }
}

testObj.testFun()

위의 코드는 실행하면 무슨 결과가 나올까?

window라는게 출력된다.
여기선 this가 window이다.
왜 함수의 주인인 testObj이 출력되지 않냐면..
this값은 함수를 만나면 항상 변하는데 arrow function 안에서는 변하지 않고 밖에 있던 this를 그대로 사용한다.
(오브젝트 밖에 있던 this는 window이다.)

왜냐면 arrow function은 외부에 있던 this를 그대로 내부로 가져와서 사용하는 함수기 때문이다.
항상 장점은 아니다. 내가 예측하던 this값과 달라질 수도 있으니 단점이 될 수 있다.
이제 개발할 때 arrow function 열심히 사용해보자.
하지만 this의 뜻이 달라지는 것 처럼 일반 function과 용도가 완전 같지 않기 때문에
일반 function을 항상 대체할 수 있는 문법이 아니다. 그것만 주의하자.



6강 / this & arrow function 연습문제 3개

1. 간단한 메소드 만들기

personTest이라는 object가 하나 있다.
이 오브젝트에 sayHi라는 함수를 (메소드를) 하나 추가하고 싶다.

let personTest = {
  name: '손흥민',
}
personTest.sayHi();//안녕 나는 손흥민

위의 코드처럼 personTest.sayHi()라고 작성하면 콘솔창에 '안녕 나는 손흥민' 이라는 글자가 나와야한다.
'손흥민'이라고 이름을 하드코딩해서 출력하기보다는 실제 내 object에 있는 name에 해당하는 값이 출력되면 참 좋을 것 같다.

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

let personTest = {
  name: "손흥민",
  sayHi: function testFun() {
    console.log(`안녕 나는 ${this.name}`);
  },
};
personTest.sayHi();

여기서 this는 어떤 역할을 한 것인가?

여기서 this의 역할은 object안에서 사용되어졌기 때문에 personTest을 가리킬 수 있다.
그렇기 때문에 personTest.name = this.name 이렇다고 볼 수 있다.


2. object 내의 데이터를 전부 더해주는 메소드만들기

object가 하나 있다.

let testDocument = {
  data : [1,2,3,4,5]
}

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

let testDocument = {
  data : [1,2,3,4,5]
}
testDocument.allPlus();

위처럼 testDocument.allPlus()라고 쓰면 testDocument.data 안에 있는 모든 숫자를 더해서 콘솔창에 출력해줘야한다.
(아마 15가 뜨게 되겠죠?)

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

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

중괄호 내에 코드 작성금지이기 때문에 testDocument object안에 함수를 추가하는 방식으로 코드를 짜야한다.
(object안에 함수나 array 등등 추가하는 방법을 모른다면? object 추가)

testDocument.allPlus = function () {
  let plus = 0;
  this.data.forEach(function (num) {
    plus = plus + num;
  });
  console.log(plus);
};

testDocument.allPlus();

key가 되는 allPlus에 이름 없는 함수를 넣어주면서 이름 없는 함수에는 data의 array 숫자를 모두 더한 값이 콘솔에 찍힌다.
그리고 testDocument.allPlus();를 해주면 이름 없는 함수가 실행되면서 콘솔에 15가 찍힌다.


3. setTimeout 이용해보기

자바스크립트엔 setTimeout이라는 유용한 함수가 있다.
특정 코드나 함수를 X초 후에 실행하고 싶을 때 사용하는 함수이다.
어떻게 쓰냐면

setTimeout(콜백함수, ms단위의 시간)

이렇게 쓰면 된다.
예를 들어보면

setTimeout(function(){ console.log('안녕') }, 1000)

이렇게 한줄 쓰시면 1000ms 후에 왼쪽에 있는 콜백함수 내의 코드를 실행해준다.
그럼 1초후에 안녕이 콘솔창에 출력된다.
또는 콜백함수자리에 내가 직접 만든 함수를 넣을 수도 있다.
역시 예를 들어보면

function 함수(){
  console.log('안녕')
}
setTimeout(함수, 1000)

이렇게 콜백함수 대신 내가 미리 만들어놓은 함수의 이름을 적어도 실행된다.
다만 콜백함수자리에 내가만들어놓은 함수를 입력하고 싶으면 소괄호는 빼야한다.
setTimeout 개념정리 끝이다.
더 자세하게 알고 싶다면? setTimeout


본격 문제들어갑니다.

버튼을 클릭하면 지금 누른 버튼에 담긴 글자를 출력하는 기능을 만들고 싶어서 이렇게 코드를 짰다.

<button id="btn">버튼</button>

<script>

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

</script>

그럼 콘솔창에 '버튼'라는 글자가 출력된다.

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

1초 후에 '버튼'라는 글자가 콘솔창에 등장하면 성공이다.

document.getElementById("btn").addEventListener("click", function () {
  setTimeout(() => {
    console.log(this.innerHTML);
  }, 1000);
});

이 코드는 버튼을 클릭했을 때, 1초 후에 그 버튼의 innerHTML을 출력하는 코드입니다. 여기서 중요한 점은 this의 동작 방식입니다. 다음은 이 코드의 단계별 해석입니다:

document.getElementById("btn").addEventListener("click", function () {
  setTimeout(() => {
    console.log(this.innerHTML);
  }, 1000);
});

단계별 해석

  1. document.getElementById("btn")

    • HTML 문서에서 ID가 "btn"인 버튼요소를 선택한다.

  2. addEventListener("click", function () {...})

    • 선택한 버튼 요소에 "click" 이벤트 리스너를 추가한다.
    • 버튼이 클릭되면, 지정된 콜백 함수가 실행된다.

  3. 익명 함수:

    • function () {...}는 클릭 이벤트가 발생했을 때 실행되는 익명 함수이다.

  4. setTimeout(() => {...}, 1000):

    • 이 함수는 1초(1000 밀리초) 후에 주어진 콜백 함수(화살표 함수)를 실행한다.

  5. 화살표 함수 () => {...}:

    • 1초 후에 실행될 함수이다.
    • 이 함수 내부에서 this는 상위 스코프(클릭 이벤트 핸들러 함수)의 this를 상속받는다.
    • 여기서 상위 스코프의 this는 이벤트 핸들러가 호출될 때 참조된 요소(즉, 버튼 요소)를 가리킨다.

  6. this.innerHTML:

    • 화살표 함수 내부에서 this는 이벤트 핸들러 함수의 this를 상속받기 때문에, 클릭된 버튼 요소를 참조한다.
    • this.innerHTML은 그 버튼 요소의 innerHTML을 반환한다.

  7. console.log(this.innerHTML):

    • 버튼 요소의 innerHTML을 콘솔에 출력한다.

왜 this가 버튼 요소를 가리키는가?

  • 일반 함수에서 this는 호출된 방식에 따라 결정된다.
  • 이벤트 핸들러로 설정된 일반 함수 내에서 this는 이벤트가 발생한 요소(여기서는 버튼)를 가리킨다.
  • 화살표 함수는 this를 자신이 정의된 스코프에서 상속받기 때문에, 여기서는 이벤트 핸들러 함수의 this를 상속받아 버튼 요소를 가리킨다.

따라서, 버튼을 클릭하면 1초 후에 그 버튼의 innerHTML이 콘솔에 출력된다. 이 코드는 this가 버튼 요소를 참조하기 때문에 예상대로 동작한다.

profile
이언덕
이전 포스트

[코딩애플] JavaScript ES6 강의 정리 (Part1 3강 ~ 4강)

다음 포스트

[코딩애플] JavaScript ES6 강의 정리 (Part1 7강 ~ 8강)

0개의 댓글