스타벅스 웹 사이트 만들기 - ch.9 JS 선행 (1) ~ (5)

1. 개요

1) 표기법

(1) dash-case(kebab-case)

HTML, CSS에서 많이 사용
the-quick-brown-fox

(2) snake_case

the_quick_brown_fox

(3) camelCase

JS에서 많이 사용
theQuickBrownFox

(4) PascalCase

TheQuickBrownFox

2) Zero-based Numbering

0 기반 번호 매기기
특수한 경우를 제외하고는 0부터 숫자를 시작

3) 주석

// 한 줄 메모//
/한 줄 메모/
/**
*여러 줄

• 메모1
• 메모2
  */

2. 데이터 종류(자료형)

String(문자, 데이터)

let myName = "dongduu";

console.log(myName); // dongduu

Number(숫자 데이터)

let number = 123;

console.log(number); /// 123

Boolean(불린 데이터)

true or false

let checked = true;

console.log(ckecked); // true

Undefined

값이 할당되지 않은 상태

let undef;

console.log(undef); //undefined

Null

어떤 값이 의도적으로 비어있음

let empty = null

console.log(empty); // null

Object(객체 데이터)

여러 데이터를 Key:value 형태로 저장

let user = {
	name: 'dodo',
    age: 21,
}

console.log(user.name); //dodo

Array(배열 데이터)

여러 데이터를 순자적으로 저장

 let hi = [1, 2, 3]
 
 console.log(hi[1]); /// 2

3.변수, 예약어

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름
=> var, let, const
=> var는 권장하지 않음

• 재사용 가능
• 값의 재할당 가능(let)
• 값의 재할당 불가능(const)

예약어

특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용 할 수 없음
=> if, break,,,,,

4. 함수

특정한 동작을 수행하는 일부 코드의 집합(부분) , function

// 함수 선언
function helloFunc () {
	// 실행코드
    console.log(1234);
}
// 함수 호출
helloFunc(); // 1234

=> 소괄호 안에 매개변수 넣을 수 있음
=> 함수 재사용 가능
=> 기명함수/익명함수

5. 조건문

조건의 결과에 따라 다른 코드를 실행하는 구문

let isShow = true;
let checked = false;

if (isshow) {
	console.log(123);
}

if (checked) {
	console.log(123);
}

if (isshow) {
	console.log(123);
} else {
	console.log(234)
}