JavaScript 기초 정리

업데이트 21.03.22

변수 표기법

1) dash-case
'-'를 이용하여 변수를 표기하는 방법이다.
주로 HTML과 CSS에서 사용한다.
예제) the-dash-case

2) snake_case
'-'를 이용하여 변수를 표기하는 방법이다.
주로 HTML과 CSS에서 사용한다.
예제) the_snake_case

3) camelCase
첫 글자는 소문자로, 다음 단어의 첫 글자부터는 대문자로 변수를 표기하는 방법이다.
주로 JavaScript에서 사용한다.
예제) theCamelCase

4) PascalCase
모든 단어의 첫 글자를 대문자로 변수를 표기하는 방법이다.
예제) ThePascalCase

JavaScript 데이터 타입

1) string (문자/문자열 데이터)
백틱 (`), 따옴표 (", ') 로 문자열을 감싸 사용한다.
이때, 백틱을 사용하면 문자열 중간에 다른 데이터(변수)들을 사용할 수 있다.
이를 보관법이라고 한다.

  let myName = "KJH";
  let email = 'iwantbaobab@gmail.com';
  let hello = `Hello ${myName}?!`;

  console.log(myname);
  출력 결과 : KJH
  console.log(email);
  출력 결과 : iwantbaobab@gmail.com
  console.log(hello);
  출력 결과 : Hello KJH?!

2) number (숫자 데이터)
정수 및 부동 소수점을 표현할 때 사용하는 데이터 타입이다.

let number = 123;
let opacity = 1.57;

console.log(number);
출력 결과 : 123
console.log(opacity);
출력 결과 : 1.57

3) Boolean(불린 데이터)
true, false와 같은 논리 데이터를 표현하는 데이터 타입이다.

let checked = true;
let isShow = false;

console.log(checked); 
출력 결과 : true
console.log(isShow);  
출력 결과 : false

4) Undefined
값이 할당되지 않은 상태를 표현하는 데이터 타입이다.
이는, JS에만 있는 특이한 자료형이다.

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

console.log(undef);
출력 결과 : underfined
console.log(obj.abc);
출력 결과 : 123
console.log(obj.xyz);
출력 결과 : underfined

5) Null
어떤 값이 의도적으로 비어있는 데이터 타입이다.

let empty = null;
console.log(empty); 
출력 결과 : null

6) Object (객체 데이터)
여러 데이터를 Key: Value 형태로 저장하여 표현하는 데이터 타입이다.

let user = {
   name: 'KJH',
   age: 21,
   isValid: true
};

console.log(user.name); 
출력 결과 : KJH
console.log(user.age);
출력 결과 : 21
console.log(user.isValid);
출력 결과 : true

7) Array(배열 데이터)
여러 데이터를 순차적으로 저장하는 데이터 타입이다.
JS는 Zero-Based Numbering (0부터 index 번호)을 사용한다.

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

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

변수 기초 설명

let 변수는 수정이 가능한 변수로 재사용할 수 있으며, 다른 값 재할당이 가능하다.
반면 const 변수는 상수 개념으로 다른 값 재할당이 불가능하다.
var는 레거시 타입으로 사용하지 않는 게 좋다.

변수 생성 시 let을 사용하면, 내부 메모리 낭비가 생기기 때문에
가급적 const를 사용하여 최적화해야 한다.
나중에 변수 가공이 필요할 때 기존의 const 변수를 let 변수로 변경하는 것이 좋다.

JS도 다른 언어들과 마찬가지로 예약어는 사용 금지이다.

예약어란? 이미 특별한 의미를 가지고 있어 변수나 함수로 사용 불가능한 이름을 말한다.

함수 기초 설명

아래는 반환 값이 없는 함수이다.

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

출력 결과 : 1234

아래는 반환 값이 있는 함수이다.

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 = sum(3,4);     // 3,4는 인수(Arguments)이자 실인수 
console.log(a, b);    // 3, 7

지금까지 소개한 함수들은 다 이름이 있었는데, 이를 기명 함수라 부른다.
그렇다면 이름이 없는 함수들은 무엇이라 부를까?
바로, 익명 함수이다. 아래는 익명 함수의 예제이다.

익명 함수는 함수 선언이라 말하지 않고, 함수 '표현'이라 말한다.

let world = function () {
  console.log('World~');
}

// 함수 호출
world();

출력 결과 : World~

아래는 객체 데이터 타입 안에 있는 함수에 대한 설명이다.
만약, 함수가 객체 데이터 타입 안에 속성으로 있을 경우 이를 '메소드(Method)'라 부른다.

const kjh = {
name: 'kjh',
age: 21,
getName: function() {
  return this.name;
  // this란 소속되어 있는 객체의 데이터를 의미
}
};
// return 값 저장
const hisName = kjh.getName();

// hisName 값 출력
console.log(hisName);

출력 결과 : kjh

조건문

조건문이란, 'if', 'else' 키워드를 이용하여 조건에 부응할 때마다 각 대응 값을 주는 문법이다.
아래는 조건문을 사용하여 유저 정보가 존재(유효)하는 지 체크한다.

const kjh = {
  name: 'kjh',
  age: 21,
  getName: function() {
    return this.name;
  },
  isValid: true
};

// isValid가 false 값이면 kjh이 출력되지 않음.
if (kjh.isValid == true) {
  const hisName = kjh.getName();
  console.log(hisName);
}

출력 결과 : kjh

*JavaScript도 다른 언어들과 마찬가지로 if else 문도 사용 가능하다.

DOM API

1) DOM이란?
Document Object Model로 HTML의 구조들을 의미한다.

2) API란?
Application Programming Interface로 일종의 명령어 집합을 의미한다.

3) 그렇다면 DOM API는 무엇일까?
JavaScript로 HTML를 제어하는 일종의 명령어를 말한다.

4) DOM API 종류
A. document.querySelector('CSS 선택자');
-> 'CSS 선택자'에 해당하는 HTML 요소 1개 검색/찾기

아래는 사용 예제이다.

const boxEl = document.querySelector('.box');
// boxEl 변수에 '.box' CSS 선택자인 애들 중 첫 번째 요소 지정

B. document.querySelectorAll('CSS 선택자');
-> 'CSS 선택자'에 해당하는 모든 HTML 요소 검색/찾기

아래는 사용 예제이다.

const boxEl = document.querySelectorAll('.box');
// boxEl 변수에 '.box' CSS 선택자인 애들을 모두 지정

C. 요소.addEventListener('Event', 함수() {});
-> 이벤트 발생 시 함수 실행

아래는 사용 예제이다.

boxEl.addEventListener('click', function() {
  console.log('Click!!');
});
// boxEl 클릭 시 콘솔에 'Click!!' 출력

D. 요소.classList.add('추가할 클래스 문자열');
-> 선택된 요소의 클래스 이름에 문자열을 추가

아래는 사용 예제이다.

boxEl.classList.add('active');
// boxEl의 클래스 이름에 'active' 추가
// add를 remove로 변경하면 삭제 기능으로 바뀜

E. 요소.classList.contains('검사할 클래스 문자열');
-> 선택된 요소의 클래스 이름에 문자열이 있는지 검사

아래는 사용 예제이다.

boxEl.classList.contains('active')
// boxEl의 클래스 이름에 'active'가 포함되어 있는지 검사
// 있다면, true 반환 없으면, false 반환

F. 요소.forEach(function (요소) {} );
-> 선택된 요소에 여러 요소가 저장되어 있을 경우 사용
-> 저장되어 있는 모든 요소들에게 함수 반복

아래는 사용 예제이다.

// boxEls 요소 전부에게 적용하도록 반복
// 매개변수 boxEl(개별을 뜻함), index(인덱스 번호)
boxEls.forEach(function (boxEl, index) {
    // 클래스 이름 추가 'order-${index+1}'
    boxEl.classList.add(`order-${index+1}`);
    // console에 index 번호와 boxEl(html 내용) 출력
    console.log(index, boxEl);
  });

G. textContent
-> 요소의 text를 수정할 때 사용
-> Getter/Setter로 나뉨

아래는 사용 예제이다.

// Getter 값을 얻는 용도
// textContent = 텍스트만 가능
console.log(boxEl.textContent);
출력 결과 : boxEl의 텍스트 내용

// Setter 값을 지정(변경)하는 용도
boxEl.textContent = 'jhkim';
console.log(boxEl.textContent);
출력 결과 : jhkim

script 태그의 defer 속성

script 태그의 defer 속성을 사용하면, HTML 문서를 다 읽고난 후에 JS 파일을 불러오게 할 수 있다.
아래는 defer 속성의 사용 예제이다.

<script defer src="./main.js"></script>

메소드 체이닝

메소드 체이닝이란, 여러 메소드를 한 번에 사용하는 것을 말한다.
마치 이 모습이 체인처럼 엮여져있다 해서 메소드 체이닝이라 하는 것이다.
아래는 메소드 체이닝의 예제이다.

const a = "Hello";
const b = a.split('').reverse().join('');

console.log(a);
console.log(b);

출력 결과 : Hello
출력 결과 : olleH