모던 JS Tutorial - JS 기본

최유연·2022년 3월 15일
JavaScript모던JS튜토리얼
0

모던_JS_Tutorial

목록 보기
2/2

1. 외부 스크립트의 연결

  • HTML 안에 직접 스크립트를 작성하는 방식은 스크립트가 아~주 간단할 때만 사용한다.
    -> 스크립트가 긴 경우엔 보통 별개의 분리된 파일로 만들어서 저장한다.

  • src로 외부 코드를 연결하거나, script 태그에 직접 코드를 작성해야한다. 전자가 이미 있으면 후자는 무시된다. 따라서 둘중에 하나만 하거나, 분리해서 작성해야 한다.

  • 스크립트를 별도의 파일에 작성하면 브라우저가 스크립트를 다운받아 캐시(cashe)에 저장하기 때문에, 성능상의 이점이 있다.
    -> 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 따라서 스크립트 파일을 1번만 다운받으면 된다. 이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다.

2. 코드 구조

세미콜론

줄바꿈이 있다면 세미콜론 생략 가능 -> 세미콜론 자동 삽입

alert('hello')
alert('world')

아래 예시는 세미콜론 자동삽입 불가

alert(3 +
1
+ 2);

반면, 세미콜론이 정말 필요하지만 js가 이를 추정하지 '못하는' 상황도 존재
따라서, 세미콜론을 꼭 사용하는게 안전하다.

주석

//한줄 주석

/*두 
줄
이 상 주석*/

//중첩 주석은 불가능 주의!! (/**/안에 /**/)

주석을 달면 코드의 전체적인 길이가 증가한다. 하지만 이는 전혀 문제가 되지 않는다. 프로덕션 서버에 배포하기 전에 코드를 압축해주는 도구가 많이 있고, 이 도구들은 주석을 삭제해주기 때문이다. 실행 중인 스크립트엔 주석이 들어가지 않으므로, 주석은 최종으로 배포되는 코드에 부정적인 영향을 끼치지 않는다.

3. 엄격 모드

use strict

"use strict"; 
// 이 코드는 모던한 방식으로 실행됨. 무조건 코드 최상단에 위치해야함. use strict 위엔 무조건 주석만 사용 가능

//엄격모드는 한번 쓰면 무를 수 없음

브라우저 콘솔

'use strict'입력 후 Shift+Enter키 눌러서 원하는 스크립트 작성

결론

클래스, 모듈을 사용할 땐 use strict가 자동 적용됨.

4. 변수와 상수

변수

let message;
message = 'Hello';
alert(message);

message = 'World!';

let user = 'John', age = 25, message = 'Hello'; //비추! 가독성 저하

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

let과 var는 거의 동일하게 동작. 하지만 var는 오래된 방식!

함수형(functional) 프로그래밍 언어는 변숫값 변경을 금지한다. 스칼라(Scala)와 얼랭(Erlang)은 대표적인 함수형 언어입니다.

변수 명명 규칙

  1. 변수명 : 문자, 숫자, '$', '_'
  2. 첫 글자는 숫자 불가능
  3. 대소문자 구별
  4. 예약어는 사용불가
  5. "use strict" 모드에선 변수 선언 없이 사용 불가
    6. 간결하고 명확하게 짓기
  6. 변수를 재사용하지 않고 추가하는 것은 좋은 습관
let userName;
let $;
let _ = 2;
let test123;
//let 1a; let my-name; 불가능

상수

변화하지 않는 변수를 선언할 땐 let 대신 const 사용

const myBirth = '20000909';

대문자 상수

기억하기 힘든 값을 변수에 할당해 별칭으로 사용. 보통 하드 코딩한 값의 별칭을 만들 때 사용.(실행 전에 이미 값을 알고 있고, 코드에서 직접 그 값을 쓰는 경우)

const COLOR_RED = "#F00";
let color = COLOR_RED;
const BIRTHDAY = '18.04.1982'; // 대문자 상수로 바꿔도 괜찮

const AGE = someCode(BIRTHDAY); // 대문자 상수 부적절. someCode()리턴값에 따라 달라짐.

5. 자료형

// no error
let message = "hello";
message = 123456;

이처럼 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 ‘동적 타입(dynamically typed)’ 언어라고 부른다.

숫자형

  1. 정수 및 부동소수점 숫자, 특수한 숫자값(Infinity(1/0), -Infinity, NaN(계산 중 에러 발생, NaN에는 어떤 추가연산을 해도 결국 Nan 따라서 연산 과정 어디선가 NaN이 발생하면 모든 결과에 영향을 미침.))

BigInt

FireFox, Chrome, Edge, Safari에서만 지원.

// 끝에 'n'이 붙으면 BigInt형
const bigInt = 1234567890123456789012345678901234567890n;

문자형

  1. "Hello", 'Hello'
  2. 백틱 사용 : 
// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result is 3
  1. 글자가 한개만 들어간다면 다른 언어의 char와 유사

불린형

let isGreater = 4 > 1;
alert( isGreater ); // true (비교 결과: "yes")

null값

  1. 존재하지 않는 값
  2. 비어 있는 값
  3. 알 수 없는 값

undefined

  1. 값이 할당되지 않은 상태
let age;
let myname = undefined; //null 권장
alert(age); // 'undefined'가 출력됩니다.

객체와 심볼

객체형을 제외한 다른 자료형은 한 가지만 표현 가능해서 원시(primitive)자료형이라고 불림.
하지만 객체는 복찹한 개체(entity)를 표현 가능.

심볼은 객체의 고유한 식별자를 만들 때 사용됨.

typeof 연산자

type of 0
typeof(true)

6. alert, prompt, confirm을 이용한 상호작용

alert

alert("Hello");

prompt

result = prompt(title, [default]);

사용자가 입력 필드에 기재한 문자열 반환 typeof(title) ==> string

IE 사용자를 비롯한 모든 사용자에게 깔끔한 프롬프트를 보여주려면 아래와 같이 두 번째 매개변수를 항상 전달해 줄 것을 권장한다.

let test = prompt("Test", ''); // <-- IE 사용자를 위한 매개변수 처리

confirm 대화 상자

result = confirm(question);

위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단된다. 사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능하다.

7. 형 변환

문자형으로 변환

  1. alert() 함수는 매개변수로 문자형을 받아야하기 때문에, 문자형 이외의 값이 들어오면 String으로 형변환 됨.

  2. String(value)

숫자형으로 변환

  1. Number()
  2. 숫자형이 아닌 값에 연산 (?)
let age = Number("임의의 문자열 123");

alert(age); // NaN, 형 변환이 실패합니다.
Number(undefined) //NaN
Number(null) // 0
Number(true) // 1
Number(string) //문자열의 처음과 끝 공백이 제거됩니다. 공백 제거 후 남아있는 문자열이 없다면 0, 그렇지 않다면 문자열에서 숫자를 읽습니다. 변환에 실패하면 NaN이 됩니다.
Number("") //0

불린형으로 변환

  1. false : 숫자 0, 빈 문자열, null, undefined, NaN
  2. true : 직관적으로 비어있다고 느껴지지 않는 1번 이외의 값들
Boolean("0") //true
Boolean(" ") //true
Boolean("") //false

8. 기본 연산자와 수학

이항 연산자 '+'와 문자열 연결

  1. 이항 연산자 +의 피연산자로 문자열이 전달되면 결과는 문자열이다.
  2. 따라서 피연산자 중 하나만 문자열이여도 결과는 문자열.
alert('1'+2); //"12"
alert(2+2+'1'); //"41"
alert(6-'2'); //4
alert('6'/'2'); //3

단항 연산자 '+'와 숫자형으로의 변화

  1. 피연산자가 숫자가 아닌 경우 숫자형으로의 변환이 일어난다.
    -> Number()와 같은 역할
alert(+true); //1
alert(+""); //0

할당 연산자 체이닝

let a, b, c;

a = b = c = 2 + 2;

alert( a ); // 4
alert( b ); // 4
alert( c ); // 4

복합 할당 연산자

let n = 2;

n *= 3 + 5;

alert( n ); // 16  (*=의 우측이 먼저 평가되므로, 위 식은 n *= 8과 동일합니다.)

증가 감소 연산자

let counter = 0;
counter++;
++counter;
alert( counter ); // 2, 위 두 라인은 동일한 연산을 수행합니다.

쉼표 연산자

쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 한다.

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

9. 비교 연산자

문자열 비교

JS는 사전순으로 문자열을 비교.

다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 js는 이 값들을 숫자형으로 바꿈.

lert( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
alert( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

일치 연산자, null이나 undefined와 비교하기

https://ko.javascript.info/comparison

  • 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의하시기 바랍니다.
  • 또한, undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.

10. if와 '?'을 사용한 조건 처리

profile
최유연
프론트엔드 도메인 지식을 지닌 백엔드 개발자로 성장하기 위한 기록
이전 포스트

모던 JS 튜토리얼 - 소개

0개의 댓글