#1 - JavaScript 복습하기 (자료형 ~ 연산자)

11039 단어 JavaScriptnode.jsJavaScript

서론

군 입대 전이랑 군 복무 중에 자바스크립트를 한창 공부했었는데, 또 한동안 공부를 너무 안하다보니 다 까먹게 되어서 전역 후에 한 번 리마인드 시킬 겸 자바스크립트를 빠르게 복습하고자 한다.

자료형

문자형

const name = "justin"; // 문자형
const age = "23";

const name1 = "justin";
const name2 = 'justin';
const name3 = `justin`;

const sentence1 = "I'm a university student.";
const sentence2 = 'I\'m a university student.';

const sentence3 = `I'm ${name}.`;

문자형을 선언할 때 총 세 가지 방법이 있다.
1. 쌍따옴표("")
2. 따옴표('')
3. 백틱(``)

평상시에 문자형 선언 시에는 일반적으로 쌍따옴표를 써주는 게 좋다.
따옴표(' ')는 위의 sentence2처럼 내부에 따옴표를 써야 할 상황에서 앞에 역슬래시(\)를 적어줘야 하는 불편함이 있다.
반면에 백틱(`)은 스트링 내부에 변수를 넣어줘야 하는 경우에 사용하면 유용하다. 내부에 ${}표기를 통해 쉽게 변수를 삽입할 수 있다. <br>숫자형`

const num = 1 / 0;
// Infinity

const name = "justin";
const div = name / 2;
// NaN (= Not a Number)

1을 0으로 나누면 무한대 값이 나옴.
숫자와 관련된 작업을 할 때 NaN이 나오는지 아닌지 항상 염두에 둘 것.

typeof 연산자

const name = "justin";

console.log(typeof 4);
// "number"
console.log(typeof "justin");
// "string"
console.log(typeof true);
// "boolean"
console.log(typeof name);
// "string"
console.log(typeof null);
// "object"
console.log(typeof undefined);
// "undefined"

주의해야 할 점은 null은 object(객체)가 아니라는 점!
자바스크립트의 초기 오류라네용 :\

대화상자

alert("안녕하세요");
prompt("이름을 입력해라");
confirm("정말 수정하시곘습니까?");

단점

  • 스크립트 일시 정지 (무조건 응답하고 넘어가야 함)
  • 스타일링이 불가능함 (브라우저마다 디자인이 다 다름)

형변환

명시적 형변환

String() // 문자형으로 변환
Number() // 숫자형으로 변환
    Number("문자") // NaN
Boolean() // 불린형으로 변환
    Boolean(0, "", null, undefined, NaN) // false

자동 형변환으로 인해서 파악하기 어려운 오류들이 자주 발생할 수 있기 때문에 명시적 형변환을 통해서 예방해야 한다.
주의사항 (그냥 외워)

Number(null) // 0
Number(undefined) // NaN

Boolean(0) // false
Boolean('0') // true
Boolean('') // false
Boolean(' ') // true

연산자

비교 연산자

const alpha = "1";
const beta = 1;

console.log(alpha == beta) // true (동등 연산자)
console.log(alpha === beta) // false (일치 연산자)

동등 연산자(==)는 type을 신경쓰지 않고 값만을 비교하지만,
일치 연산자(===)는 type과 값을 모두 비교해서 불린값을 출력한다.


논리 연산자

  • OR(||)은 첫번째 true를 발견하는 즉시 평가를 멈춘다.
  • AND(&&)는 첫번째 false를 발견하는 즉시 평가를 멈춘다.
    => 이를 신경써서 작업하면 성능 최적화에 크게 도움을 줄 수 있다.
  • AND(&&)와 OR(||)이 같이 있으면 AND(&&) 먼저 처리됨.

다음 포스팅

다음 포스팅은 javascript 함수, 객체, 배열에 대해 복습해보는 시간을 가지게 될 것 같습니다.

참고한 영상: https://youtu.be/KF6t61yuPCY
코딩앙마 님의 자바스크립트 기초 강좌 : 100분 완성