모던 자바스크립트 01일차 | 자바스크립트의 기본

매주 하게 될 자바스크립트 스터디에서 각자 스터디하면서 요약한 자료를 기술하려고 한다!
출처 - [https://ko.javascript.info/]

hello world

외부스크립트

절대경로 (루트에서부터 파일이 위치한) , 상대경로

스크립트를 html안에 직접 작성하는 방식은 간단할 때만 사용
스크립트를 별도의 파일로 작성하면 브라우저가 스크립트를 다운바당 캐시(cache)에 저장하기 때문에 성능상의 이점이 있다.

코드 구조

세미콜론

자바스크립트는 줄 바꿈이 있으면 이를 암시적으로 세미콜론으로 해석한다.
하지만 대부분의 경우가 '항상'을 의미하진 않는다.

에러 예시

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

alert만 제대로 출력되고 에러가 발생한다.(대괄호 앞에 세미콜론이 있다고 가정하지 않기 때문에) 이를 해결하기 위해서는 alert 뒤에 세미콜론을 써야한다.

주석

// : 한줄짜리 주석
/**/ : 여러줄의 주석

단축키
한 줄 : ctrl + / (맥 cmd + /)
여러 줄 : ctrl + shift + / (cmd + option + /)

엄격모드

use strict

스크립트 최상단에 있을 시 스크립트 전체가 "모던한" 방식으로 동작한다. ( 함수 앞에 쓰이면 해당 함수만 엄격모드로 실행된다.)

브라우저 콘솔

브라우저 콘솔에는 기본적으로 use strict 가 적용되어 있지 않다. 사용하고 싶다면 use strict를 입력한 후 shift + enter 을 눌러 줄바꿈 후 입력하거나 자동 실행 함수를 써서 사용한다.

자동 실행 함수 예시

(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

## 변수와 상수

변수

데이터를 저장할 때 쓰이는 이름 붙은 저장소

let message = 'Hello!'; // 변수를 정의하고 값을 할당합니다.

alert(message); // Hello!

let이라는 키워드를 사용해 변수를 생성하고, 할당 연산자를 통해 변수 안에 데이터를 저장한다.

let user = 'John', age = 25, message = 'Hello';

한 줄에 여러 변수를 선언 하는 것도 가능하다.(권장하는 방법은 아니다 , 가독성을 위해 한줄에는 하나의 변수만 작성)

> 🤓 주의 같은 변수를 두번 선언하면 에러가 발생한다. 선언한 변수를 참조할 때는 let 없이 변수명만 사용한다!

변수 명명 규칙

• 변수명에는 오직 문자와 숫자, 기호 $와 _만 들어갈 수 있다.
• 첫 글자는 숫자가 될 수 없다.
• 흔히 사용되는 표기법은 카멜표기법 (camelCase) 이다.

예약어
예약어 목록에 있는 단어는 변수명으로 사용할 수 없다.
let, class, return function

대개는 let 없이도 단순히 값을 할당하는 변수를 생성하는 것이 가능했지만, use strict 모드에서는 에러를 발생시킨다.

상수

변화하지 않는 변수를 선언할 때는 let 대신 const를 사용한다. 상수는 재할당이 불가능하다.

자료형

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 여덟 가지 기본 자료형이 있다.

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

위와 같은 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적 타입 언어'라고 부른다.

1. 숫자형

숫자형은 정수 및 부동소수점 숫자를 나타낸다. 숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN같은 '특수 숫자 값(special numeric value)'이 포함된다.

• Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타낸다.
  어느 숫자든 0으로 나누면 무한대를 얻을 수 있다.

• NaN 은 계산 중에 에러가 발생했다는 것을 나타내주는 값입니다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데 이때 NaN이 반환된다.

2. 문자형

자바스크립트에선 문자열을 따옴표로 묶는다. ("",'',``)

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

3. Boolean 형

불린형(논리 타입)은 true 와 false 두 값으로 나뉜다.
비교결과를 저장할 때도 사용한다.

4. null 값

null 은 오로지 null 값만 포함하는 별도의 자료형을 만든다.
다른 언어에서의 null 은 존재하지 않는 객체에 대한 참조나 널 포인터를 나타낼 때 사용하지만,
자바스크립트에서의 null은 존재하지 않는 값, 비어있는 값, 알 수 없는 값을 나타낸다.

5. undefined 값

undefined 값는 null 처럼 자신만의 자료형을 형성한다.
값이 할당되지 않은 상태를 나타낼 때 사용된다. 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에는 undefined가 자동으로 할당된다.

주의
undefined 를 직접 할당하는 것은 권장하지 않는다. 변수가 비어있거나 알 수 없는 상태라는 걸 나타내려면 null 을 사용하자. undefined는 값이 할당되지 않은 변수의 초기값을 위해 예약어로 남겨두자!

6. 객체

7. 심볼

객체형을 제외한 다른 자료형은 문자열이든 숫자든 한 가지만 표현할 수 있기 때문에 원시(primitive) 자료형이라 부른다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있다.

심볼(symbol)형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다.

typeof 연산자
typeof 연산자는 인수의 자료형을 반환한다. 자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용하다.
typeof 연산자는 두 가지 형태의 문법을 지원한다.
연산자: typeof x
함수: typeof(x) (괄호가 있든 없든 결과가 동일합니다.)
typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다.

8.BigInt

암호관련 작업같이 아주 큰 숫자가 필요한 상황이거나 높은 정밀도로 작업을 해야 할 때는 큰 숫자가 필요하다.
BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로 길이에 상관없이 정수를 나타낼 수 있다. 정수 리터럴 끝에 n을 붙이면 만들 수 있다.

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

alert

이 함수가 실행되면 확인 버튼을 누를 때까지 메세지를 보여주는 창이 계속 떠있는다.

prompt

이 함수는 두개의 인수를 받는다. 실행되면 메세지와 입력필드, 확인, 취소 버튼이 있는 모달 창을 띄워준다.

💡 알고가기

인수를 감싸는 대괄호의 의미

result = prompt(title, [default]);

디폴트를 감싸는 대괄호는 이 매개변수가 필수가 아닌 선택값이라는 것을 의미한다.

confirm

사용자가 확인 또는 취소버튼을 누를 때까지 메세지가 창에 보여진다.

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

형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환된다. 이런 과정을 "형 변환"이라고 한다.
전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있다.

문자형으로 변환

무언가를 출력할 때 주로 일어난다. String(value)을 사용하면 문자형으로 명시적 변환이 가능하다
alert메서드는 매개변수로 문자형을 받는다. 다른 형의 값을 전달 받으면 이 값은 문자형으로 자동 변환 된다.

숫자형으로 변환

alert( "6" / "2" ); // 3, 문자열이 숫자형으로 자동변환된 후 연산이 수행됩니다.

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

숫자값을 문자 기반 폼을 통해 입력받는 경우엔 명시적 형 변환이 필수이다. Number(value)로도 형 변환을 할 수 있다
null과 undefined는 숫자형으로 변환 시 결과가 다르다. null은 0이 되고 undefined는 NaN이 된다.

불린형으로 변환

이 형 변환은 논리 연산을 수행할 때 발생한다. 불리언으로 형 변환 시 적용되는 규칙은 다음과 같다.

• 숫자 0, 빈 문자열, null, undefined, NaN 같이 직관적으로 비어있다고 느껴지는 값들은 false가 된다. 그 외의 값은 true로 변환된다.

⛔️ 주의
문자열 "0"은 true 이다.

alert( Boolean("0") ); // true
alert( Boolean(" ") ); // 공백이 있는 문자열도 비어있지 않은 문자열이기 때문에 true로 변환됩니다.

기본 연산자와 수학

👩🏻‍🏫 용어 정리

• 피연산자 : 연산자가 연산을 수행하는 대상. ex) 5*2에서 5가 왼쪽 피연산자, 2가 오른쪽 피연산자이다. 피연산자는 인수라고 불리기도 한다.
• 단항 연산자 : 피연산자를 하나만 받는 연산자. 피연산자의 부호를 뒤집는 단항 마이너스 연산자 - 는 단항 연산자의 대표적인 예다.
• 이항 연산자: 두 개의 피연산자를 받는 연산자. 마이너스 연산자는 아래와 같이 이항 연산자로 쓸 수 있다.

let x = 1, y = 3;
alert( y - x ); // 2, 이항 마이너스 연산자는 뺄셈을 해준다.

단항 연산자와 이항 연산자는 같은 - 기호를 사용하지만 수행하는 연산이 다르다. 피연산자의 개수로 두 연산자를 구분한다.

수학

나머지 연산자 %

나머지 연산자는 % 기호로 나타내지만 비율을 나타내는 퍼센트와 관련이 없다.
a % b 는 a를 b로 나눈 후 그 나머지를 정수로 반환해준다.

alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력

거듭제곱 연산자 **

a ** b 를 평가하면 a를 b번 곱한 값이 반환된다.

alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력
alert( 4 ** (1/2) ); // 2 (1/2 거듭제곱은 제곱근)
alert( 8 ** (1/3) ); // 2 (1/3 거듭제곱은 세제곱근)

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

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

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

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

alert( 6 - '2' ); // 4, '2'를 숫자로 바꾼 후 연산이 진행된다.
alert( '6' / '2' ); // 3, 두 피연산자가 숫자로 바뀐 후 연산이 진행된다.

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

덧셈 연산자는 이항연산자 뿐만 아니라, 단항 연산자로도 사용할 수 있다.
숫자에 단항 덧셈 연산자를 붙이면 아무 동작도 일어나지 않는다. 그러나 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어난다.

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

let apples = "2";
let oranges = "3";

alert( apples + oranges ); // 23, 이항 덧셈 연산자는 문자열을 연결합니다.
// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

원하는 대로 값을 더해주려면 위와 같이 단항 덧셈 연산자를 사용해 피연산자를 숫자형으로 변화시키면 된다.

연산자 우선순위

단항 덧셈,뺼셈 > 지수(*) > 곱셈(), 나눗셈(/) > 덧셈, 뺄셈

할당 연산자

무언가를 할당할 때 쓰이는 = 도 연산자이다.

값을 반환하는 할당 연산자

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

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;

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

위처럼 여러 개 연결한 경우, 우측부터 연산하면 된다. 우측의 2+2 를 먼저 계산된 후, 그 결과가 순차적으로 c,b,a에 할당된다. 변수가 모두 단일 값을 공유하게 된다. 하지만 가독성을 위해 c 변수에 연산을 하고 b,a에 c를 할당하는 식으로 변경하면 좋다.

복합 할당 연산자

let n = 2; 
n += 5; // n은 7이 됩니다(n = n + 5와 동일).
n *= 2; // n은 14가 됩니다(n = n * 2와 동일).
alert( n ); // 14


let n = 2;

n *= 3 + 5;

alert( n ); // 16 (3+5가 먼저 계산된 후 8*2)

복합 할당 연산자는 산술 연산자와 비트 연산자에도 적용할 수 있다. /=, -= 등의 연산자를 만들 수 있다.

증가, 감소 연산자

• 증가 연산자 ++는 변수를 1 증가시킨다.
• 감소 연산자 --는 변수를 1 감소시킨다.

주의! : 증가, 감소 연산자는 변수에만 사용할 수 있다.

• counter++ 와 같이 피연산자 뒤에 올 때는 후위형이라고 부른다.
• ++counter 와 같이 피연산자 앞에 올 때는 전위형이라고 부른다.

두 타입모두 counter를 1 증가시키는 것은 같지만 반환 값을 사용할 때 차이가 있다.

값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 된다.

값을 증가시키지만, 증가 전의 기존 값을 사용하려면 후위형 증가 연산자를 사용하면 된다.

정리

let a = 1, b = 1;

alert( ++a ); // 2, 전위형은 증가 후의 값을 반환합니다.
alert( b++ ); // 1, 후위형은 증가 전의 값을 반환합니다.

alert( a ); // 2, 값이 1만큼 증가합니다.
alert( b ); // 2, 값이 1만큼 증가합니다.

let counter = 1;
alert( 2 * ++counter ); // 4

let counter2 = 1;
alert( 2 * counter2++ ); // counter++는 '기존'값을 반환하기 때문에 2가 출력

증가 감소 연산자의 우선순위는 다른 산술 연산자보다 높기 때문에, counter 의 수가 먼저 증가한 후에 연산된다.

쉼표 연산자

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

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

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

• 쉼표의 우선 순의는 할당 연산자보다 낮다. 위의 예시를 조금 바꿔서 생각해보자.
  a= 1+2, 3+4 에서 + 가 먼저 수행되어 a = 3,7 된다. 위에서는 a 에 마지막 값이 할당되지만 이와 같은 경우에는 할당연산자의 순위가 높기 때문에 a = 3 이 먼저 실행되고 7은 버려진다.

문제 풀기

• 형변환

"" + 1 + 0	// "10"
"" - 1 + 0	// -1
true + false // 1
6 / "3"	// 2
"2" * "3" // 6
4 + 5 + "px" // 9px
"$" + 4 + 5 // $45
"4" - 2 // 2
"4px" - 2  // NaN
7 / 0  // Infinity
"-9" + 5 // "-95"
"-9" - 5	// -14
null + 1	// 1
undefined + 1	// NaN
" \t \n" - 2	// -2 
// 문자열이 숫자형으로 변할 땐 문자열 앞뒤의 공백이 삭제. 뺄셈 연산자 앞의 피연산자는 공백을 만드는 문자 \t와 \n, 그 사이의 “일반적인” 공백으로 구성된다. 따라서 " \t \n"는 숫자형으로 변환 시 길이가 0인 문자열로 취급되어 숫자 0이 된다.