자바스크립트 표기법
dash-case(kebab-case)
: the-quick-brown-fox-jumps-over-the-lazy-dog
이런식으로 중간에 -(dash기호) 사용
dash기호가 케밥의 꼬챙이처럼 보이기도 해서 케밥 케이스라고도 함
HTML, CSS에서 사용
snakecase
: (언더바)를 사용
HTML, CSS에서 사용
camelCase
:낙타(camel)의 등 처럼 중간 단어들의 시작을 대문자로 함
맨 처음엔 소문자를 쓰는게 특징
JS에서 사용 (대부분의 경우 사용)
ParcelCase
: camel과 비슷한데, camel과 다르게 맨 처음 단어부터 대문자를 쓰는게 특징
JS에서 사용
Zero-based Numbering
0 기반 번호 매기기
특수한 경우 제외하고 0부터 숫자를 시작
요일의 경우도 일요일부터 0
주석
// 한 줄 메모
/ 한 줄 메모 /
/**
여러 줄
메모 1
메모 2
/
단축키: ctrl + /
데이터
String(문자 데이터)
: 따옴표 사용 ( "큰따옴표, ' 작은따옴표, ` 백틱 )
; 사용해서 문장 마무리
let myName = "HYEBIN";
let email = 'happy123@naver.com';
let hello = Hello ${myName}?!
백틱(그레이브)(`)을 사용하여 표기하는 방법은 문자 중간 어딘가에 다른 데이터를 보간해서 끼워 넣을 수 있는 보간법을 사용
"" 나 ''가 아닌 ``(백틱)을 사용해야 함
*보간 : 사이에 어떠한 자바스크립트 데이터를 넣어서 문자로 출력하기 위해 사용하는 하나의 방법
보간은 ${ } 형태로 사용함
console.log(myName); //HYEBIN
console.log(email); // happy123@naver.com
console.log(hello); // Hello HYEBIN?!
Number(숫자 데이터)
: 정수 및 부동소수점 숫자를 나타냄
let number = 123;
let opacity = 1.57;
console.log(number); // 123
console.log(opacity); // 1.57
Boolean(불린 데이터)
: true, false 두 가지 값밖에 없는 논리 데이터
let checked = true;
let isShow = false;
따옴표를 사용하고 있지 않기 때문에 문자 데이터 아님
console.log(checked); //true
console.log(isShow); //false
Undefined
: 값이 할당되지 않은 상태를 나타냄
let undef;
원래는 뒤에 = 이 나와서 값을 설정해줘야하는데, 그게 없는 상태임
이 상태를 undefined라는 하나의 데이터로 인식함
let obj = { abc: 123 };
객체 데이터는 { }(중괄호)로 열고 닫음
위 예제에서 abc는 속성임
console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj,xyz); // undefined
Null
: 어떤 값이 의도적으로 비어있음을 의미
let empty = null;
*undefined는 값을 할당하지 않은 것이고, null은 null값이라고 의도적으로 '명시'한 것
console.log(empty); //null
Object (객체 데이터)
: 여러 데이터를 Key:Value 형태로 저장함
{ } 중괄호 사용
let user = {
// Key: Value,
name: 'HAPPY' ,
age: 85,
isValid: True
};
console,log(user.name); // HAPPY
console.log(user.age); // 85
console.log(user.isValid); // true
Array(배열 데이터)
: 여러 데이터를 순차적으로 저장함
[ ] 대괄호 사용
let fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits[0]); //'Apple'
console.log(fruits[1]); //'Banana'
console.log(fruits[2]); //'Cherry'
프로퍼티(속성) 사용법
let user = {
name: 'HEROPY',
age: 85
};
console.log(user);
console.log(user.age);
여기에서 user.age는 user안에 있는 age라는 프로퍼티(속성)이라는 개념을 사용하겠다는 뜻
(콘솔로 출력하겠다)
변수
: 데이터를 저장하고 참조(사용)하는 데이터의 이름
var, let, const를 사용해서 변수를 만들어 냄
var는 자주 사용하지 않음 (사용하지 않는 것을 권장)
let
: 재사용이 가능
: 변수 선언
let a = 2;
let b = 5;
console.log(a + b); // 7
console.log(a - b); // -3
console.log(a * b); // 10
console.log(a / b); // 0.4
let으로 선언하고 선언한 것으로 사칙연산을 하는 등 재사용이 가능
// 값(데이터)의 재할당 가능
let a = 12;
console.log(a); // 12
a = 999;
console.log(a); // 999
const
: 값 재할당 불가능
const a = 12;
console.log(a); // 12
a = 999;
console.log(a); // TypeError: Assignment to constant variable.
=>
어떤 새로운 값을 다시 할당한다는 것을 전제로 하면
변수는 언제든지 값을 새롭게 할당 할 수 있도록 열려 있어야 하는데
그럼 내부적인 낭비가 너무 심해짐
거의 대부분의 경우 내부적인 낭비를 막기 위해 const를 사용하고
값을 재할당 해야 하는 경우 let으로 고쳐서 사용
예약어
: 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
Reserved Word
let this = 'Hello!'; // SyntaxError
let if = qwe; // SyntaxError
let break = true; // SyntaxError
(에디터를 이용해서 파악하는 것을 추천) 빨간 밑줄이 그어짐
함수
: 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)
functiion
함수 선언
: function helloFunc( ) {
실행 코드
console.log(1234);
}
함수 호출
helloFunc( ); //1234
=>함수는 function 함수이름 ( ) { } 순으로 작성함
function returnFunc( ) {
return 1234;
}
let a = returnFunc( );
console.log(a); //1234
return을 이용해서 데이터를 내보내기(반환)할 수 있고,
내보내진 값을 새로운 변수에 할당해서 추가적으로 사용할 수 있음
연습해보니 내가 하는 실수
console.log안에 함수 사용 가능
뒤에 ( ) 꼭 넣어주기
( )는 실행의 의미
함수 선언
function sum(a, b) { //a와 b는 매개변수(Parameters)
return a + b;
}
재사용
let a = sum(1, 2); // 1과 2는 인수(Arguments)
let b = sum(7, 12);
let c = sum(2. 4);
console.log(a, b, c); // 3, 19. 6
=> 인자를 받아서 함수를 실행해서 함수 밖으로 내보냄
ex) let c = sum(2, 4);에서 인자 2은 a, 인자 4는 b에 들어가서 a + b (= 2 + 4) 값을 출력하고, c가 받게 됨
*함수를 선언할 때 함수가 호출되는 부분에서 데이터를 집어 넣을 수 있고,
집어넣을 데이터를 받아줄 변수를 소괄호 사이에 정의할 수 있다
