JavaScript 기초(변수, 자료형, 논리연산자, 대화상자)

Sujeong K·2022년 6월 21일

JavaScript_basic

목록 보기

1/17

✍내가 공부하려고 정리해보는 JS 초초초기초~~(코딩앙마, 노마드코더 지분多)~~

변수(variable)

변수 이름에는 문자와 숫자, $와 _만 사용

첫 글자는 숫자가 될 수 없음

예약어는 쓸 수 없음(이미 js에서 사용하고 있는 단어)
e.g. let, class...

가급적 상수는 대문자로
e.g. const MAX_SIZE = 99

변수명은 읽기 쉽고 이해할 수 있게

Block scope : { } 안에 작성한 변수(지역 변수)는 { } 밖에서는 접근할 수 없음
Global scope : { } 밖에 작성한 변수(전역 변수)로 어디서나 접근 가능

*Global한 변수들은 어플리케이션이 실행되는 순간부터 끝날 때까지 항상 메모리에 탑재되어 있기 때문에 최소한으로 쓰는 것이 좋음

자료형(type)

📌자바스크립트는 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 ‘동적 타입(dynamically typed)’ 언어다.

Primitive type(원시적 타입) : 한 가지만 표현할 수 있는 자료형

숫자형(number)

Integar(정수), Float(소수)
특수 숫자값: NaN(Not A Number), Infinity, -Infinity

문자열(string)

only text characters
const hi = "text" // hi의 자료형은 string

Boolean

true, false

undefined, null

undefined: variable exists, value doesn't

null: value is nothing
*null은 자동으로 발생하지 않음. 값이 없다는걸 확실히 하기 위해 선언.
let something;
console.log(something); // undefined 출력

Symbol

고유한 식별자가 필요할 때, 동시에 다발적으로 일어날 수 있는 코드에서 우선순위를 주고 싶을 때 사용

string을 식별자로 쓰면 다른 파일에서 동일한 string을 발견했을 때 동일한 변수로 취급함.

Symbol은 주어진 string에 상관없이 고유한 식별자로 취급함.
const symbol1 = Symbol('id');
const symbol2 = Symbol('id');
console.log(symbol1 === symbol2); // false
Symbol.for(): 똑같은 string을 가진 symbol은 같은 변수로 취급하고 싶을 때
const gsymbol1 = Symbol.for('id');
const gsymbol2 = Symbol.for('id');
console.log(gsymbol1 === gsymbol2); // true
Symbol을 출력할 때는 항상 .description 이용해서 string으로 변환해주기
const symbol1 = Symbol("id");
console.log(`${symbol1}`); // error
console.log(`${symbol1.description}`); // 'id' 출력

Non-primitive type
Object(객체형), Array, Function

var, const, let

var : 변수 선언 방법. 재선언 가능, 재할당 가능
let : 변수 선언 방법. 재선언 금지, 재할당 가능 mutable data type
const : 상수. 재선언 금지, 재할당 금지 immutable data type

📌 const를 기본으로 쓰고 필요할 때 let 쓰기
* var은 예전부터 쓰던 문법

Logical Operators : OR, AND, NOT

OR(||)

피연산자 중 하나라도 true이면 true 반환

function check() {
    for (let i = 0; i < 10; i++) {
    console.log('wasting time');
    }
    return true;
    }
    const val1 = 4<2;
    const val2 = false;
    console.log(`or: ${val1 || val2 || check()}`); 
// wasting time 10번 출력
// true 출력

val1 검토 - val2 검토 - check() 실행 - true 반환

OR 연산자는 검사하는 값 중 첫 번째 true 값을 찾으면 바로 멈추고 true를 출력

📌추가 기능: OR 연산자와 피연산자가 여러 개인 경우

result = value1 || value2 || value3;
각 피연산자를 불린형으로 변환 -> 변환 후 그 값이 true이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환

피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우)엔 마지막 피연산자를 반환

AND(&&)

function check() {
    for (let i = 0; i < 10; i++) {
    console.log('wasting time');
    }
    return true;
    }
    const val1 = 4<2;
    const val2 = false;
    console.log(`or: ${val1 && val2 && check()}`); // false

AND 연산자는 모든 피연산자가 true일 경우 true 반환
검사하는 값 중 첫 번째 false 값을 찾으면 바로 멈추고 false 반환

📌 OR이나 AND 연산자에서는 expression이나 연산이 많이 필요한 함수는 제일 마지막에 배치하는 것이 효율적

AND 연산자로 간단하게 falsy 체크
nullableObject && nullObject.sth
=> nullableObject가 falsy가 아닐 때만 객체에서 sth이라는 키 값의 value를 가져오기

대화상자

alert(); : 알림창
alert();

prompt(); : 사용자로부터 값을 입력받을 때
prompt("a", "b"); 
a는 설명, b는 기본 입력값

confirm(); : 사용자로부터 확인받을 때
confirm("a"); 
확인누르면 true 반환, 취소누르면 false 반환
=> 이 값들로 이후 작업

대화상자는 값을 입력받을 때까지 JS 실행을 멈춤

형변환(Type Conversion)

let mathScore = prompt("Math?");
prompt(); 로 입력받은 값은 항상 문자형!

📌 *, -, / 등의 연산자를 넣으면 결과를 자동으로 숫자형으로 바꿔줌(자동 형변환)

📌 but, 예상치 못한 오류가 생길 수 있으니 의도를 생각하고 "명시적 형변환"을 해줘야함!

명시적 형변환

String() : 문자형으로 변환

Number() : 숫자형으로 변환
*문자를 Number()로 바꾸면 NaN 출력
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
Boolean()
0, 빈 문자열, null, undefined, NaN => false 반환
*그 외 나머지는 모두 true 반환
위의 값들을 거짓 같은 값들이라고 해서 Falsy라고 부르기도 하며 조건식에서 !Falsy와 같이 유효한 값이 아님을 판별할 때 이용할 수 있음

parseInt() : string을 number로 바꿔주는 function
number로 바꿔주면 다른 number와 비교가 가능
유저가 number가 아닌 다른 type을 입력했을 때 인지 가능
const age = parseInt(prompt("How old are you?"));
=> prompt()에서 값을 받으면 parseInt가 number로 변환해줌(number가 아닌 경우 NaN 출력)
*funtion은 내부에서 외부로 실행됨(안에 있는 function 먼저!)