[YDKJ] Get Started - Appendix A

요약

Values vs. References

• JS에서 원시값은 값복사, 객체는 주소 복사 !

 

So Many Function Forms

• 익명함수 vs 이름 있는 함수 => 익명함수는 이름을 추론한다.

var awesomeFunction = function(coolThings) {
    // ..
    return amazingStuff;
};

awesomeFunction.name;
// "awesomeFunction"

// let awesomeFunction = ..
// const awesomeFunction = ..
var awesomeFunction = function someName(coolThings) {
    // ..
    return amazingStuff;
};

awesomeFunction.name;
// "someName"

 

• 저자는 이름을 만들고 함수를 작성하는 게 더 가독성 좋다고 생각한다.
• 2020년 기점으로 많은 함수 정의 형식이 나왔다.

// 생성자 함수 선언
function *two() { .. }

// 비동기 함수 선언
async function three() { .. }

// 비동기 생성자 함수 선언
async function *four() { .. }

// export 함수 내보내기
export function five() { .. }

// IIFE 즉시실행함수
(function(){ .. })();
(function namedIIFE(){ .. })();

//수비동기 즉시실행함수
(async function(){ .. })();
(async function namedAIIFE(){ .. })();

// 화살표 함수
var f;
f = () => 42;
f = x => x * 2;
f = (x) => x * 2;
f = (x,y) => x * y;
f = x => ({ x: x * 2 });
f = x => { return x * 2; };
f = async x => {
    var y = await doSomethingAsync(x);
    return y * 2;
};
someOperation( x => x * 2 );
// ..

(화살표 함수는 구문적으로 익명함수)

 

• 함수는 클래스 정의와 객체 안에서도 지정할 수 있다. 차이점은 쉼표 !

class SomethingKindaGreat {
    // class methods
    coolMethod() { .. }   // no commas!
    boringMethod() { .. }
}

var EntirelyDifferent = {
    // object methods
    coolMethod() { .. },   // commas!
    boringMethod() { .. },

    // (anonymous) function expression property
    oldSchool: function() { .. }
};

 

Coercive Conditional Comparison

• JS에서 ==은 비교전에 강제 형변환이 일어난다.

let x = "hello";
if (x) {
    //실행됨
    console.log('1');
}
if (x == true) {
    //실행안됨.
    console.log('2');
}
if (Boolean(x) == true) {
    //실행됨
    console.log('3');
}

왜 x==true가 실행되지 않은 걸까.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comparisons_and_sameness

이곳에 상세히 나와있다.

string과 boolean을 비교할 때는 둘다 number로 바꾸게되는데,

string은 => NaN

boolean은 =>1 따라서 실행이 되지 않는다.

 

Prototypal "Classes"

• 프로토타입 체인을 연결하는 방법 중 프로토타입 클래스 방식이 있다(현재는 거의 안쓰는 코드 스타일)

function Classroom() {
    // ..
}

Classroom.prototype.welcome = function hello() {
    console.log("Welcome, students!");
};

var mathClass = new Classroom();

mathClass.welcome();
// Welcome, students!

모든 함수는 prototype이라는 이름의 빈 객체를 참조하기 때문에 가능함.

mathClass에는 welcome 속성이 없지만, 성공적으로 위임됨 !

 

이제 이러한 패턴은 강력히 비권장되고 있고 es6의 클래스 메커니즘이 추천됨.

class Classroom {
    constructor() {
        // ..
    }

    welcome() {
        console.log("Welcome, students!");
    }
}

var mathClass = new Classroom();

mathClass.welcome();
// Welcome, students!

둘 다 상속을 하지만, 클래스 메커니즘이 일단 더 깔끔하고 클래스지향 패턴에 더 알맞기 때문이다.

 

 

 

느낀 점

화살표함수가 익명함수인 것을 몰랐다. 이 부분 개념이 좀 약했던 것 같은데 잡혔다.

 

if("true" == true)가 false인 이유를 아주 오래 고민했다... ==가 단순히 타입체크를 안 한다고만 생각해서 이러한 고민을 한 것 같다. 근데 이는 잘못된 생각이었고, 비교하기 전에 타입체크를 하고 타입변환이 일어난다. 모든 타입 간의 변환을 외울 수는 없겠지만, 적어도 문제가 발생할 수도 있다는 눈이 생겼다.

 

prototype 클래스 패턴이 그냥 나의 머릿속에 흩어진 지식 중 하나였는데 이번에 정리가 됐다.