< Javascript > Koans 정리 (1/2)

초초·2023년 1월 4일

koans 자바스크립트 페어

💻📚 TIL

목록 보기

11/22

내용 정리

내 방식대로 이해한 내용은 초록색으로 필기!

타입

비교연산자는 두 값의 일치여부를 검사한다 === (엄격한 비교연산자), ==(느슨한 동치연산자)

expect(0 == false).to.be.true;
expect(![] == false).to.be.true;
expect([0] == 0).to.be.true;

느슨한 비교연산자의 경우 타입이 달라도 값이 같은 경우 참으로 판단하기 때문에 주의해야 함

산술연산자를 이용해 간단한 산술식을 계산할 수 있다+,-,/,*

expect(1 + '1').to.equal('11');  		 //숫자 + 문자열 = 문자열
expect(123 - '1').to.equal(122);		 //숫자 - 문자열 = 숫자
expect(1 + true).to.equal(2);			 //숫자 + boolean = 숫자
expect('1' + true).to.equal('1true'); 	 //문자 + boolean = 문자

이때, 타입이 같은 값끼리 연산해주지 않으면 의도치 않은 결과값을 받을 수 있다

가능한 엄격한 동치 연산자를 사용하고, 같은 타입끼리 사용해야 결과값 예측이 쉽다

변수

const로 선언된 변수는 재할당, 재선언 둘다 불가능

const arr = [];
const toBePushed = 42;
arr.push(toBePushed);
expect(arr[0]).to.equal(42);

하지만 새로운 요소를 추가하거나 삭제하는 것은 가능하다

[참조] 선언 키워드 확인 https://google.github.io/styleguide/jsguide.html#features-use-const-and-let

스코프

변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳
변수의 값이 돌아다닐 수 있는 영역

함수선언식 / 함수표현식

let funcExpressed = 'to be a function';
    
    function funcDeclared() {
      return 'this is a function declaration';  //선언식
    }

    funcExpressed = function () {
      return 'this is a function expression';   //표현식
    };

함수선언식 : function 키워드를 통해 함수를 생성 / 타입은 함수
함수표현식 : 변수에 함수를 할당하여 함수를 생성 / 타입은 문자열

호이스팅

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
선언된 순서에 상관없에 유효범위의 맨 상단에 선언된 것처럼 사용할 수 있게 됨

//함수 선언식의 경우
greeting(); // 'Hello'

function greeting() {
  console.log('Hello');
}

greeting(); // 'Hello'
---
//함수 표현식의 경우
greeting(); // Error

var greeting = function greetingFunc() {
  console.log('hi');
}

greeting(); // 'hi'

함수 선언식의 경우, 함수가 선언되기 전의 출력식에 정상적으로 값이 출력이 된 것을 볼 수있다.이렇게 함수 선언식의 경우 호이스팅되는 현상이 있음을 알 수 있다
하지만 함수 표현식의 경우 var 변수에 할당된 함수보다 앞선 출력식은 Error가 뜨는 것을 확인할 수 있다. var의 경우 선언은 호이스팅 되어 맨 위로 끌어올려지나 할당된 값은 호이스팅되지 않아 값을 찾을 수 없기 때문에 함수 표현식은 호이스팅 되지 않는다는 것을 알 수 있다

lexical scope 어휘적 범위지정

Lexical scope는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다
이때 주의할 점은 함수를 호출이 아닌 선언에 따라 결정된다

var x = 1;

function outer() {
    var x = 2;
    function inner() {
        console.log(x)
    }

    inner();
}

outer();

lexical 스코프는 스코프를 선언된 위치를 기준으로 정한다.
따라서 함수 내부에 선언된 inner함수의 x의 값을 찾을때, 1. 자신이 선언된 스코프inner() > 2. 자신이 선언된 스코프의 가장 가까운 외부 스코프outer() > 3. 전역 스코프 순으로 참조하여 변수의 값을 찾기 때문에 inner의 x값은 2가 된다는 것을 알 수 있다

매개변수의 default값

function defaultParameter(num = 5) {
      return num;
    }
defaultParameter(); // 5
defaultParameter(10) // 10

선언된 함수의 매개변수에 초기값이 할당된 경우, 함수를 호출할 때 매개변수에 전달된 인자가 없으면 초기값을 뱉어낸다. 매개변수에 전달된 인자가 있으면 초기값을 무시하고 전달된 인자를 사용한다

클로저

함수와 함수가 선언된 어휘적 환경의 조합
함수가 선언된 당시에 정해진 스코프lexical scope에 따라 각 스코프에 선언된 변수가 접근할 수 있는 범위가 나누어지는 현상

   function init() {
      var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
      function displayName() { // displayName() 은 내부 함수이며, 클로저다.
        alert(name); // 부모 함수에서 선언된 변수를 사용한다.
      }
      displayName();
    }
    init();

내부함수는 외부 함수의 변수를 사용할 수 있지만 그 반대의 경우는 불가하다

function outerFn() {
	let age = 24;
	name = 'jimin';
	let height = 178;

	function innerFn() {
  		age = 26;
  		let name = 'suga';
  		return height;
	}
}
expect(age)        //inner에서 age는 26으로 재할당이 됨
expect(name)    //outer에서 name이 jimin으로 재할당 됨 

return innerFn;

내부함수에서 재선언된 변수는 외부함수에서 사용할 수 없지만 재할당되는 경우에는 내부함수의 값이 외부함수의 재할당값에 전달되기 때문에 사용할 수 있게 됨

❗ 화살표 함수

const add = function (x, y) {
      return x + y
}
---
const add = (x, y) => {          //const 함수이름 = (매개변수) => {실행문}
      return x + y
}
---
const add = (x, y) => x + y
---
const adder = x => {
      return y => {
        return x + y
}
---
const adder = x => y => {
      return x + y
}

위의 다섯 코드는 모두 의미가 같은 코드로 볼 수 있다
이때 let addfunc = adder(5)로 변수의 값을 할당하면 adder함수의 x에 5의 값을 넣은 상태로 저장된다 adder(5)(7)혹은 adderfunc(7)와 같이 사용하여 값을 도출할 수 있다

const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
htmlMaker('div')('content') 	//`<${'div'}>${'content'}</${'div'}>`
const divMaker = htmlMaker('div');