JS 특징 1

표기법

dash-case(kebab-case)

hello-yello-green-apple
단어 사이에 '-'를 사용하는 방식
HTTML, CSS에서 주로 사용

snake_case

hello_yello_green_apple
단어 사이에 '_'를 사용하는 방식
HTTML, CSS에서 주로 사용

camelCase

helloYelloGreenApple
첫 번째 단어를 제외하고 단어 앞 글자에 대문자를 사용하는 방식
JS에서 주로 사용

ParcelCase

HelloYelloGreenApple
단어 앞 글자에 대문자를 사용하는 방식
JS에서 주로 사용

Zero-based Numbering

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

데이터 종류 (자료형)

String (문자데이터)

따옴표를 사용한다.

let myName = "pond_98";
let hello = 'Hello ${myName}';

console.log(myName); // pond_98
console.log(hello); // Hello pond_98

Number (숫자 데이터)

정수 및 부동소수점 숫자를 나타낸다.

let number = 123;
let opacity = 1.23;

console.log(number); // 123
console.log(opacity); // 1.23

Boolean (불린 데이터)

true, flase 두 가지 값밖에 없는 논리 데이터

let checked = true;
let fake = false;

console.log(checked); // true
console.log(fake); // false

Undefined

값이 할당되지 않은 상태를 나타낸다.

let undef;
let obj = { abc: 123 };

console.log(undef); // undefined
console.log(obj.abc); // 123
console.log(obj.def); // undefined

Null

어떤 값이 의도적으로 비어있음을 의미한다

let empty = null;

console.log(empty); // null

Object (객체 데이터)

여러 데이터를 Key:Value 형태로 저장한다.

let user = {
  // Key: Value,
  name: 'Pond_98',
  age: 27,
  isValued: true
};

console.log(user.name); // Pond_98
console.log(user.age); // 27
console.log(user.isValued); // true

Array (배열 데이터)

여러 데이터를 순차적으로 저장한다.

let fruits = ['Apple', 'Banna', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[0]); // 'Banna'
console.log(fruits[0]); // 'Cherry'

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름
ex) var, let, const

// 재사용 가능
// 변수 선언
let a = 2;
let b = 5;

console.log(a + b); // 7
console.log(a - b); // -3

// 값(데이터)의 재할당 가능
let a = 2;
console.log(a); // 2

a = 15;
console.log(a); // 15

// 값(데이터)의 재할당 불가
const a = 2;
console.log(a); // 2

a = 15;
console.log(a); // 에러 발생

예약어

특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어

let this = 'Hello'; // SyntaxError
let if = 123; // SyntaxError
let break = true; // SyntaxError

함수 (function)

특정 동작(기능)을 수행하는 일부 코드의 집합(부분)

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

// 함수 호출
helloFunc(); // 123

function returnFunc() {
  return 123;
}

let a = returnFunc();

console.log(a); // 123

function sum(a, b) { // a와 b는 매개변수(Parameters)
  return a + b;
}

// 재사용
let a = sum(1, 2); // 1과 2는 인수(Arguments)
let b = sun(5, 7)

console.log(a, b) // 3, 12

// 기명(이름이 있는) 함수
// 함수 선언
function hello() {
  console.log('Hello')
}

// 익명(이름이 없는) 함수
// 함수 표현
let world = function() {
  console.log('World')
}

// 함수 호출
hello() // Hello
world() // World

// 객체 데이터
const myData = {
  name: 'Pond_98'
  age: 27,
  // 메소드(Method)
  getName: function() {
    return this.name
  }
};

const hisName = myData.getName();
console.log(hisName); // Pond_98
console.log(myData.getName()); // Pond_98

조건문

조건의 결과(truthy, falsy)에 따라 다른 코드를 실행하는 구문

let isShow = true;
let checked = false;

if (isShow) { // if문이 참이기에 아래 코드 실행 
  console.log('Show'); //show
}

if (chekced) { // if문이 거짓이기에 아래 코드 미실행
  console.log('Chekced');
}

let isShow = true;

if (isShow) { 
  console.log('Show'); //show , isShow가 참이기에 해당 코드 실횅
} else {
  console.log('Hide'); // 만약 isShow가 거짓이면 해당 코드 실행
}