JS 변수, 연산자 (PurpleCode Study)

변수

var 키워드의 단점

• 똑같은 이름으로 여러번 선언 가능
• 유효범위에 문제.
  var키워드는 기본적으로 function scope를 가지게 된다.

바로 조건문 안에 result라는 변수를 선언했는데 if 조건문 밖에서 result가 사용이 가능한 정말 기이한 상황이 발생

var score = 90;

if(score >= 80){
    var result = "pass";
}else{
    var result = "fail";
}

console.log(result);//pass

------------------------------------------------
 
var score = 90;

if(score >= 80){
    let result = "pass";
}else{
    let result = "fail";
}

console.log(result); //result is not defined

------------------------------------------------
  
  var score = 90;

function PassOrFail(score){
if(score >= 80){
    var result = "pass";
}else{
    var result = "fail";
}
};
PassOrFail(score);
console.log(result); //result is not defined

• Hoisting(호이스팅)의 문제점
  Hoisting(호이스팅): 쉽게 변수의 선언부를 끌어올려라 라는 뜻으로 프로그램 중간에서 변수를 선언하더라도 변수가 프로그램의 첫 머리에 선언된 것처럼 다른 문장 앞에 생성되는 것을 말한다.

let과 const

• let: 변하는 값을 넣어줄 때 사용
• const키워드: let과 다르게 변하지 않는 값 즉 상수를 선언할 때 사용하는 키워드

ES6에 새롭게 추가된 데이터 타입 Symbol

???
심벌은 자기 자신을 제외한 그 어떤 값과도 다른 유일무이한 값을 의미

log.levels = {
    DEBUG: Symbol('debug'),
    INFO: Symbol('info'),
    WARN: Symbol('warn'),
};
log(log.levels.DEBUG, 'debug message');
log(log.levels.INFO, 'info message');

Symbol에 인수를 전달해서 생성된 심벌에 설명을 덧붙일 수 있다.

연산자

• Falsy 한 값: null, undefined, 0, '', NaN 등
• Truthy 한 값: Falsy 한 값 제외한 나머지 값

const arr=[1,2,3,null,undefined,"null"];

const falsyOrTruthy =(arr)=> arr.forEach( value => {
    if (!value) {
      console.log(`Falsy  ${value}`);
      
    }
    else
        console.log(`Truthy ${value}`);
  });
  
falsyOrTruthy(arr);
/*
Truthy 1
Truthy 2
Truthy 3
Falsy  null
Falsy  undefined
Truthy null
*/

== 와 ===

console.log(10 == "10"); // true

console.log(null == undefined); // true

console.log(10 === "10"); // false

console.log(null === undefined); // false

null 병합 연산자

• 최근에 추가된 문법
• 구식 브라우저에서는 작동되지 않으며, 이후에 배우게 되는 폴리필이 필요

a??b의 결과는??
a가 null도 아니고 undefined도 아니면 a
그 외의 경우에는 b

let idList = [annie, jiwon,'',undefined,null,0];

const getId=(list)=>{
    const result = list.map((id)=>{
        id=id??100;
    })
    console.log(result);
};

getId(idList);
  
 //error
 // id = id??100;
  //       ^
  //  unexpected token ?