[JAVASCRIPT.INFO] 자바스크립트 기본

이 글은 [모던 JavaScript 튜토리얼]을 공부하며 정리한 글입니다.

 

 

👉 기본 환경

- Language: JavaScript

- IDE: VS code

 

 

---

4. 변수와 상수

 

변수 규칙

- 숫자와 문자를 사용하되 첫 글자는 숫자가 될 수 없음

- 특수기호는 $와 _만 사용할 수 있음

 

⭐ 변수명 짓기

// 우리가 살고 있는 행성
let ourPlanetName = "Earth";
 
// 현재 접속중인 방문자 이름
let currentUserName = "John";
 

* planet이라는 단순한 이름보다는 어떤 행성의 이름인지를 설명하는 것이 중요

* userName이라는 단순한 이름보다는 현재 접속중인이라는 상태를 설명하는 것이 중요

 

// 대문자 상수: 기억하기 어려운 하드 코딩한 값의 별칭을 만들 때 주로 사용
const BIRTHDAY = '18.04.1982';
 
// 일반 상수: 런타임 과정에서 계산되지만 최초 할당 이후 값이 변하지 않을 때 주로 사용
const age = calculateAge(birthday);
 

* 대문자 상수는 상수 중에서도 실행과 무관하게 변경되지 않는 값에 사용

* 일반 상수는 런타임 이후 변경되지 않는 값에 사용

 

 

---

5. 자료형

 

* null

    - ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값

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

    - Number(null) = 0;

* undefined

    - 변수는 선언했지만, 값을 할당되지 않은 상태

    - Number(undefined) = NaN;

* typeof

    -  인수의 자료형을 반환

 

⭐ 단, 내부 규칙에 의하여

    - null == undefined (true)

    - null === undefined (false)

 

 

---

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

 

* alert

    - alert();

    - 사용자가 ‘확인(OK)’ 버튼을 누를 때까지 메시지를 보여주는 창이 계속 떠있음

* prompt

    - prompt(텍스트 메세지, [입력 필드의 초깃값]);

    - 텍스트 메시지와 입력 필드(input field), 확인(OK) 및 취소(Cancel) 버튼이 있는 모달 창 발생

* confirm

    - confirm();

    - 사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여짐, 사용자가 확인 버튼을 누르면 true / 취소 버튼이나 Esc를 누르면 false 반환

 

 

---

8. 기본 연산자와 수학

 

let cal1 = 2 + 2 + '1' // 41
let cal2 = '1' + 2 + 2 // 122
 

* + 연산자

    - 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환

        - 다른 연산자의 경우, 문자열을 숫자로 바꾼 후 연산

    - 단항 연산자로 사용 시, 피연산자가 숫자가 아닌 경우엔 숫자형으로 변환

* + 연산자 이 외 연산자

    - 문자열이 숫자형으로 변할 땐 공백을 만드는 문자 \t와 \n, 일반적인 공백 제거

 

⭐ 코드 한 줄엔, 특정 동작 하나에 관련된 내용만 작성하는 게 좋음

 

 

---

9. 비교 연산자

 

* === 일치 연산자

    - 자료형의 동등 여부까지 검사

    - switch문은 조건을 확인할 때 내부적으로 일치 연산자 ===를 사용해 비교

* == 동등 연산자, < > <= >= 기타 연산자

// null
alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true
// undefined
alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)
// null & undefined
alert( null === undefined ); // false
alert( null == undefined ); // true
 

- null과 undefined를 == 연산자로 비교하면 true를 반환하지만, 다른 값과 비교하면 무조건 false를 반환

 

* 사전순 비교 유의

2 > 12; // false
"2" > "12" // true("2"와 "1"을 비교)
 

- 크고 작음을 비교하는 연산자의 피연산자로 문자열이 들어오면 글자 단위로 크기 비교가 이뤄짐

 

⭐ 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 확인하여 따로 처리하는 코드를 추가

 

 

---

11. 논리연산자

 

* ||

    - 첫 번째 truthy를 찾는 OR 연산자

        - 각 피연산자를 불린형으로 변환 → 변환 후 값이 true이면 연산을 멈춤 → 해당 피연산자의 변환 전 원래 값을 반환

        - 피연산자에 truthy가 하나도 없다면 마지막 피연산자를 반환

        - 옵션값과 Default 값에서 사용

* &&

    - 첫 번째 falsy를 찾는 AND 연산자

 

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

⭐ if를 ||나 &&로 대체 X

 

alert( alert(1) || 2 || alert(3) );
 

* 첫 번째 얼럿 창에 1이 출력

→ alert()은 undefined를 반환: falsy

→ 2는 truthy이기 때문에 실행이 멈추고 2가 반환

 

alert( null || 2 && 3 || 4 );
 

* 2 && 3 = 3

→ null || 3 || 4

→ 3

 

if (null || -1 && 1) alert( 'third' );
 

* -1 && 1

→ null || 1

→ 1

 

 

---

12. nullish 병합 연산자 '??'

 

* ??

    - 정확하게 null이나 undefined일 경우에만 false (0 제외)
    - ⭐ &&나 ||와 함께 사용하지 못함(단, 괄호 사용 시, 사용 가능)

 

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

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

 

 

---

13. ‘while’ 반복문

 

⭐ ‘?’ 오른쪽엔 break나 continue가 올 수 없음

 

for (let i = 0; i < 5; ++i) alert( i );
for (let i = 0; i < 5; i++) alert( i );
 

두 경우 모두 0부터 4까지 출력

 

let num;
do{
    num = prompt("Enter the number", 0);
}
while(num<=100 && num)
 

num이 null이거나 undefined일 경우, 숫자로 형변환하면 0이 되므로 falsy를 판단하는 추가적 조건문 필요

 

 

---

15. 함수

 

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

* 매개변수에 인자를 넘겨주지 않을 경우, undefined 출력

default값 설정을 위해 대입 연산자 활용

 

function doNothing() { /* empty */ }
alert( doNothing() === undefined ); // true
 
 
function doNothing() {
  return;
}
alert( doNothing() === undefined ); // true
 

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

 

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

⭐ return 부분을 개행할 경우, return; 처리되는 것에 유의

만일 개행이 필요할 경우, () 활용

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

 

 

---

16.  함수 표현식

 

function sayHi() {   // (1) 함수 생성
  alert( "Hello" );
}
 
let func = sayHi;    // (2) 함수 복사
 

* sayHi 다음에 괄호가 없음에 유의
    - 괄호가 있었다면 func = sayHi() 가 되어 sayHi 함수 그 자체가 아니라, 함수 호출 결과(함수의 반환 값) 가 func에 저장

 

sayHi("John"); // Hello, John
 
function sayHi(name) {
  alert( `Hello, ${name}` );
}
 

함수 선언문, sayHi는 스크립트 실행 준비 단계에서 생성되기 때문에, 스크립트 내 어디에서든 접근할 수 있음

 

sayHi("John"); // error!
 
let sayHi = function(name) {  // (*) 마술은 일어나지 않습니다.
  alert( `Hello, ${name}` );
};
 

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

 

⭐ 함수를 선언해야 한다면 함수가 선언되기 이전에도 함수를 활용할 수 있는 함수 선언문 방식을 따르는 게 좋음
    - 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋음

 

 

---

17. 화살표 함수 기본

 

- 본문이 한 줄인 함수를 작성할 때 유용

- 본문이 여러 줄로 구성되었다면 중괄호를 사용

    * 이 경우, 반드시 return 지시자를 사용해 반환 값을 명기