[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 16 자바스크립트 기본 문법

DAY 23

🔖 오늘 읽은 범위 :

☃️2/4(수) 진도표 알림
❄️공부 내용: 16 자바스크립트 기본 문법
❄️ 쪽수: 508~554쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

기본 문법

변수

• 자료를 담아두는 공간.

• 용도

  • 재사용성
  • 가독성

• 변수 선언

  • 특정 값이나 식, 문을 할당할 수 있음.

    let width;
    let height;
    
    width = 200;
    height = 50;
    
    let area = width * height;
    
    console.log(area);

• 상수 선언

  • 한번 값을 할당하면 변경이 불가함.

          const PI = 3.14;
          let radius = prompt('반지름 입력해라~');
          let area = PI * radius * radius;
          console.log(area);

• 변수 선언 규칙

  • 변수 이름은 영어 문자와 언더스코어(_), 숫자를 사용한다.
  • 영어 대소문자를 구별하며, 예약어는 변수 이름으로 사용하지 못한다.
  • 여러 단어를 연결해 만든 변수 이름은 카멜 케이스 표기법으로 한다.
  • 변수 이름은 의미있게 작성해야 한다.

자료형 이해

• 프로그램에서 처리할 자료의 형태.

  유형	종류	설명	예시
  원시 유형	숫자형	따옴표 없이 숫자로 표기됨.	let Year = 2026;
  	BigInt	아주 큰 정수. 숫자 끝에 n을 붙여서 표시함.	let bigNumber=1234567890…n
  	문자열	작은따옴표나 큰따옴표로 묶어서 표현.	let greeting = “Hello~”;
  	논리형	참과 거짓. true 와 false 는 소문자로만 표시.	let isEmpty = true;
  복합 유형	배열	하나의 변수에 값을 여러 개 저장.	let seasons=[’봄’,’여름’,’가을’,’겨울’];
  	객체	함수와 속성을 함께 포함.	let date = new Date();
  특수 유형	undefined	자료형이 지정되지 않은 상태. 변수 선언만 하고 할당이 안된 상태.
  	null	값이 유효하지 않은 상태.

• 숫자형

  • 정수 : 소수점이 없는 숫자.
  • 실수 : 소수점이 있는 숫자.
    • 정밀 계산에 오차가 발생하기 때문에 매우 주의해야 함.

• 문자열

  • 문장

  • 특수 기호 표시하기 : 이스케이프 문자를 이용한다. → 백슬래시()

    이스케이프 문자	설명
    \ddd	8진수
    \xddd	16진수
    \	백슬래시 문자
    \’	작은 따옴표 문자
    \”	큰 따옴표 문자
    \b	백스페이스 문자
    \n	줄 바꿈 문자
    \t	탭 문자

• 탬플릿 리터럴로 문자열 연결하기

  • 문자열과 변수, 식을 섞어서 하나의 문자열을 만드는 표현 형식.

  • 연결 연산자 + 를 이용해 변수나 식을 연결하는 것은 예상치 못한 결과를 보여줄 때가 많기 때문에 주로 탬플릿 리터럴을 사용함.

  • 백틱(`) 을 사용해서 문자열을 만듬.

    let name = 'James'
    let classRoom = 777
    console.log(`${name}님, ${classRoom}호 강의실로 입장하세요.`)

• 논리형

  • 불린 유형. 참이나 거짓 표현하는 자료형.
  • 조건을 확인할 대 논리형 데이터를 사용함.

• undefined 와 null

  • undefined : 자료형이 정의되지 않았을 때의 데이터 상태.
  • null : 데이터의 값이 유효하지 않은 상태.

• 배열

  • 하나의 변수에 여러 개 값을 저장.

  • 대괄호로 묶어서 선언하고, 값을 넣지 않으면 빈 배열이 됨.

      let season = ["Spring", "Summer", "Autumn", "Winter"];

  • 배열 요소 인덱스 : 0 부터 시작함. 배열의 특정 요소를 가져올 때 사용함.

자료형 변환하기

• 자바스크립트는 “동적 타입 언어” ⇒ 자료형이 언제든지 바뀔 수 있음.

• 자동 형 변환

  • 연산을 하는 동안 자료형이 자동으로 바뀐다.

• 느슨한 자료형 체크 ⇒ 다른 유형의 값이 들어가는 실수가 언제나 발생할 수 있음 ⇒ 협업 하는 경우에 변수를 일관성 있게 유지하기 어렵다.

• 자료형 변환 함수

  함수	설명
  Number()	문자열이나 논리형 값을 숫자로 변환.
  parseInt()	문자열을 정수로 변환.
  parseFloat()	문자열을 실수로 변환.
  String()	숫자나 논리형 값을 문자열로 변환.
  Boolean()	괄호 안의 값을 논리형으로 변환.

  • NaN : “Not a Number” ⇒ 숫자 변환 실패.

💡truthy 와 falsy

• 자바스크립트는 모든 값을 true 와 false 로 나타낸다.
• 조건문에서 유용하게 사용할 수 있다.
• false 라고 할만한 것들 ⇒ falsy
• false 가 아닌 것들 ⇒ truthy
• falsy 로 간주하는 것들만 기억하자!!
  • false : 당연히 논리형 값 false 는 falsy 입니다.
  • 0 : 숫자 0
  • -0 : 음수 0
  • “”, ‘’ : 빈 문자열
  • null
  • undefined
  • NaN

연산자

• 산술 연산자

  • 사칙연산(+, -, *, /) 은 동일함.

    연산자	설명
    %	나눈 후 나머지 값.
    ++	값을 1 증가.
    —	값을 1 감소.

• 할당 연산자

  • 우측 실행 결과를 왼쪽 변수에 할당. 대입 연산자.

  • 할당 연산자와 산술 연산자를 합쳐 하나의 할당 연산자로 표시할 수 있음.

    연산자	설명	예시
    =	우측 값을 좌측 변수에 할당함.	y = x + 3
    +=	y = y + x	y += x
    -=	y = y - x	y -= x
    *=	y = y * x	y *= x
    /=	y = y / x	y /= x
    %=	y = y % x	y %= x

• 비교 연산자

  • 비교해서 참이나 거짓으로 결괏값을 반환함.

  • 비교 연산자는 특히 ==, != 와 ===, !== 가 동작이 다름.

    연산자	설명	조건식	결과값
    ==	값이 같으면 true	3 == “3”	true
    ===	값과 자료형이 같으면 true	3 ===”3”	false
    !=	값이 다르면 true	3 != “3”	false
    !==	값이 다르거나, 자료형이 다르면 true	3 !== “3”	true
    <	좌측이 우측보다 작으면 true	3 < 4	true
    <=	좌측이 우측보다 작거나 같으면 true	3 <= 4	true
    >	좌측이 우측보다 크면 true	3 > 4	false
    >=	좌측이 우측보다 크거나 같으면 true	3 >= 4	false

• 문자열 비교

  • 문자 아스키 값을 비교해서 결정함.

• 논리 연산자

  • 불린 연산자 : true, false 를 처리함.

  • 조건 체크.

    연산자	기호	설명
    OR
    AND	&&	전부 true 일 경우에만 true
    NOT	!	반댓값 지정

조건문

• if 문과 if ~ else 문

조건 연산자로 조건 체크하기

(조건) ? true 일 경우 실행 : false 일 경우 실행

(parseInt(userNumber) %3 === 0) ? alert("3의 배수") : alert("3의 배수가 아님");

논리 연산자로 조건 체크하기

💡조건 계산을 빠르게 하는 방법

• && 연산자일 경우
  • false 확률이 높은 조건을 첫번째 조건식으로 둔다.
• || 연산자인 경우
  • true 확률이 높은 조건을 첫번째 조건식으로 둔다.

Switch 문

• 조건이 case 문 값과 일대일로 일치하면 해당 case 문 명령을 실행한 후 빠져 나온다.

반복문

• 특정 동작을 여러 번 실행할 때 사용한다.

for 문

for(let i = 1; i < 6; i++) {
    sum += i;
}

• 중첩 for 문 : 안쪽 for 문이 모두 실행되고 바깥 for 문이 실행됨.

while 문 과 do ~ while 문

• while 문 : 조건을 체크하고 true 일 때만 명령을 반복하여 실행.
• do ~ while 문 : do 문을 1번 실행 한 후 조건을 체크하여 반복할지 결정함.

break 문과 continue 문

• break : 종료 조건이 되기 전에 반복문을 빠져 나와야 할 경우에 사용함.
• continue : 반복 과정에서 주어진 조건에 해당하는 값을 만날 때, 해당 반복 과정을 건너뛰고 다음 반복 과정을 진행함.(반복 과정을 한차례 건너뛰는 것임)

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 자바스크립트 자체가 언어적인 측면에서 간단함.
• 변수 선언이나 비교 연산은 조심할 것이 있음.
• 변수 타입이 자동 변환 되는 건 매우 조심해야 할 듯.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• 자바스크립트 언어와 후손 언어(?)
  • https://developer.mozilla.org/ko/docs/Web/JavaScript
  • https://www.typescriptlang.org/
  • https://coffeescript.org/
  • https://www.purescript.org/
  • https://livescript.net/
• https://developer.mozilla.org/ko/docs/Glossary/Camel_case

---

🤟소감 3줄 요약

• 자바스크립트만 있는 게 아니네.
• 비슷한 언어들이 많음. 대부분 컴파일 결과물이 자바스크립트.
• 타입스크립트가 매우 유명하고, 주로 많이 사용한다고 함.