JavaScript: JS 기초 Ep.1 (표기법, 제로 넘버링, 주석, 데이터 종류, 변수)

04 Aug 2022 • TIL

표기법 (프로그래밍 표기법)

  • dash-case(kebab-case)
    dash(-)기호를 사용하는 표기법이다. HTML, CSS에서 사용한다.
    꼬챙이에 끼운게 케밥처럼 생겼다고도 해서 케밥 케이스라고도 부른다.
    dash 기호를 붙여줌으로써 띄어쓰기를 대신하고 있다.
    ex) the-quick-brown-fox-jumps-over-the-lazy-dog
  • snake_case
    단어와 단어 사이에 underscore ()를 사용하여 하나로 묶어낸다. HTML, CSS에서 사용한다. ex) the_quick_brown_fox_jumps_over_the_lazy_dog
  • camelCase
    첫 글자는 소문자로 시작 그 다음부터 오는 단어들은 대문자로 시작하는 단어이다.
    낙타 혹 같아 보여서 카멜 케이스라고 부르며 JS에서 주로 사용한다.
    ex) theQuickBrownFoxJumpsOverTheLazyDog
  • ParcelCase
    첫 단어와 다음에 오는 단어 모두 대문자로 시작한다.
    카멜 케이스와 유사하지만 처음 단어를 대문자로 작성한다는 점이 다르다.
    추후, JS에서 New라는 키워드를 가지고 있는 생성자 함수를 배울 때 파스칼 케이스를 통해 함수의 이름을 명시한다. JS에서 사용한다. (이 중에서도 특수한 경우에 사용한다.)
    ex) TheQuickBrownFoxJumpsOverTheLazyDog

Zero-based Numbering

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

주석 Comments

// 한 줄 메모
/* 한 줄 메모 CSS처럼도 사용 가능*/

/* 여러줄 할 CSS형식이 좋다
 * 여러 줄
 * 메모1
 * 메모2
 */

데이터 종류 (자료형)

  • String 
    // String (문자 데이터)
// 따옴표를 사용합니다.
let myName = "SOHA"; // 큰 따옴표
let email = 'thesecon@gmail.com'; // 작은 따옴표
let hello = `Hello ${myName}?!`; //빽틱(`), 
// 그 문자 중간의 어딘가에다가 다른 데이터들을 '보간'해서 중간에 끼워넣을 수 있다.
// 보간법이라고 하며, 안에 js의 데이터들을 넣으면 된다. false, 123을 넣어도 문자처럼 출력된다.
  
console.log(myName); //SOHA
console.log(email); // thesecon@gmail.com
console.log(hello); // Hello SOHA?!
  • Number 
    // Number (숫자 데이터)
// 정수 및 부동소수점 숫자를 나타냅니다.
let number = 123; //number라는 변수에 숫자(정수)를 넣음
let opacity = 1.57; //opacity라는 변수에 숫자 (소수점)를 넣음
  
console.log(number); //123
console.log(opacity); //1.57
  • Boolean 
    // Boolean (불린 데이터)
// true, false 두 가지 값밖에 없는 논리 데이터입니다.
let checked = true; //따옴표가 없으니 문자 데이터가 아니다!
let isShow = false;
  
console.log(checked); //true
console.log(isShow); // false
  • Undefined 
    // Undefined
// 값이 할당되지 않은 상태를 나타냅니다. == 값이 없다
let undef;// 값이 없는 상태 = js는 이 상태를 undefined라는 하나의 데이터로 인식
let obj = { abc: 123 }; //obj 데이터는 {안에 속성: 값} 데이터들의 집합
  
console.log(undef); // undefined
console.log(obj.abc): // 123, obj라는 변수에 가서 abc라는 하나의 속성의 값이 무엇?
console.log(obj.xyz); // undefined
  • Null 
    // Null
// 어떤 값이 '의도적으로' 비어있음을 의미합니다.
// undef는 의도하지 않았지만 null은 의도적으로 비어있게 만듦
let empty = null; // 명시적이다. null을 넣었으므로, 의도적으로 값을 넣지 않았다. 
  
console.log(empty); // null
  • Object 
    // Object(객체 데이터)
// 여러 데이터를 Key:Value 형태로 저장하는 데이터들의 집합. { }
let user = {
  // Key: Value,
  name: 'SOHA',
  age: 85,
  isValid: true
}; // 중괄호 시작과 끝 사이의 모든 내용을 user라는 변수에 감아서 사용
// 객체데이터 안에서 구현하는 방식을 가지고서 이러한 형태를 Key: Value라 함.
// name, age, isValid라는 각각의 데이터들을 하나의 객체데이터로써 user에 넣는다.
  
console.log(user.name); // SOHA , user안의 데이터를 사용할때 .을 사용하여 추출
console.log(user.age); // 85
console.log(user.isValid); // true
  • Array 
    // Array (배열 데이터)
// 여러 데이터를 순차적으로 저장합니다. [ ] (대괄호를 사용)
let fruits = ['Apple', 'Banana', 'Cherry']; //쉼표(,)로 데이터를 구분
// 따옴표가 있네? == 문자데이터
console.log(fruits[0]); // 'Apple'
console.log(fruits[1]); // 'Banana'
console.log(fruits[2]); // 'Cherry'

변수

데이터를 저장하고 참조(사용)하는 데이터의 이름

  • 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 a = 12; //let을 통해 a라는 변수 선언
console.log(a); // 12
  
a = 999; // a 변수에 값 재할당
console.log(a); // 999
  • const 
    // 값(데이터)의 재할당 불가
const a = 12; //선언
console.log(a); // 12
  
a = 999; //재할당 -> 타입 에러 (재할당 불가!) 처음 선언할 때의 값을 제외하고는 값을 선언할 수 없음
console.log(a); // TypeError: Assignment to constant variable.
  
// 거의 대부분의 경우에 const를 사용
// 재할당을 해야하는 부분일 때 const를 let으로 고쳐서 사용한다.
  • var 사용하는 것을 권장하지 않는다.
 TIL  JS

Comments

Related Posts