자바스크립트

Ryan Kim·2021년 7월 17일
0

1. 표기법

  • dash-case(kebab-case)
  • snake_case
  • camelCase
  • ParcelCase

1.1 dash-case(kebab-case)

띄어쓰기를 -로 나타냄.

컴퓨터는 form부터 function까지 하나의 단어로 인식하지만 우리는 각각 단어별로 띄어서 인식.
html과 css에서 주로 단어를 표기하는 방법으로 사용된다.

1.2 snake_case

띄어쓰기를언더바로나타냄.
html과 css에서 주로 사용.

1.3 camelCase

theQuickBrownFoxJumpsOverTheLazyDog
첫 글자는 소문자로, 나머지 단어는 대문자로 시작하며 이 모양새가 낙타의 혹처럼 보인다고 하여 카멜 케이스라 불림.
우리가 알고있는 단어들을 조합해서 하나로 컴퓨터에게 인식시키고자 할 때 사용한다.
dash-case, snake_case, camelCase, PascalCase 모두 자바스크립트에서 사용 가능 하지만 거의 대부분 camelCase를 주로 사용한다.

1.4 PascalCase

TheQuickBrownFoxJumpsOverTheLazyDog
첫 글자부터 단어를 대문자로 시작한다.
생성자 함수 사용시 PascalCase를 통해 함수의 이름을 명시한다.

1.5 Zero-based Numbering

다른 개발 언어들처럼 자바스크립트도 특수한 몇가지 경우를 제외하면 0부터 숫자를 시작한다.

let fruits = ['Orange', 'Strawberry', 'Apple']
console.log(fruits[0]); // 'Orange'
console.log(fruits[1]); // 'Strawberry'
console.log(fruits[2]); // 'Apple'

Orange는 첫번째가 아니라 0번째 이다.

1.6 주석(Comments)

html, css와 다르게 주석처리의 종류가 여러가지이다.

//한줄짜리 주석 처리 첫번째 방법
/*한줄짜리 주석 처리 두번째 방법*/

/**
여러 줄의 주석
처리 방법은
이렇게.
*/

2. 자료형(Data Type)

  • String
  • Number
  • Boolean
  • Undefined
  • Null
  • Object
  • Array

2.1 String(문자열)

// String(문자열)
// 큰따옴표나 작은따옴표 사용.
// let 변수명 = '문자열'; 형식으로 변수를 선언한다.
let myName = "RYANKIM";
let email = 'blabla@gmail.com';
let hello = `Hello ${myName}?!`
//`(백틱) 기호를 사용하여 보간법으로 ${myName} 즉 myname 변수의 값인 RYANKIM 도 끼워넣음.

console.log(myName); // RYANKIM
console.log(email); // blabla@gmail.com
console.log(hello); // Hello RYANKIM?!

2.2 Number(숫자 데이터)

//Number(숫자 데이터)
// 정수 및 부동소수점 숫자를 나타낸다.
// 변수에 할당한 값이 숫자이더라도 따옴표로 감싸게 되면 넘버 타입이 아닌 스트링 타입으로 문자로 인식됨!
let number = 365;
let opacity = 3.54;

console.log(number); // 365
console.log(opacity); // 3.54

2.3 Boolean(불린 데이터)

// Boolean(불린 데이터)
// true, false 두 가지 값밖에 없는 논리 데이터이다.
let checked = true;
let isShow = false;

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

2.4 Undefined

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

let undef; // 변수에 값을 할당하지 않은 상태를 자바스크립트에서는 undefined라는 하나의 데이터 타입으로 인식한다.
let obj = { abc: 123 }; // 변수 obj에 객체 데이터(object)를 할당함.

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

2.5 Null

// Null
/** 어떤 값이 '의도적으로' 비어있음을 의미한다. Undefined랑 헷갈리지 말기!
undefined와 null 둘다 비어있음은 동일하나 undefined는 의도적으로 비운게 아님.
let empty = null; // let 변수명 = null; 으로 명시적으로 값이 비어있는 상태(null)임을 선언함.

console.log(empty); // null

2.6 Object(객체 데이터)

// Object(객체 데이터)
// 여러 데이터를 Key: Value 형태로 저장한다. {}
let user = {
  // Key: Value
  name: "KIM",
  age: 88,
  isValid: true
};

console.log(user.name); // KIM
console.log(user.age); // 85
console.log(user.isValid); // true

2.7 Array(배열 데이터)

// Array(배열 데이터)
// 여러 데이터를 순차적으로 저장한다.

let fruits = ['apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

3. 변수

데이터를 저장하고 참조(사용)하는 데이터의 이름이며 var, let, const 를 사용하여 변수를 선언하는데 최근에는 var를 가급적 사용하지 않는것을 권장.
let으로 선언시 재사용 가능
let 사용시 재할당 가능, const(상수: 변하지 않는 값) 사용시 재할당 불가능
변수를 만들때 값이 계속 바뀔 수 있는 상태로 두기 보다는 재할당이 불가능한 const 키워드로 사용하고 재할당이 필요한 경우에만 let 키워드를 사용하는게 좋다.

3.1 예약어

특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용할 수 없는 단어를 말한다.
(ex: this, if, break 등등..)

profile
블로그 이사갔어요~ https://ryan-kim-dev.tistory.com/

0개의 댓글