자바스크립트 기본2

let vs var

let

• es6에 추가되었습니다.
• 변하는 값을 선언하기 위해 let을 사용합니다.

---

var를 사용하면 안되는 이유

• let 이전에는 var를 사용했습니다.
• 선언도 하기전에 값을 할당할 수 있고, 할당하기도 전에 값을 출력할 수 있는 이상한 코드가 가능해집니다.
• var로 선언하게 되면 block scope이 철저히 무시됩니다. block scope: {} 이는 코드의 가독성이나 재사용하기에도 어렵겠죠. 나중에는 선언되지 않은 것들이 막 할당되는 경우도 생깁니다.

console.log(name);
name = 'minsu';
var name;

이게 가능해집니다. (...)

만약 var대신 let을 사용한다면 에러 코드가 뜹니다. 이게 정상이죠ㅎㅎ

hoisting

위에서 var같이 사용한 형태를 var hoisting 이라고 합니다.

hoisting이란 어디에서 선언했는지에 상관없이 항상 제일 위로 선언을 끌어올려주는 것을 말합니다.

따라서 let 을 사용하는 것을 적극 권장합니다.

하지만 이렇게 최신 기술을 사용하기 전에는 역시 호환성을 체크할 필요가 있습니다.
mdn 사이트에서 확인하거나 Can I use 사이트에 가셔서 확인가능합니다.

Constant

• 값을 선언함과 동시에 변경할 수 없습니다.
• 대부분 개발자들은 let 대신에 Constant로 선언을 합니다.
• 그 이유는 보안때문입니다.
• thread safty
• 실수를 줄여줍니다.

선언 방법

• Const name; //name 선언, name은 변경 불가

equality

자바스크립트에서 같은지 비교하는 연산이 두 가지가 있습니다

• ==, 타입을 무시하고 값이 같은지 비교 (ex. '5' == 5 => true)
• `===, 타입까지 신경써서 값이 같은지 비교 (ex. '5' === 5 => false)

되도록이면 타입같이 같은지 비교해서 코드를 작성하는 것을 권장합니다. (=== ㅅ ===)

function 구현할 때 Early retrun, early exit

function upgradeUser (user) {
    if (user.point > 10) {
        //upgrade logic
    }
}

function upgradeUser (user) {
    if (user.point <= 10) {
        return;
    }
    //upgrade logic
}

두 함수 중 어느 것이 더 좋은 함수일까요?

---

그것은 아래쪽 함수입니다.
먼저 조건문에 맞는 로직을 짜는 것보다는
조건문에 맞지 않는 것을 빠르게 return을 해버리고 그게 아니라면
다음에 로직을 수행하는 것이 좋습니다.

조건에 맞지 않는 경우 값이 -1 또는 undefined인 경우는 빠르게 리턴할 것!

Arrow function

• Arrow function은 항상 이름이 없는 함수여야 합니다.

const hello = function () {
    console.log('hello');
}

const hello2 = () => console.log('hello');
hello2();

위의 함수를 아래와 같이 표현이 가능합니다. {} 부분은 =>로 표현을 해주었네요.
익숙해질 필요가 있습니다 ㅎㅎ 간결한 표현이 가능해집니다.

const add = (a, b) => console.log(a + b);
add(1, 2);

()안에는 파라미터(인수)들을 넣으면 되겠죠.

다음 예제는 +,-,%,/,* 연산을 해주는 함수 예제입니다.

const calculate = (command, a, b) => {
    switch (command) {
        case 'add':
            return a+b;
        case 'substract':
            return a-b;
        case 'divide':
            return a/b;
        case 'multiply':
            return a*b;
        case 'remainder':
            return a%b;
        default:
            console.log('unknown');
    }
}
console.log(calculate('add', 1, 2));

당연히 =>을 없애고 표현할 수도 있겠죠?ㅎㅎ

참고 영상

드림코딩 by 엘리님 좋은 영상 감사합니다 ㅠ.ㅠ