[JS] 모던 JavaScript 튜토리얼#2 자바스크립트 기본

script

자바스크립트 코드의 양이 많은 경우, 파일로 소분하여 하는것을 추천한다. 절대경로 및 상대경로를 사용하여 지정해줄 수 있다. 그리고 전체 URL을 사용할 수도 있다.

이유로는 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에, 여러 페이지에서 동일한 스크립트를 사용하는 경우, 캐시로 부터 스크립트를 가져와 사용하므로 트래픽 절약 및 웹페이지의 실제 속도가 빨라지기 때문이다.

 

 

코드 구조

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 이때 서로 다른 문은 세미콜론으로 구분하며, 줄바꿈이 있는경우 아래와 같이 세미콜론이 생략 가능하다. (세미콜론 자동 삽입)

alert("안녕")
alert("하세요")

 

그러나 이를 추정하지 못하는 상황도 존재하니 가급적으로는 문 사이에 세미콜론을 필히 서술하도록 하자.

 

엄격 모드

ES5에서는 새로운 기능이 추가되며 기존 기능 중 일부가 변경되었다. 이로 인해 하위 호환성 문제가 생길 수 있는데, 그래서 변경사항의 대부분은 ES5 기본 모드에선 활성화되지 않도록 설계되었다. 이 변경사항이 활성화 되게 하기 위해서는 use strict 지시자가 필요하다. 

"use strict" 지시자가 스크립트 최상단에 위치하면 스크립트 전체가 모던한 방식으로 동작한다. 엄격모드가 동작되면 돌이킬 방법은 없다.

 

브라우저 콘솔을 사용하는 경우, 기본적으로 엄격 모드가 적용되어 있지 않다. 콘솔에서 사용하기 위해서는 'use strict' 입력이후, Shift+Enter키를 눌러 줄을 바꾼 이후 스크립트를 입력하면 된다.

 

매번 use strict를 사용해야 할까?

모던 자바스크립트에서는 클래스와 모듈이 등장했다. 이 둘을 사용하면 use strict가 자동 적용되므로 둘을 사용하고 있다면 스크립트에 붙일 필요가 없다.

 

변수와 상수

변수는 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'이다. 

let msg;	// 변수할당 
msg = 'hi;'	// 변수선언

// 할당 + 선언
let msg = 'hi';

한 줄에 여러 변수를 선언하는 것도 가능하지만, 코드의 가독성을 위해 권장하지 않는다.

 

변수 명명 규칙

• 변수명은 대소문자를 구분하여 카멜케이스로 작성한다.
• 변수명에는 오직 문자와 숫자, $, _만 들어갈 수 있다.
• 첫 글자는 숫자가 될 수 없다.
• 예약어는 사용할 수 없다. ex) let, class, return, ....

비 라틴계 언어도 변수명에 사용할 수 있지만 권장하지 않는 사항이다. 

 

변하지 않는 변수를 선언할 때에는 let 키워드 대신 const 키워드를 사용한다. 역시나 카멜케이스로 작성한다.

 

대문자 상수

대문자 상수는 하드 코딩한 값의 별칭을 만들 때만 사용한다.

const COLOR_RED = "F00";
const COLOR_GREEN = "0F0";

const pageLoadTime;	
// 페이지를 로드하는데 걸린 시간
// 로드하기 전 정해지지 않으므로 카멜케이스로 변수 명명

const birthday = '2001.06.20';	// x
const BIRTHDAY = '2001.06.20';	// o
// 생일은 변하는 값이 아님.

const age = someCode(BIRTHDAY); // o
const AGE = someCode(BIRTHDAY);	// x
// 나이는 매년 달라짐.

 

바람직한 변수명

• userName이나 shoppingCart 처럼 사람이 읽을 수 있도록 작성
• 줄임말 및 a, b, c와 같은 짧은 이름 피하기
• 최대한 서술적이고 간결하게 명명. data와 value는 나쁜 이름이다.

만약 사이트 방문객을 팀내에서 user라고 부르기로 했다면 newVistier가 아닌 newUser 등 팀 내 규칙을 따르도록 한다.

 

재사용과 새로만들기

모던 자바스크립트 압축기(minifier)와 브라우저는 코드 최적화를 잘해준다. 변수를 추가한다고 해서 성능이슈가 생기지 않으므로 재사용이아닌 새로만드는 것을 지향하자.

 

자료형

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자였다가, 숫자가 될 수 있는것이다. 이처럼 자료의 타입은 존재하나 저장되는 값의 타입을 언제든지 바꿀 수 있는 언어를 동적 타입(dynamically typed) 언어라고 한다.

 

숫자형

숫자형은 정수 및 부동소수점 숫자를 나타낸다. 숫자형에는 일반적인 숫자외에 Infinity, -Infinity, NaN과 같은 특수 숫자 값이 포함된다. 

• 어느 숫자던 0으로 나누면 Infinity를 얻을 수 있다.
• NaN은 계산중에 에러가 났을 경우 주는 값이다. NaN에 어느 연산을 해도 NaN이 반환된다.

 

BigInt

암호 관련 작업같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업해야 할 때 큰 숫자가 필요하다. BigInt형은 길이에 상관없이 정수 리터럴 끝에 n을 붙여 정수를 나타낼 수 있다. 

const bigInt = 12312312342345234523452345234623423465236n;

 

문자형

자바스크립트에서는 문자형을 따옴표로 묶는다. 방법에는 아래의 3가지가 존재한다.

let str = "Hello";
let str2 = 'hello';
let str3 = `can embed another ${str}`;

 이 중 백틱을 사용하면 원하는 변수나 표현식을 문자열 중간에 넣어줄 수 있다.

alert(`result is ${1 + 2}`);

 

불린형

불린형(논리 타입)은 true와 false가 존재한다. 긍정이나 부정을 나타내는 값을 저장할 때 사용한다.

let nameFieldCheck = true;
let ageFieldCheck = false;

// 비교 결과를 저장 할 때에도 사용된다.
let isGreater = 4 > 1;

 

null

null은 위의 자료형 중 어느 자료형에도 속하지 않는다. 자바스크립트의 null은 존재하지 않는 값, 비어 있는 값, 알 수 없는 값을 나타내는 데 사용한다.

 

undefined

undefined은 값이 할당되지 않은 상태를 나타낸다. 변수를 선언만하고 값을 할당하지 않았다면 undefined가 자동으로 할당 된다. undefined는 직접 할당하는 것을 권장하지 않으며, 변수가 비어있거나 알 수 없다는 상태를 나타내려면 null을 사용하도록 한다.

 

typeof 연산자

typeof 연산자는 인수의 자료형을 문자열로 반환한다. 아래의 두 가지 형태로 문법을 지원한다.

• typeof x
• typeof(x)

typeof 0;	// "number"
typeof 10n;	// "bigint"
typeof true	// "boolean"
typeof "foo"	// "string"
typeof Symbol("id")	// "symbol"
typeof Math	// "object"
typeof null	// "object"	-> 하위 호환성을 위해 오류수정을 안함
typeof alert // "function"

 

https://ko.javascript.info/