koans javascript 회고 (1/3)

김민아·2022년 7월 13일

koans javascript

koans, 결론을 내리기 전에 이게 왜 맞는지 깊게 고민한다.

들어가기 전에

유닛에서 배웠던 내용을 실습을 통해 복습해 보는 시간이었다.
런타임은 node.js, Koans 테스트는 Mocha, Chai로 작성되었다.

// match 확인!! 
expect('테스트하는값').to.equal('기대하는값');

expect().equal() // 엄격한 동치 연산자(===)와 동일.
expect().deep.equal() // 모양(배열, 객체의 속성)이 같은지 확인.

제멋대로 JS

대충살자, 1+'1'이 '11'인 JS처럼~

expect(1 + '1').to.equal('11');
expect(123 - '1').to.equal(122);
expect(1 + true).to.equal(2);

~~기억하고 싶은 건 아니고.. 그냥 재밌어서 :)~~

const 재할당 ❌

const constNum = 0;
constNum = 11; // 재할당 에러

하지만! const선언된 배열이나 객체의 경우 새로운 요소를 추가하거나 삭제할 수 있다.

호이스팅

호이스팅은 JavaScript에서 실행 맥락이 동작하는 방식이다. 때문에 함수 호출이 함수 자체보다 앞서 존재하지만 동작이 가능하다. let, const의 변수와 함수 표현식은 var과 달리 선언과 동시에 초기화가 되지 않아, 초기화가 되기 전에 실행이 되면 ReferenceError가 발생한다. 스코프 영역 시작 지점부터 초기화 부분 전까지 TDZ - 시간상 사각지대가 생기는 것이다. 복습

lexical scope

자바스크립트는 렉시컬 스코프

const x = 10

function bar() {
	return x
}

function foo() {
	const x = 1
    bar()
}

bar() // 10
foo() // 10

2번 예제의 foo()를 실행하면 x가 1로 정의되고 bar()를 호출한다. 이때 x값이 1이 될 것 같지만 전역변수 10이 반환된다.
이는 실행 시점의 변수가 아닌 함수가 생성되는 시점의 변수를 읽기 때문이다. 즉 변수의 이름의 범위는 소스코드가 작선된 그 문맥에서 바로 결정된다.

클로저

function increaseBy(increaseByAmount) {
	return function (numberToIncrease) {
        return numberToIncrease + increaseByAmount;
    };
}

const increaseBy3 = increaseBy(3);
const increaseBy5 = increaseBy(5);

expect(increaseBy3(10)).to.equal(13);
expect(increaseBy5(10)).to.equal(15);

클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있다. 함수와 함수가 선언된 어휘적(lexical) 환경의 조합을 말한다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 함수가 호출되는 환경와 별개로, 기존에 선언되어 있던 환경 어휘적 환경을 기준으로 변수를 조회하는 자바스크립트의 특성 때문이다.

클로저 응용 예

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`

htmlMaker('div')('code states') // `<div>code states</div>`

const liMaker = htmlMaker('li')
liMaker('1st item') // `<li>1st item</li>`
liMaker('2nd item') // `<li>2nd item</li>`

화살표 함수

const add = (x, y) => {
  return x + y
}

1. 리턴을 생략

const subtract = (x, y) => x - y //return

2. 파라미터가 하나이면 (괄호) 생략

const divideBy10 = x => x / 10 //return

3. (괄호)로 묶을 수 있음

const multiply = (x, y) => (x * y) //return

4. 클로저 + 화살표 함수

const adder = x => {
  return y => {
    return x + y 
  }
}

5. 클로저 + 화살표 함수 (축약)

const subtractor = x => y => {
  return x - y
}

Call by value와 call by reference

값에 의한 호출

함수의 인자로 어떤 변수를 넘길 때 해당 변수가 가지고 있는 값을 그대로 복사하여 넘겨주는 방식이다.

let word = 'Hello!'

function replaceWord (str) {
  str = 'Yello!'
  return str
}

replaceWord(word)
console.log(word) // 'Hello!'

참조에 의한 호출

참조에 의한 호출 방식은 변수가 가리키고 있는 메모리 공간의 주소를 넘기는 방식이다.

const arr = ['zero', 'one', 'two', 'three'];

function passedByReference(refArr) {
  refArr[1] = 'changed';
}

passedByReference(arr); // ['zero', 'changed', 'two', 'three']