끄적

2022.04.20

JS 타입 (자료형 Data Type)

원시형과 참조형
데이터의 불변성으로 구분
원시형이 할당될 때에는 변수에 값(value) 자체가 담긴다
참조형이 할당될 때는 보관함의 주소(reference)가 담긴다

원시자료형(Primitive data type)

• 문자(String)
• 숫자(Number)
• 불린(Boolean)
• 심볼(Symbol)
• null
• undefined
• Bigint

참조자료형(Reference data type)

• 객체(object)
• 배열(array)
• 함수(function)

문자(String)

'Hello'
"Hello"
`Hello` //보간법. 어떤 데이터를 중간에 끼워넣을때 ${}
const abc = 'ABC'
console.log(`Hello ${abc}`) // Hello ABC

const abc = 'ABC'
변수=그릇. 특정한 메모리를 참조하는 이름. 메모리주소

숫자(Number)

NaN(Not a Number): 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력되는 값

const a = 1
const b = undefined
console.log(a * b) //NaN 
console.log(typeof(a * b)) //number

불린(Boolean)

true
false

null

값은 있지만 없다고 명시적으로 써주는것
null로(값이)할당된 상태. 즉 자료형이 정해진(defined)상태
존재하지 않는, 비어 있는, 알 수 없는 값을 _명시적_으로 나타냄

undefined

암시적으로 아무것도 없을 의미
어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined)않은 상태
값이 할당되지 않은 상태를 _암시적_으로 나타냄

null == undefined가 ture로 나오는 이유

자바스크립트 ==(동등연산자)의 자동 형변환 기능때문에
자바스크립트 ===(일치연산자)를 사용하면 결과가 다르게 나오는걸 확인가능. 일치연산자는 메모리주소로 비교함

console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(1 == '1') // true
console.log(1 === '1') // false

심볼(Symbol)

유일한 식별자(ID) 데이터 이름을 만들때 사용

const a = Symbol('Hello') // 설명
const b = Symbol('Hello') // 설명
console.log(a == b) //false
// 객체 리터럴 {} 을 사용해 객체를 만든 경우, 대괄호를 사용해 심볼형 키를 만들어야 함
const user = {
    name: 'Sunny',
      [a]: 123
}

BigInt

제약 없이 정수를 다룰 수 있게 해주는 정수

console.log(123n) // 뒤에 n
console.log(1n + 2n) // 3n

console.log(Number(1n + 2n)) //3

배열

대괄호[]안에 자료형들이 들어갈 수 있음

const a = [1, '2', 3, {}, () => {}]
배열은 0부터 시작. index번호라 부르며 index번호로 조회하는걸 indexing(인덱싱)이라 부름
console.log(a[3]) // {}
// 리터럴 방식: 기호를 통해서(배열, 객체, 문자)데이터를 생성하는 것
const a = new Array ('apple', 'banana', 'cherry' )
const a = ['apple', 'banana', 'cherry' ]

객체(Object)

// key: Value
const obj = {
  a: 'Apple',
  b: 'banana',
  'casdfsad@#$%#$ASDasdf': 'cherry',
  b: 'berry'
}
console.log(obj['casdfsad@#$%#$ASDasdf']); //cherry
console.log(obj.a) //점 표기법 Apple
console.log(obj['a']) //괄호(bracket) 표기법 Apple
//value에는 다양한 데이터들이 들어갈 수 있다
//키가 중복되면 마지막에 써있는 키만 적용된다

코드의 변수나 함수등에 언더바(_) 사용하는 이유?

스코프 구분에 따른 표시(숨기는 용도로 많이씀).
해당 콘텍스트에 선언하여 사용되는 고유의 스코프영역에서만 사용할 것임을 직관적으로 알림

함수(Function)

함수도 하나의 데이터다
명령을 감싸는 역할을 하며 입구를 만들고 출구로 반환(return)을 할 수 있음
함수의 선언과 표현

함수 선언(호이스팅가능). 기명함수
function ab() {
}
함수 표현(호이스팅불가능). 어딘가에 할당하고 있다. 익명함수
const ab = function () {
}

Truthy & Falsy

Trutyh: true 같은
Falsy: false 같은

// Falsy
if (false)       
if (null)
if (undefined)
if (0)
if (-0)
if (NaN)
if ('')
if (0n)

자료형 확인

• typeof 데이터
• 데이터.constructor
• Object.prototype.toString.call(데이터)

변수

const, let, var
데이터를 담아놓는 하나의 그릇. 즉, 메모리에 있는 주소를 들고 있는
const와 let중 어떤걸 쓸지 고민될 떄 우선 const를 쓰고 재할당이 필요할 때 let쓰기

1. const(상수: 변하지 않는값 constant)
   • 유효범위: 블록 레벨
   • 재할당: 불가능
   • 중복 선언: 불가능
   • 호이스팅(Hoisting): 불가능
   • 전역 등록: 불가능
2. let(변수: variable. 변하는 값)
   • 유효범위: 블록 레벨
   • 재할당: 가능
   • 중복 선언: 불가능
   • 호이스팅(Hoisting): 불가능
   • 전역 등록: 불가능
3. var(쓰지 마세요 추억으로 사라질 거에요)
   • 유효범위: 함수 레벨
   • 재할당: 가능
   • 중복 선언: 가능
   • 호이스팅(Hoisting): 가능
   • 전역 등록: 가능

• 유효범위(scope)
  블록스코프: 중괄호 {}로 감싸진 범위
  함수스코프: 블록 스코프 중 함수 function(){}범위를 갖는 스코프
• 재할당
• 중복선언(똑같은 변수이름이 두개이상일때)
• 호이스팅(Hoisting)
  JS는 위에서 부터 아래로 읽어내려가는 형식인데 밑에있는걸 위로 끌어올려서 선언시키는것
  즉, 선언부를 유효한범위의 최상위로 끌어올리는 현상
• 전역(Global)선언시 전역 객체(window)의 속성으로 등록

2022.04.07

표기법

1. dash-case(kebab-case): 대시기호를 사용해 띄어쓰기를 대신함. 주로 html, css에서 사용
2. snake_case: 언더바로 구분 주로 html, css에서 사용
3. camelCase(낙타표기법): 주로 js에서 사용
4. PascalCase: 가장 앞에있는단어도 대문자. 주로 js
5. Zero-based Numbering: 0기반 번호 매기기. 특수한 경우를 제외하고 0부터 숫자시작

• 데이터 종류(자료형)

  • String(문자 데이터). 따옴표를 사용

    let myName = "SUNNY"; --> 큰따옴표 사용 
    let email = 'email@email.com'; --> 따옴표 사용 
    let hello = `Hello ${myName}-->보간법!`; --> 백틱을 사용하게 되면 보간법 사용 가능 
    console.log(hello); --> Hello SUNNY!

  • Number(숫자 데이터). 정수 및 부동소수점 숫자를 나타냄

    let number = 123; 
    let opacity = 1.57 --> 부동 소수점

  • Boolean(불린 데이터). true, false 두가지값에 없는 논리 데이터
  • Undefined(값이 할당되지 않은 상태)

    let undef; --> js는 undefined라는 하나의 값이 있는 상태로 인식함 
    let obj = { abc: 123 }; -->객체 데이터. abc라는 속성안에 123라는 값을 넣어줌

  • null(어떤 값이 의도적으로 비어있음을 의미함)

    null과 undefined : 무언가가 없다는건 같지만 의도적이냐 아니냐에 따라 구분되어진다

  • Object(객체 데이터). 여러 데이터를 Key:Value 형태로 저장 {} 중괄호 사용

    let user = { 
    //key: Value, 
    name: 'Sunny', 
    age: 92, 
    isValid: true }; 
    console.log(user.age); //92

  • Array(배열 데이터). 여러 데이터를 순차적으로 저장 [] 대괄호 사용

• 변수
  데이터를 저장하고 참조(사용)하는 데이터의 이름
  let, const, var
  변수는 재사용 가능
  let = 값(데이터)의 재할당 가능
  const = 값(데이터)의 재할당 불가능

• 예약어
  특별한 의미를 가지고 있어, 변수나 함수 이름 등으로 사용할 수 없는 단어
  this, if, break ... --> SyntaxError

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

  1.  // 함수 선언
      function hellFunc() { 
      // 실행 코드 
      } 
      // 함수 호출 
      hellFunc();
  
  2.  // returnFunc()라는 함수가 return 123을 반환하고, 
      // a라는 변수가 returnFunc()함수를 호출(실행)해서 console.log를 출력함
      function returnFunc() { 
      return 123; 
      } 
      let a = returnFunc(); //console.log(a);
  
  3.  // 함수 선언!
      function sum(a, b) { //a와 b는 매개변수 (Parameters) 
      return a + b; 
      } 
      //재사용 
      let a = sum(1, 2) // 1과 2는 인수 (Arguments) 
  
      console.log(a); // 3
  
  4.  // 기명(이름이 있는)함수
      //함수 선언
      function hello() {
        console.log(123);
      }
      hello(); // 123
  
  5.  //익명(이름이 없는)함수. 이름은 선언하지 않았기 때문에 호출을 할 수 없어서 변수와 함께 사용
      //함수 표현
      let num = function () {
        console.log(456);
      }
      num(); // 456
  
  6.  //객체 데이터
      const sunny { 
        name: 'Yu', 
        age: 92, 
        //메소드(method) 
        //객체데이더 내부의 속성에 함수가 할당되어 있는것. 
        //함수를 데이터 처럼 표현할 수 있다 
        getName: function () { 
        return this.name; 
        // this란 this가 소속되 있는 객체데이터 
        } 
      }; 
      console.log(sunny.getName()); // Yu

• 조건문
  조건의 결과에 따라 다른 코드를 실행하는 구문

  if, else 
  let isShow = true; 
  let checked = false; 
  //if 
  if(isShow) { 
  console.log('wow'); // wow 
  } 
  if(checked) {
  console.log('yeah'); // 
  } 
  //else 
  if(checked) { 
  console.log('wow'); 
  } else { 
  console.log('yeah'); 
  } //yeah

• DOM API
  자바스크립트에서 HTML을 제어하기위한 명령들
  Document Object Model(HTML의 div, span, input ...),
  Application Programming Interface(애플리캐이션이 동작하기 위한 명령)

  // HTML 요소 (Element) 1개 검색/찾기
  const boxEl = document.querySelector('.box');
  // HTML 요소에 적용할 수 있는 메소드
  boxEl.addEventListener(); --> 인수(Arguments) 추가 가능
  // 핸들러(handler, 실행할 함수)
  -> boxEl.addEventListener('click', function(){
    console.log('wow');
  })
  // 요소의 클래스 정보 객체 활용
  boxEl.classList.add('active');
  let isContains = boxEl.classList.contains('active');
  console.log(isContains); // true
  boxEl.classList.remove('active');
  let isContains = boxEl.classList.contains('remove');
  console.log(isContains); // false
  
  // HTML 요소(Element) 모두 검색/찾기
  const boxEls = document.querySelectorAll('.box');
  // forEach 찾은 요소들 반복해서 함수 실행
  // 익명 함수를 인수로 추가
  // boxEls --> 유사배열
  // boxEl: 반복 중인 요소, index: 반복 중인 번호
  boxEls.forEach(function (boxEl, index){
    boxEl.classList.add(`order-${index + 1}`);
    console.log(index, boxEl);
  }) 
  
  const boxEl = document.querySelector('.box');
  // Getter, 값을 얻는 용도
  console.log(boxEl.textContent);
  // Setter, 값을 지정하는 용도
  boxEl.textContent = 'Sunny';
  console.log(boxEl.textContent);

• 메소드 체이닝
  여러 메소드를 이어서 호출하는 문법
  코드가 간결해져 하나의 문장처럼 읽히게 할 수 있고, 유지보수에 도움이 됨

  const a = 'hell'; 
  const b = a.split('').reverse().join(''); 
  // 메소드 체이닝 
  // split: 문자를 인수 기준으로 쪼개서 배열로 변환 
  // reverse: 배열을 뒤집기 
  // join: 배열을 인수 기준으로 문자로 병합해 반환 
  console.log(b) // lleh