자바스크립트 기초

Hello, world!

웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용한다.

type 과 language 속성은 필수가 아니다.

외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입한다.

코드 구조

세미콜론은 생략할 수 있다. 하지만 세미콜론을 사용하는 것이 더 안전하므로 이를 기억하고 따르도록 한다.

주석 달기를 두려워하지 말라.

엄격 모드

자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었다.

하위 호환성 문제 때문에 변경사항 대부분은 ES5의 기본모드에선 활성화되지 않도록 설계되었다.

‘use strict’ 가 스크립트 최상단에 오면 스크립트 전체가 모던한 방식으로 동작한다.

코드를 클래스와 모듈을 사용해 구성한다면 "use strict"를 생략해도 된다.

변수와 상수

변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.

첫 글자는 숫자가 될 수 없다.

변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 한다.

변수값이 절대 변경되지 않을 것이라 확신하면 const를 사용해 변수를 선언하도록 한다.

자료형

숫자형

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함된다.

내부 표현 방식 때문에 자바스크립트에서는 (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수는 '숫자형’을 사용해 나타낼 수 없다.

BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

const bigInt = 1234567890123456789012345678901234567890n;

문자형

큰따옴표와 작은따옴표는 ‘기본적인’ 따옴표로, 자바스크립트에서는 이 둘에 차이를 두지 않는다.

역 따옴표로 변수나 표현식을 감싼 후 ${…}안에 넣어주면, 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있다.

불린형

불린형은 긍정(yes)이나 부정(no)을 나타내는 값을 저장할 때 사용한다. true는 긍정, false는 부정을 의미한다.

객체형

복잡한 데이터 구조를 표현할 때 사용한다.

심볼형

객체의 고유 식별자를 만들 때 사용한다.

Null

‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용한다.

Undefined

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용한다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

undefined를 직접 할당하는 걸 권장하진 않는다. 변수가 ‘비어있거나’ ‘알 수 없는’ 상태라는 걸 나타내려면 null을 사용하라.

typeof 연산자

자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.

typeof null의 결과는 ‘object’이다.

null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 상황이다.

언어 자체의 오류이므로 null이 객체가 아님에 유의해야 한다.

typeof는 피연산자가 함수면 'function'을 반환한다. '함수형'은 따로 없지만 오래전에 만들어진 규칙이었기 때문에 하위 호완성 유지를 위해 남겨진 상태다.

실무에선 이런 특징이 매우 유용하게 사용되기도 한다.

형 변환

문자형으로 변환 : String(value)

숫자형으로 변환 : Number(value)

불린형으로 변환 : Boolean(value)

기본 연산자와 수학

값을 반환하는 할당 연산자

let a = 1;
let b = 2;
let c = 3 - (a = b + 1);

alert( a ); // 3
alert( c ); // 0

위 예제에서 표현식 (a = b + 1)은 a에 값을 할당하고, 그 값인 3을 반환한다. 그리고 반환 값은 이어지는 표현식에 사용된다.

다만, 직접 코드를 작성할 땐 이런 방식을 사용하지 말자. 이런 트릭을 사용하면 코드가 명확하지 않을 뿐만 아니라 가독성도 떨어진다.

할당 연산자 체이닝

let a, b, c;
a = b = c = 2 + 2;

이렇게 할당 연산자를 여러 개 연결한 경우, 평가는 우측부터 진행된다. 먼저 가장 우측의 2 + 2가 평가되고, 그 결과가 좌측의 c, b, a에 순차적으로 할당된다.

하지만 가독성이 떨어지므로 줄을 나눠 코드를 작성하길 권장한다.

비트 연산자

비트 연산자는 저수준(2진 표현)에서 숫자를 다뤄야 할 때 쓰이므로 흔하게 쓰이진 않는다.

쉼표 연산자

쉼표 연산자(comma operator) ,는 좀처럼 보기 힘들고, 특이한 연산자 중 하나이다. 코드를 짧게 쓰려는 의도로 가끔 사용된다.

쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다.

이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 한다.

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

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

function fn() {
  if (x) {
    foo();
    return bar();
  }
  else {
    return 1;
  }
}

function fn() {

  return x ? (foo(), bar()) : 1;

}

비교 연산자

비교 연산자는 불린값을 반환한다.

문자열은 문자 단위로 비교되는데, 이때 비교 기준은 '사전’순이다.

서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행된다(일치 연산자는 제외).

조건부 연산자 if와 ?

if문을 쓸 때는 조건이 참일 경우 실행되는 구문이 단 한 줄이더라도 중괄호 {}를 사용해 코드를 블록으로 감싸는 것을 추천한다. 이렇게 하면 코드 가독성이 증가한다.

물음표 연산자?는 조건에 따라 반환 값을 달리하려는 목적으로 만들어졌다. 이런 목적에 부합하는 곳에 물음표를 사용한다. 여러 분기를 만들어 처리할 때는 if를 사용한다.

논리 연산자

|| (OR)

result = a || b;

&& (AND)

result = a && b;

 

&&의 우선순위가 ||보다 높다.

AND 연산자 &&의 우선순위는 OR 연산자 ||보다 높다.

따라서 a && b || c && d는 (a && b) || (c && d)와 동일하게 동작한다.

피연산자 모두가 평가되는 경우(모든 피연산자가 true로 평가되는 경우)엔 마지막 피연산자가 반환된다.

 

if를 ||나 &&로 대체하지 마라.

&&를 사용한 코드가 더 짧긴 하지만 if문을 사용한 예시가 코드에서 무엇을 구현하고자 하는지 더 명백히 드러내고, 가독성도 좋다.

그러니 if 조건문이 필요하면 if를 사용하고 AND 연산자는 연산자 목적에 맞게 사용하자.

! (NOT)

result = !value;

NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행된다.

null 병합 연산자

null 병합 연산자 ??를 사용하면 피연산자 중 ‘값이 할당된’ 변수를 빠르게 찾을 수 있다.

??는 변수에 기본값을 할당하는 용도로 사용할 수 있다.

괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어있다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

 

height ?? 100은 height가 정확히 null이나 undefined일때만 height에 100을 할당한다.

while과 for 반복문

while – 각 반복이 시작하기 전에 조건을 확인한다.

do..while – 각 반복이 끝난 후에 조건을 확인한다.

for (;;) – 각 반복이 시작하기 전에 조건을 확인한다. 추가 세팅을 할 수 있다.

‘무한’ 반복문은 보통 while(true)를 써서 만든다. 무한 반복문은 여타 반복문과 마찬가지로 break 지시자를 사용해 멈출 수 있다.

현재 실행 중인 반복에서 더는 무언가를 하지 않고 다음 반복으로 넘어가고 싶다면 continue 지시자를 사용할 수 있다.

반복문 앞에 레이블을 붙이고, break/continue에 이 레이블을 함께 사용할 수 있다. 레이블은 중첩 반복문을 빠져나와 바깥의 반복문으로 갈 수 있게 해주는 유일한 방법이다.

함수

기본값

매개변수에 값을 전달하지 않으면 그 값은 undefined가 된다.

매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 '기본값(default value)'을 설정해주면 된다.

function showMessage(from, text = "no text given") {
  alert( from + ": " + text );
}

function showMessage(from, text = anotherFunction()) {
  // anotherFunction()은 text값이 없을 때만 호출됨
  // anotherFunction()의 반환 값이 text의 값이 됨
}

반환값

return문이 없거나 return 지시자만 있는 함수는 undefined를 반환한다.

표현식을 여러 줄에 걸쳐 작성하고 싶다면 표현식이 return 지시자가 있는 줄에서 시작하도록 작성해야 한다. 또는 여는 괄호를 return 지시자와 같은 줄에 써도 괜찮다.

return (
  some + long + expression
  + or +
  whatever * f(a) + f(b)
)

함수 이름짓기

함수 이름은 함수가 어떤 동작을 하는지 설명할 수 있어야 한다. 이렇게 이름을 지으면 함수 호출 코드만 보아도 해당 함수가 무엇을 하고 어떤 값을 반환할지 바로 알 수 있다.

함수는 동작을 수행하기 때문에 이름이 주로 동사이다.

“Show…” – 무언가를 보여줌

"get…" – 값을 반환함

"calc…" – 무언가를 계산함

"create…" – 무언가를 생성함

"check…" – 무언가를 확인하고 불린값을 반환함

함수 표현식 vs 함수 선언문

함수 선언문을 이용해 함수를 선언하는 걸 먼저 고려하는 게 좋다.

함수 선언문으로 함수를 정의하면, 함수가 선언되기 전에 호출할 수 있어서 코드 구성을 좀 더 자유롭게 할 수 있다.

함수 선언문을 사용하면 가독성도 좋아진다.

코드에서 let f = function(…) {…} 보다 function f(…) {…} 을 찾는 게 더 쉽다.

함수 선언 방식이 더 눈길을 사로잡는다.

 

함수는 값이다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있다.

“함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 된다.

“함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 된다.

함수 선언문은 코드 블록이 실행되기도 전에 처리된다. 따라서 블록 내 어디서든 활용 가능하다.

함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어진다.

화살표 함수

화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다. 본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 한다.

1. 중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둔다. 함수는 이 표현식을 평가하고, 평가 결과를 반환한다.
2. 중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 한다. 다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 한다.