모던 javascript (자바스크립트 기본파트) 정리

기존에 알고 있던 부분을 적는 것이 아닌 몰랐거나 새로 배운 점들을 위주로 가볍게 정리를 해보았다.
하나하나 짚으면서 공부해보니 중간중간 비어있는 부분이 너무나도 많았다..

그럼 시작!

typeof 연산자

typeof는 피연산자가 함수이면 "function"을 반환한다. 그러므로 typeof alert는 "function"을 출력해준다. 그런데 '함수’형은 따로 없다. 함수는 객체형에 속한다. 이런 동작 방식이 형식적으론 잘못되긴 했지만, 아주 오래전에 만들어진 규칙이었기 때문에 하위 호완성 유지를 위해 남겨진 상태.
한편, 실무에선 이런 특징이 매우 유용하게 사용되기도 합니다.

어쨌든 typeof 연산자에 대해 우선 알아보면 다음과 같다.

• typeof 연산자는 인수의 자료형을 반환합니다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용합니다.

• typeof 연산자는 두 가지 형태의 문법을 지원합니다.
  연산자: typeof x
  함수: typeof(x)

괄호가 있든 없든 결과가 동일합니다.

typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환합니다.

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

이 파트에서는 prompt 초기값 넣어달라는거 정도만 기억이 난다.

형변환

불린형으로 변환

다른 언어 갔다가 다시 오면 헷갈리는 문자열 "0"

주의: 문자열 "0"은 true입니다.

PHP 등의 일부 언어에선 문자열 "0"을 false로 취급합니다. 그러나 자바스크립트에선 비어 있지 않은 문자열은 언제나 true

기본 연산자와 수학

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

여기서 헷갈리고 있던 부분이 해소됐다. 바로 연산자 순서! 대부분의 사람들은 잘 알겠지만 나는 일단 만들어보고 이론은 나중에 매꿔가는 식이라 이렇게 중간중간 비어있다..

덧셈 연산자 +

덧셈 연산자 +는 대개 숫자를 더한 결과를 반환합니다.

그런데 이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결)합니다.

let s = "my" + "string";
alert(s); // mystring

따라서 이항 연산자 +를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점에 주의해야 합니다.

예시:

alert("1" + 2); // "12"
alert(2 + "1"); // "21"

첫 번째 피연산자가 문자열인지, 두 번째 피연산자가 문자열인지는 중요하지 않습니다. 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환됩니다.

좀 더 복잡한 예시를 살펴봅시다.

alert(2 + 2 + "1"); // '221'이 아니라 '41'이 출력됩니다.
alert(2 + "1" + 2); // 212

연산은 왼쪽에서 오른쪽으로 순차적으로 진행되기 때문에 이런 결과가 나왔습니다. 두 개의 숫자 뒤에 문자열이 오는 경우, 숫자가 먼저 더해지고, 그 후 더해진 숫자와 문자열과의 병합이 일어납니다.

이처럼 이항 덧셈 연산자 +는 문자열 연결과 변환이라는 특별한 기능을 제공합니다. 다른 산술 연산자가 오직 숫자형의 피연산자만 다루고, 피연산자가 숫자형이 아닌 경우에 그 형을 숫자형으로 바꾸는 것과는 대조적입니다.

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

덧셈 연산자 +는 이항 연산자뿐만 아니라 단항 연산자로도 사용할 수 있습니다.

숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않습니다. 그러나 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어납니다.

예시:

// 숫자에는 아무런 영향을 미치지 않습니다.
let x = 1;
alert( +x ); // 1

let y = -2;
alert( +y ); // -2

*// 숫자형이 아닌 피연산자는 숫자형으로 변화합니다.
alert( +true ); // 1
alert( +"" );   // 0*

단항 덧셈 연산자는 짧은 문법으로도 Number(...)와 동일한 일을 할 수 있게 해줍니다.

개발을 하다 보면 문자열을 숫자로 변환해야 하는 경우가 자주 생깁니다. HTML 폼(form) 필드에서 값을 가져왔는데 그 값이 문자형일 때 같이 말이죠. 실제로 폼에서 가지고 온 값은 대개 문자열 형태입니다.

이항 덧셈 연산자를 사용하면 아래와 같이 값이 문자열로 변해서 연결될 겁니다.

단항 연산자

무언가를 할당할 때 쓰이는 =도 연산자입니다. 이 연산자는 할당(assignment) 연산자라고 불리는데, 우선순위는 3으로 아주 낮습니다.

x = 2 * 2 + 1과 같은 표현식에서 계산이 먼저 이뤄지고, 그 결과가 x에 할당되는 이유가 바로 이 때문입니다.

let x = 2 * 2 + 1;

alert(x); // 5

값을 반환하는 할당 연산자

=는 연산자이기 때문에 흥미로운 함축성을 내포하고 있습니다.

자바스크립트에서 대부분의 연산자들은 값을 반환합니다. +와 -뿐만 아니라 = 역시 값을 반환하죠.

x = value을 호출하면 value가 x에 쓰여지고, 이에 더하여 value가 반환됩니다.

할당 연산자의 이런 특징을 이용한 복잡한 표현식을 살펴봅시다.

let a = 1;
let b = 2;

*let c = 3 - (a = b + 1);*alert( a ); // 3
alert( c ); // 0

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

괴상한 코드라고 느껴지겠지만, 여러 자바스크립트 라이브러리에서 이런 식으로 할당 연산자를 사용하고 있기 때문에 동작 원리를 이해할 수 있어야 합니다.

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

기억에남는.

코드를 읽을 때 수직으로 빠르게 움직이다보면 코드가 길 때 놓치기 쉽기때문에 가독성을 올리려면 코드 한 줄엔, 특정 동작 하나

비교 연산자

엣지 케이스

위와 같은 에지 케이스를 왜 살펴보았을까요? 이런 예외적인 경우를 꼭 기억해 놓고 있어야만 할까요? 그렇지는 않습니다. 개발을 하다 보면 자연스레 이런 경우를 만나고 점차 익숙해지기 때문에 지금 당장 암기해야 할 필요는 없습니다. 하지만 아래와 같은 방법을 사용해 이런 예외 상황을 미리 예방할 수 있다는 점은 알아두시길 바랍니다.

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

논리 연산자

alert() 메서드의 리턴값이 undefined라는 점이 새로웠다.

null 병합 연산자 '??'

요약

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

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

  // height가 null이나 undefined인 경우, 100을 할당
  height = height ?? 100;

• ??의 연산자 우선순위는 대의 연산자보다 낮고 ?와 = 보다는 높습니다.

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

while과 for반복문

'for'반복문

여기서 begin과 step을 없애도 돌아가며 무한루프가 될 수 있다는 사실을 알게 됨.

모든 구성 요소를 생략할 수도 있는데, 이렇게 되면 무한 반복문이 만들어집니다.

for (;;) {
  // 끊임 없이 본문이 실행됩니다.
}

for문의 구성요소를 생략할 때 주의할 점은 두 개의 ; 세미콜론을 꼭 넣어주어야 한다는 점입니다. 하나라도 없으면 문법 에러가 발생합니다.

함수

여기서 null 병합 연산자 ??가 또 나오는데 다음과 같다.

매개변수 기본값을 설정할 수 있는 또 다른 방법.

이 외에도 모던 자바스크립트 엔진이 지원하는 null 병합 연산자(nullish coalescing operator) ??를 사용하면 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있어서 좋습니다.

// 매개변수 'count'가 넘어오지 않으면 'unknown'을 출력해주는 함수
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

함수 이름짓기

함수 이름을 지을 땐 아래와 같은 규칙을 따르는 것이 좋습니다.

• 함수 이름은 함수가 어떤 동작을 하는지 설명할 수 있어야 합니다. 이렇게 이름을 지으면 함수 호출 코드만 보아도 해당 함수가 무엇을 하고 어떤 값을 반환할지 바로 알 수 있습니다.
• 함수는 동작을 수행하기 때문에 이름이 주로 동사입니다.
• create…, show…, get…, check… 등의 잘 알려진 접두어를 사용해 이름을 지을 수 있습니다. 접두어를 사용하면 함수 이름만 보고도 해당 함수가 어떤 동작을 하는지 파악할 수 있습니다.