[리뉴얼] 렛츠기릿 자바스크립트 #2

논리연산자

!연산자: 식 앞에 !를 붙이면 반대 논리값으로 변한다
이 성질을 이용해 다른 자료형을 불 값으로 형 변환할 수도 있습니다. ! 연산자를 연이어 두 번 쓰면 됩니다.
> !!'a';
< true

 

 

 

 

 

 

 

 

불 값으로 형 변환했을 때 false가 되는 값

나머지는 모두 형 변환했을 때 true가 됩니다.

> !!false
< false


> !!''
< false


> !!0
< false


> !!NaN
< false

false, '', 0, NaN, undefined,  null, document.all

이렇게 형 변환 후 false가 되는 값들을 거짓인 값(falsy value)이라고 하고, true가 되는 값들은 참인 값(truthy value)이라고 합니다.

 

 

 

 

 

 

 

 

 

 

 

 

논리 연산자 우선순위

> !(2 < 0);
< true
> !2 < 0;
< false

 

 

※ 연산자 우선순위 | MDN 

연산자 우선순위 - JavaScript | MDN

 

 

 

 

 

 

 

 

 

 

undefined 알아보기
console.log로 출력하면 항상 부수적으로 undefined가 식의 결괏값으로 반환 (돌려줄 값이 없다)

> console.log('Hello, undefined!');
  Hello, undefined!
< undefined

 

 

 

 

 

undefined는 불 값으로 형 변환하면 false가 나옵니다.

> !!undefined;
< false

 

 

 

 

 

단, undefined와 false는 같지 않습니다. 거짓인 다른 값들과도 마찬가지입니다.

> undefined == false;
< false
> undefined == 0;
< false
> undefined == '';
< false

 

 

 

 

 

 

 

 

 

null 알아보기
다른 자료형으로는 null이 있습니다. 빈 값을 의미하지만 undefined와 같지는 않습니다.

> undefined == null;
< true

 

 

 

 

 

 

빈 값이라는 점에서 같지만 자료형을 비교해 보면 다릅니다.

> undefined === null;
< false

 

 

 

 

 

undefined와 마찬가지로 null도 불 값으로 형 변환하면 false가 됩니다.

> !!null;
< false

 

 

 

하지만 null은 false와 같지 않습니다. 다른 거짓인 값들과도 같지 않습니다.

> null == false;
< false
> null == 0;
< false
> null == '';
< false

 

 

 

 

 

 

 

 

 

 

null의 특이점

> typeof null;
< "object"

결괏값이 "null"이 아니라 "object"입니다. 이 현상은 자바스크립트에서 유명한 버그입니다. 원래는 "null"이 나와야 하지만, 언어가 만들어진 초창기 실수 때문에 "object"가 됐습니다. 그 이후로는 바꿀 수 없게 됐습니다(바꾸고 나면 기존에 typeof null 식을 사용하는 모든 곳에 영향이 있기 때문입니다). 따라서 값이 null인지 확인하기 위해서는 === null을 사용해야 합니다.

 

 

 

 

 

 

 

 

 

null과 undefined
null과 undefined는 둘 다 빈 값이라서 어떨 때 사용하는지 헷갈릴 수 있습니다. undefined는 기본값이라는 의미라도 있지만, null은 아무런 역할이 없습니다. 많은 개발자가 null을 대입해 값을 의도적으로 지웠다는 의미를 부여합니다.

 

 

변수

변수는 프로그램을 만들 때 잠시 특정한 값을 저장해야 하는 상황이 자주 발생합니다. 이때 사용하는 변수입니다.

 

let string = 2345;
console.log(string)

console.log는 console을 그림판처럼 쓰는것, 잠시 단순히 글자만 적고 화면에 그려주는 것
string 값을 물어보면 그 값 자체를 돌려주는것

 

 

 

 

 

 

 

let str = 33;

선언과 동시에 값을 넣어주면 초기화했다 라고 한다.
오른 쪽값을 인쪽에 넣어준다. 대입한다.

 

 

 

 

 

 

 

 

 

 

변수명은 최대한 자세하고 무슨 값인지 알 수 있도록 적어야 한다.
$나 _(언더스코어) 변수명으로 쓸 수 있다 특수문자

 

 

 

 

 

 

 

 

 

 

변수명으로 사용할 수 없는 단어도 있습니다. 이를 예약어(reserved word)라고 하는데, 예약어는 자바스크립트 프로그래밍에서 특정한 역할을 하므로 변수명으로 쓰지 않습니다.

> var undefined = 'defined';
< undefined
> var Infinity = 0;
< undefined
> var let = 'const';
< undefined

 

 

 

 

 

 

 

 

let은 예약어가 아니다.
let var = 3; let let = 3; 의 에러메시지가 다르다.

 

> let let = 'No!';
  Uncaught SyntaxError: let is disallowed as a lexically bound name
> let var = 'No!';
  Uncaught SyntaxError: Unexpected token 'var'

 

Uncaught SyntaxError: Unexpected token 'var'
Uncaught SyntaxError: let is disallowed as a lexically bound name

 

 

 

 

 

 

 

 

 

 

 

 

참고 | 스택오버플로우
1. https://stackoverflow.com/questions/46895683/syntax-error-let-is-disallowed-as-a-lexically-bound-name
2. https://stackoverflow.com/questions/50789375/var-let-is-ok-but-let-let-isnt?newreg=e852110158464fb0a50e435cc00686d9

var let is ok but let let isn't?

 

Syntax Error: let is disallowed as a lexically bound name

 

 

 

 

 

 

 

 

 

 

변수와 상수

변수(變數)는 변하는 수입니다. 반대로 상수(常數)는 변하지 않는 수라는 뜻입니다.
상수랑 변수는 반대 개념 아닌가요?

 

 

 

 

 

 

• 상수와 변수의 뜻을 살펴보면 완전히 반대 개념임을 알 수 있습니다.
• 그런데 왜 let과 var, const를 묶어 변수라고 통칭했을까요?
• const는 엄밀히 말해 상수가 아니기 때문입니다.
• const는 나중에 배우는 객체의 내부 값에는 적용되지 않습니다. 따라서 엄밀한 의미에서 상수가 아니므로 자바스크립트 커뮤니티에서는 보통 const도 변수라고 부릅니다. 

 

 

 

 

 

상수를 왜 사용할까요? 

• 코딩을 하다 보면 변수의 값을 수정할 일이 생각보다 그리 많지 않고 실수로 값을 수정하는 일을 막기 위해 상수를 사용합니다.
• const로 선언한 상수도 다시 선언할 수 없습니다. 앞에서 선언한 value 상수를 다시 선언해 보겠습니다.
• 한번 값을 대입하면 다른 값을 대입할 수 없다는 특성 때문에 상수 선언 시 초기화(선언과 동시에 값을 대입하는 것)하지 않으면 에러가 발생합니다.
• 이러한 특징 때문에 실수로 변수를 다시 선언하는 문제가 발생할 수 있습니다. 또한, 다음과 같이 예약어나 다름없는 이름을 변수명으로 사용할 수 있습니다.
  
  
  
  
  
  
  
  
  
  
  
  
  

 

 

 

 

조건문

조건문은 주어진 조건에 따라 코드를 실행하거나 실행하지 않는 문입니다.

> if (false)
  console.log('Hello, if!');
  console.log('Bye, if');

  Bye, if

 

조건식이 false이므로 실행문이 실행되지 않습니다. 하지만 console.log('Bye, if')는 조건문의 실행문이 아니라 일반 문이라서 실행됩니다. 중괄호가 없으면 바로 다음 문만 조건문에 포함되기 때문입니다. 

 

 

 

 

 

 

 

 

 

조건문에는 if 문 외에도 switch 문이 있습니다. 

• if 문과 switch 문은 조건이 충족되면 실행된다는 공통점도 있지만 차이점도 있습니다.
• 콘솔에 B가 출력될 것이라고 예상했겠지만, 실제로는 B와 C 모두 출력됩니다. 
• switch 문은 일치하는 case를 발견하면 일치 여부와 상관없이 그 아래 case들의 실행문을 모두 실행합니다. 
• 따라서 원하는 결과만 얻으려면 수동으로 case에서 빠져나와야 합니다. 이때 break 문이 사용됩니다.
• 어떠한 case도 일치하지 않을 때 실행하는 case도 만들 수 있습니다. 단, 이때는 case 대신 default라는 특수한 예약어를 사용합니다.

 

 

 

 

 

let value = 'B';
  switch (value) {
    case 'A':
      console.log('A');
      break;
    case 'B':
      console.log('B');
      break;
    case 'C':
      console.log('C');
      break;
    default:
      console.log('아무것도 일치하지 않음');
  }

  B​

각 case에 break 문을 추가했더니 정확히 일치하는 case만 실행됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

조건부 연산자 
if 문과 switch 문 외에도 분기 처리에 사용하는 식이 있습니다. 

이는 조건부 연산자 또는 삼항 연산자라고 하는 연산자로 표현합니다.

 

 

 

조건식 ? 참일 때 실행되는 식 : 거짓일 때 실행되는 식

> let value = 5 < 0 ? '참입니다' : '거짓입니다';
< undefined
> value;
< "거짓입니다"

 

 

 

 

 

 

반복문

컴퓨터는 반복적인 작업을 하는 데 매우 효율적입니다. 

사람과는 다르게 지치지 않고 매우 빠르기 때문이죠. 

따라서 모든 프로그래밍 언어는 반복을 처리하는 반복문을 가지고 있습니다. 

 

 

 

시작
while (조건) 
  실행문;
  종료식
  
for (시작; 조건식; 종료식)
  실행문;

 

가끔 반복문이 특정 조건에서만 실행되기를 원할 수도 있습니다.
이럴 때는 continue 문을 사용합니다.
continue 문을 넣으면 이후 코드는 건너뛰게 됩니다.