🌙 15일차 - JavaScript Koans -

오늘은 pair 과제를 진행하였고, 과제에 대한 부분을 소개해보려고 한다.

과제 : JavaScript Koans

무엇을

• 지금 까지 학습한 내용

  JavaScript의 타입
  변수 선언 키워드 let과 const
  화살표 함수
  스코프
  배열
  객체
  spread
  구조분해할당

어떻게

• 자바스크립트에서 테스트할 수 있는 문법을 통해 제시 된 문제들을 해결

• 👆🏻 위는 예시 사진이다.

• 코드스테이츠의 Github 자료에서 지정한 파일을 fork 하고 파일을 받은 다음, 비주얼 스튜디오로 실행한 결과이다.

• 테스트 문법 : expect(테스트하는값).기대하는 조건

• 테스트 하는 값과 기대하는 조건을 알맞게 작성하는 것이 이번 과제이다.

목표

• koans 뜻이 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다는 의미를 가지고 있다고 한다.
• 이번 과제에는 테스트 오류를 볼 수 있어서 답이 뭔지 정확하게 나와있다.
• 따라서 이번 과제는 이전에 학습했던 내용들을 깊게 생각하며 복습하는 시간이자, 모르는 개념들은 검색을 통해 복습을 하는 시간이라는 것이 목표이다.

과제 제출

• 비주얼 스튜디오 터미널에서 npm install로 npm을 다운로드 한 뒤에,
  npm submit을 하여 과제 제출에 완료하였다.

과제 확인

npx codestates-assignment-manager login

---

💡 koans 과제 어려웠던 점

문제

1. 04_Scope - 'lexical scope와 closure에 대해 다시 확인합니다.'

< code >

이해가 안되었던 점

test code 문제는 모두 알맞게 작성하였으나 왜 저 innerFn()을
굳이 outerFn 함수 안에서 하고 있는지 밖에서는 실행이 안되는지 이해가 되질 않아서 내가 따로 test code를 작성해 보았다.

let age = 27;
let name = 'jin';
let height = 179;
function outerFn() {
name = 'jimin';
function innerFn() {
age = 26;
height = 180
}
return innerFn;
}
const innerFn = outerFn();
console.log(age,name,height)

이 상태로만 봤을 때 console.log의 값은
age = 27, name = jimin, heigth = 179가 된다.

내가 생각했을 때는 age = 26, name = jimin, heigth = 180이었다.
처음에는 innerFn 함수도 전역 변수를 사용할 수 있는데 왜 안 바뀌는지.. 🧐 열심히 찾아댕겨봤는데 안보여서 아고라스테이츠에 올릴 생각이었다.

해결

innerFn 함수를 실행시키지 않았기 때문에 outFn 함수 실행 값만 들어갔던 것이었다.

< code >
let age = 27;
let name = 'jin';
let height = 179;
function outerFn() {
name = 'jimin';
function innerFn() {
age = 26;
height = 180
}
return innerFn;
}
const innerFn = outerFn();
innerFn() // innerFn 함수 실행 code 넣기
console.log(age,name,height)

const innerFn = outerFn();

• 위 code는 innerFn 변수에 outerFn 함수를 실행한 값을 넣어주고 있다.
  outerFn 함수에서는 전역 변수 name의 값을 jimin으로 바꾸고 innerFn 함수를 리턴하고 있다.
  따라서 console.log 값은 age = 27, name = jimin, heigth = 179가 된다.

그렇다면 아래 코드처럼 innerFn 변수에 outerFn 실행값을 넣으면 innerFn 함수의 주소가 들어가 있으니 함수 실행처럼 innerFn()을 하게되면
innerFn 함수 안의 코드들이 실행된다.
따라서 console.log 값은 age = 26, name = jimin, heigth = 180이 된다.

let age = 27;
let name = 'jin';
let height = 179;
function outerFn() {
name = 'jimin';
function innerFn() {
age = 26;
height = 180
}
return innerFn;
}
const innerFn = outerFn();
innerFn() // innerFn 함수 실행
console.log(age,name,height)

결론

함수 안에 함수가 있을 때, 바깥 함수에서 안쪽 함수를 return 하게 되면 안쪽 함수의 주소값이 리턴된다.
안쪽 함수의 주소값을 다른 변수에 넣어서 실행하게 되면 안쪽 함수의 코드들이 실행되어 리턴된다는 것을 알게 되었고 아주 완벽히는 아니지만
어느 정도 실행의 흐름을 알게 되었다.