🫧 모던 자바스크립트 - 자바스크립트 기본 🫧

변수와 상수

let - 모던한 변수 선언 키워드

var - 오래된 변수 선언 키워드

const - 변수의 값을 변경할 수 없음

---

자료형

'null' 값

다른 언어 - 존재하지 않는 객체에 대한 참조

자바스크립트 - 존재하지 않는 값, 비어 있는 값, 알 수 없는 값

'undefined' 값

값이 할당되지 않은 상태

typeof 연산자

인수의 자료형을 나타내는 문자열을 반환

연산자 - typeof x 

함수 - typeof(x)

---

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

alert

메시지가 있는 작은 창인 모달 창을 띄움

(모달 - 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미 내포)

prompt

prompt(title, [default])

title - 사용자에게 보여줄 문자열

default - 입력 필드의 초깃값(선택값)

함수가 실행되면 텍스트 메시지와 입력 필드, 확인 및 취소 버튼이 있는 모달 창을 띄움

사용자가 입력 필드에 기재한 문자열 반환, 입력 취소한 경우 null 반환

confirm

매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줌

확인 버튼 누르면 true, 그 외의 경우는 false

---

형 변환

숫자형으로 변환

undefined 전달 -> NaN

null 전달 -> 0

true and false 전달 -> 1과 0

string 전달 -> 문자열의 처음과 끝 공백 제거 / 공백 제거 후 남아있는 문자열 없으면 0, 그렇지 않다면 문자열에서 숫자 읽음 / 변환에 실패하면 NaN

ex) alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함)

불린형으로 변환

숫자 0, 빈 문자열, null, undefined, NaN과 같이 직관적으로 비어있다고 느껴지는 값은 false

문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true

---

기본 연산자와 수학

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

피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환 일어남

쉼표 연산자

여러 표현식을 코드 한 줄에서 평가할 수 있게 함

표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환됨

쉼표 연산자의 연산자 우선순위는 매우 낮음

---

비교 연산자

일치 연산자

동등 연산자 ==은 0과 빈 문자열과 false를 구별하지 못함

동등 연산자 ==은 null과 undefined를 

-> 일치 연산자 ===을 사용해야 함

비교가 불가능한 undefined

undefined는 항상 false 반환

---

논리 연산자

첫 번째 truthy를 찾는 OR 연산자 '||'

1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기

가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가함

각 피연산자를 불린형으로 변환함 -> 값이 true이면 연산 멈추고 해당 피연산자의 변환 전 원래 값을 반환

피연산자 모두를 평가한 경우(모든 피연산자가 false로 평가되는 경우) 마지막 피연산자 반환

2. 단락 평가

왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가 멈춤

두 번째 피연산자가 변수 할당과 같은 부수적인 효과를 가지는 표현식일 때 명확히 볼 수 있음

첫 번째 falsy를 찾는 AND 연산자 '&&'

가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가함

각 피연산자를 불린형으로 변환함 -> 값이 false이면 연산 멈추고 해당 피연산자의 변환 전 원래 값을 반환

피연산자 모두를 평가한 경우(모든 피연산자가 true로 평가되는 경우) 마지막 피연산자 반환

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

---

nullish 병합 연산자 '??'

여러 피연산자 중 그 값이 확정되어있는 변수를 찾을 수 있음

a ?? b

a가 null도 아니고 Undefine도 아니면 a / 그 외의 경우는 b

'??'와 '||'의 차이

|| - 첫 번째 truthy 값 반환 / ?? - 첫 번째 정의된 값 반환

---

함수

함수 선언

function showMessage() {

    alert('안녕하세요!');

}

---

함수 표현식

자바스크립트는 함수를 특별한 종류의 "값"으로 인식 (특별한 동작을 하는 구조로 취급하지 않음)

자바스크립트에서는 괄호가 있어야만 함수가 호출됨

함수를 복사해 다른 변수에 할당할 수 있음

값처럼 할당, 복사, 선언 가능

콜백 함수

함수를 값처럼 전달

함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 나중에 호출

함수 표현식 vs 함수 선언문

함수 표현식 - 실제 실행 흐름이 해당 함수에 도달했을 때 함수 생성 / 실행 흐름이 함수에 도달했을 때보터 사용 가능

함수 선언문 - 함수 선언문이 정의되기 전에도 호출 가능

---

화살표 함수 기본

let func = (arg1, arg2, ...argN) => expression