Taeyoung Kim(RaccoonCode96)

Go for IT! Raccooncode’s TIL blog.

20210521 JavaSciprt 06 : 표기법(case), 주석, 데이터 종류, 변수, 예약어, 함수, DOM API, 메소드 체이닝

3 분 소요

JavaScript06

JavaScript : 표기법

  • dash-case(kebab-case)
    • 단어와 단어 사이를 대쉬를 사용(띄어쓰기를 대신해서)
    • HTML , CSS에서 많이 사용
  • snake_case
    • 단어와 단어 사이를 언더바를 사용
    • HTML, CSS에서 많이 사용
  • camelCase
    • 첫글자를 소문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기
    • JS에서 많이 사용
  • PascalCase
    • 첫글자도 대문자로 하고 그 다음 단어의 첫글자 마다 대문자로 표기
    • JS에서 많이 사용(JS에서도 특수한 경우)
  • Zero-based Numbering
    • 0 기반 번호 매기기
    • 특수한 경우를 제외하고 0부터 숫자를 시작
    • 요일의 경우 0을 일요일로 표시하여 커짐


JavaScript : 주석

  • ctrl + /
// 한 줄 메모
/* 한 줄 메모 */

/*
 여러줄 1
 여러줄
 메모1
 메모2
*/


JavaScript : 데이터 종류

  • JavaScript 는 데이터를 기준으로 사고 해야함.


이름 설명
String (문자 데이터) 따옴표를 사용 (큰따옴표, 작은 따옴표, 백틱)
Number (숫자 데이터) 정수 및 부동소수점 숫자
Boolean (불린 데이터) true, false 두가지 값이 있는 논리 데이터
Undefined 값이 할당되지 않은 상태 예) let undef;
Null 어떤 값이 의도적으로 비어있을 의미 (값이 없다는 것을 명시함)
Object (객체 데이터) 여러 데이터를 Key: Value 형태로 저장 {} 사용 . 또는 [] 을 통해서 특정 key에 접근 가능
Array (배열 데이터) 여러 데이터를 순차적으로 저장 (쉼표로 구분해서 저장) []


JavaScript : 변수

  • 데이터를 저장하고 참조(사용)하는 데이터의 이름
  • var(최근 쓰지 않음), let, const
  • 변수 선언 : 변수명을 명시하고 값을 할당 하는 것
  • let : 재할당 가능 (재할당 해야 하는 경우 const 를 let으로 수정하는 방법이 좋음)
  • const : 재할당 불가능 (대부분 const 사용)


JavaScript : 예약어

  • 특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
  • this, if, break 등의 어떤 기능을 하는 이름으로 변수명, 함수명 불가


JavaScript : 함수

  • 특정 동작 기능을 수행하는 일부 코드들의 집합 (function)
// 함수 선언
function sum(a, b) {
  // 매개변수(Parameters) a, b
  // 실행(명령) 코드
  console.log(`a: ${a}, b: ${b}`);
  // 반환 (값을 내보냄)
  return a + b;
}
// 함수 호출시 인수를 넣을 수 있음
sum(1, 2); // 1,2 는 인수(Arguments)
// a: 1, b: 2

// 함수 호출시 반환되는 데이터를 변수에 할당
let res = sum(2, 2); // a: 2, b: 2
console.log(res); // 4
  • 함수 선언 : function 키워드와 함께 함수명을 명시해서 함수를 만드는 것
  • 함수 표현 : function 키워드는 있지만 함수명 없이 익명 함수를 만들때 호출을 위해서, 함수를 변수명에 할당하는 것을 말함
  • 메소드(Method) : 객체 데이터의 속성이 함수데이터를 가지는 경우 해당 속성을 메소드라고 부름


JavaScript : DOM API

  • Document Object Model : HTML 요소들
  • Application Programming Interface : 동작하기 위한 명령

  • html script 요소의 defer : 해당 script 파일을 나중에 다운 받게 우선순위를 낮출 수 있음

    • html이 먼저 다 읽혀야 요소들을 제어하는 JS 파일이 해당 요소를 인식할 수 있기 때문에
  • document : html의 요소들로 구성되어 조작 할수 있게 하는 기반
  • querySelector : 가장 먼저 찾아진 요소 하나를 반환함
  • addEventListener : 앞으로의 발생할 상황을 듣고 있음
  • ClassList : 해당 요소의 여러개의 class를 조작 할수 있게 하는 기반
  • contains() : classList 확인 함수
// HTML 요소(Element) 1개 검색/찾기
const boxEl = document.querySelector(".box"); // 가장 먼저 찾아진 요소를 반환함

// HTML 요소에 적용할 수 있는 메소드
// 인수 추가 가능
// 첫번째에 넣을 인수 : 이벤트(Event, 상황) -> 청취
// 두번째에 넣을 인수 : 핸들러(Handler, 실행할 함수)
boxEl.addEventListener("click", function () {
  console.log("Box was Clicked!");
});

// 요소의 클래스 정보 객체 활용 (ClassList)
boxEl.classList.add("active");
let isContains = boxEl.classList.contains("active");
console.log(isContains); // true

boxEl.classList.remove("active");
isContains = boxEl.classList.contains("active");
console.log(isContains); // false
  • querySelectorAll : 해당 조건에 만족하는 요소들 모두를 배열로 반환
  • forEach : 위의 배열 데이터를 loop하기 좋음
// HTML 요소 모두 검색/ 찾기
const boxEls = document.querySelectorAll(".box");
console.log(boxEls);
// NodeList(4) [div.box, div.box, div.box, div.box]

// 찾은 요소들 반복해서 함수 실행!
// 익명 함수를 인수로 추가

boxEls.forEach(function (boxEl, index) {
  boxEl.classList.add(`order-${index + 1}`);
  console.log(index, boxEl);
});
// 0 <div class=​"box order-1">​1​</div>​
// 1 <div class=​"box order-2">​2​</div>​
// 2 <div class=​"box order-3">​3​</div>​
// 3 <div class=​"box order-4">​4​</div>​
  • textContent : 값을 얻거나 지정하는 용도 (Getter, Setter), 공백 포함
  • innerText : 값을 얻거나 지정하는 용도, 표시되는 화면 그대로 text를 가져옴 (공백이 제거 되기 떄문에)
const boxEl = document.querySelector(".box");

// Getter 값을 얻는 용도
console.log(boxEl.textContent); // box

// Setter 값을 지정하는 용도
boxEl.textContent = "this textContent was Updated";
console.log(boxEl.textContent); // this textContent was Updated
  • textContent vs innerText
    • innerText는 불필요한 공백을 제거해서 가져옴 (즉, 일반적으로 페이지에 표시되는 모양대로)
    • textContent는 수정한 값 있는 그대로 가져옴
    • html에서 일반적으로 표시할때 그냥 space는 무시됨
boxEl.textContent = " this   textContent   was   Updated  ";
console.log(boxEl.innerText); // this textContent was Updated
console.log(boxEl.textContent); //  this  textContent  was  Updated


JavaScript : 메소드 체이닝

  • split : 문자를 첫번째 인수(구분자) 기준으로 쪼개서 배열로 반환
  • reverse : 배열 뒤집기

  • join : 배열을 첫번째 인수(구분자) 기준으로 문자로 병합해 반환

  • return type과 받는 type이 같아야 메소드 체이닝이 가능함
    • String.split(): string[]
    • Array<string>.reverse(): string[] :
    • Array<string>.join(separator?: string): string
const a = "Hi~";
const b = a.split("").reverse().join("");
console.log(a); // Hi~
console.log(b); // ~iH

참고