---

220525

---

JavaScriprt 배열까지 정리

---

자바스크립트

지금 우리가 사용하는 JS는 ES6으로 `const`, `let`, `Promise`, `Arrow function`, `class` 등의 문법들이 대거 추가되었다.

자바스크립트 삽입위치

• head, body의 문서 처음, 중간, 끝
• 보통 body의 맨 끝

자바스크립트 출력하는 방법

• 문서내에 요소를 선택하여 출력하는 방법(innerHTML, innerText 등)

• 문서내에 직접 출력하는 방법(write 등)

• 사용자 인터렉션(alert, confirm 등)

• 콘솔에 찍는 방법(console.log, console.table, console.error 등)

코드 구조

• 문(statement)은 세미콜론으로 구분한다.
  (세미콜론을 붙이지 않는 곳도 있다.)
• 문은 값, 연산자, 키워드, 명령어, 표현식(값으로 평가, 함수나 key, index를 통한 값의 호출도 표현식)
• 공백 병합

주석

// : 한줄 주석

/* */ : 여러줄 주석

엄격모드

• ES5에서 최신 문법들이 많이 추가가 되면서 기존의 문법을 변경하는 문법도 나왔는데, 이러한 문법들은 기존 코드의 문제를 일으킬 수 있기 때문에 use strict라는 지시자를 통해 엄격모드를 활성화 했을 때에만 반영한다.
• class 문법의 경우 엄격 모드가 기본이다.

"use strict";
// 코드

변수

• 변수 이름 규칙
  • 변수는 숫자로 시작할 수 없다.
  • 띄어쓰기가 안된다.
  • 예약어를 사욜할 수 없다.(예약어가 사용 불가능한 것은 아니다.)
  • $, _를 제외한 특수문자를 사용하지 않는다.
  • 대소문자를 구분한다.
  • class는 첫 문자를 대문자로, 나머지는 보통 소문자로 시작한다.
• var, let, const
  • var (ES5 이전, 지금 사용 권장X) : 함수 레벨 스코프, 재선언시 애러 X
  • let(ES5) : 블록 레벨 스코프, 재선언시 에러O, 콘솔에서는 애러 X, 변경가능한 자료형
  • const(ES6) : 블록 레벨 스코프, 재선언시 애러 O, 콘솔에서는 애러 X, 변경이 불가능한 자료형(상수)

    if (true) {
        const testName = 'hojun'
        let testAge = 10
    }
    if (true) {
        var testName2 = 'hojun'
        var testAge2 = 10
    }

연산

• 산술 연산자(+, -, /, *, **, %)
• 할당 연산자(=, +=, -=, /=, *=, **=, %=)
• 논리 연산자(&&, ||, !, !!, &, |)
  • 참 -> true -> 1
  • 거짓 -> false -> 0
  • &&는 곱
  • ||는 합
  • !는 부정
• 비교 연산자(>, >=, <, <=, ==, !=, ===, !==)
• 단항 산술 연산자(++x, x++, --x, x--)
• nullish 병합 연산자(??)
• typeof 연산자
• 프로퍼티 접근 연산자
  • 마침표 프로퍼티 접근 연산자
  • 대괄호 프로퍼티 접근 연산자
• 관계 연산자
  • 키만 가지고 판단

변수의 형

변수 (타입, typeof로 확인 가능)

• 원시타입(primitive types) : number, string, boolean, null, undefined, symbol(ES6 추가, 변경 불가능한 유일한 값)

• 참조타입(reperence types) : object(object, array, map, set), function

• Number(숫자)

  • 형태 : 10, 10.123, -10

  • 호출 : 변수명

  • 메서드

    • 10.toString()는 안됩니다. 이누는 무엇일까요? 소수점 때문에 그렇습니다. (JavaScript의 Parsing때문이고, 아는 분이 많지 않다.)
    • (10).toString()와 변수명.toString()은 가능합니다.
    • num.toFixed()

  • Number()

  • parseInt() - 권고, parseFloat()

  • Math

    • Math.PI
      // 원주율

    • Math.max()
      // 가장 큰 숫자 반환

    • Math.min()
      // 가장 작은 숫자 반환

    • Math.floor()
      // 지정된 숫자보다 작거나 같은 가장 큰 수를 반환
      

    • Math.round()
      // 입력값을 반올림한 수와 가장 가까운 정수 값을 반환

    • Math.random()
      // 암호학적으로 안전한 아무숫자를 반환

    • Math.abs()
      // 주어진 숫자의 절대값을 반환

    • Math.sqrt()
      // 숫자의 제곱근을 반환

    • Math.pow(base, exponent)
      // exponent의 거듭제곱으로 base를 올린다.

  • NaN

  • Infinity, -Infinity

• String(문자열)

  • 형태 : 'abcde', "abcde", abcde ${변수명}
  • 호출 : 변수명, 변수명0
  • 메서드 :
    • str.length // 문자열의 길이를 나타낸다.
    • str.indexOf() // 문자열(string)에서 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴합니다.
    • str.lastIndexOf() // 문자열 내에서 searchValue가 마지막으로 등장하는 인덱스. 등장하지 않으면 -1.
    • str.includes() // 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환합니다.
    • str.slice() // 문자열의 일부를 추출하면서 새로운 문자열을 반환합니다.
    • str.split() // 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
    • str.substring() // 메소드는 string 객체의 시작 인덱스로 부터 종료 인덱스 전 까지 문자열의 부분 문자열을 반환합니다.
    • str.substr() // 문자열에서 특정 위치에서 시작하여 특정 문자 수 만큼의 문자들을 반환합니다.
    • str.toLowerCase() // 문자열을 소문자로 변환해 반환합니다.
    • str.toUpperCase() // 문자열을 대문자로 변환해 반환합니다.
    • str.trim() // 문자열 양 끝의 공백을 제거합니다.
    • str.replace() // 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환합니다.
    • str.concat() // 매개변수로 전달된 모든 문자열을 호출 문자열에 붙인 새로운 문자열을 반환합니다.
    • str.repeat() // 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다.

• Boolean(논리값)

  • 형태 : true, false
  • 호출 : 변수명
  • 어떤 것이 true이고 어떤 것이 false인지 판단할 수 있어야 한다.

• undefine : undefind

  • 형태 : let a, console.log(a)

• null : object

  • 형태 : let a = null

• Array(배열) : object

  • 형태 : ['하나', '둘', '셋'],[100, 200, 300]
  • 호출 : 변수명, 변수명[0], 변수명[0][0] (변수명[index])
  • 메서드
    • length
    • forEach
    • map
    • filter
    • push / pop - mutable
    • slice - immutable
    • splice - mutable
    • reduce - immutable
    • join
    • indexOf
    • includes
    • find
    • concat
    • every
    • some
    • fill — mutable
    • shift — mutable
    • unshift — mutable
    • reverse — mutable
    • sort — mutable

Array(100).fill(0)
Array(100).('hello')
Array(100).fill('hello'.repeat(2))
Array(100).fill(0).map((value, index=> value + index))

• Object(객체)

  • 형태 :

  {
  	"지역이름": "전국",
    "확진자수": 24889,
    "격리해체수": 23030,
    "사망자수": 438,
    "십만명당발생율": 48.0
  }
  {
  	'one' : 1,
    'o n e' : 1,
  	'1 one' : 1
  }
  {
  	one : 1,
    o n e : 1, //error
    1 one : 1 //error  
  }
  let x=1, y=2, z=3
  let object = {x, y, z} //{x: 1, y: 2, z: 3}

  • 호출 : 변수명, 변수명.지역이름, 변수명['지역이름'] (변수명.key, 변수명[key])
  • 수정, 삭제 :
    • 수정 : value['hello'] = 'world', value['hello'] = null
    • 삭제 : delete value['hello']는 추천하지 않음(메모리 상에 'world'가 남아있음, value['hello'] = null을 권장한다.)
      
    • 속성 :

    console.log(Object.getOwnpropertyDescriptor(person, 'name'));
     Object.getOwnPropertyDescriptors(person)
     // {10: {…}, name: {…}, age: {…}, height: {…}, weight: {…}, 이력: {…}}
        // value: '이호준',
        // writable: true, // 변경 가능 여부, 기본값 false
        // enumerable: true, // 열거(for) 가능 여부, 기본값 false
        // configurable: true // 재정의 가능 여부, 기본값 false

    • 메서드 : Object.keys, Object.values, Object..entries
      // 변수명.keys()와 같은 형식은 안됩니다.
      x.keys()

• Map : object

  • 메서드 : set, get, has, delete, size

• Set : object

  • 메서드 : add, delete, has, size
  • 중복을 허락하지 않는다.
  • 합집합, 교집합, 차집합 등에 메서드가 있진 않지만, 이러한 합집합, 교집합, 차집합을 구현하기 위해 Set을 사용하는 경우가 많다.

조건문과 반복분

조건문

• if
• else if
• else
• switch

반복문

• for

  	for문은 조건식이 거짓으로 판별될 때까지 실행문을 반복한다.

for (let i = 0; i < 10; i++){
    console.log(i); // 0~9까지 출력
}

• for in

  	배열과 함께 사용할 수 있, for in 반복문은 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용

const obj = {
    name: 'curryyou',
    job: 'engineer'
}

for (const key in obj){
    console.log(`${key} : ${obj[key]}`);
}
// name : curryyou
// job : engineer

• for of

  	for in 반복문과는 다르게 for of 반복문의 반복 변수에는 인덱스의 번호가 아니라 인덱스의 요소의 값이 들어간다.

const arr = [10, 20, 30];
for (const item of arr){
    console.log(item); // 10, 20, 30 출력
}

• while

  	while문은 조건식이 참이기만 하면 명령문을 반복해서 수행한다.

let num = 0;
while(num <3){ 
    console.log(num);  // 0~2 까지 출력
    num++;
}

• do while

  	do-while 문도 조건식이 거짓으로 판별될 때까지 반복합니다. 하지만 조건식을 계산하기 전, do 이하의 명령문이 실행된다는 차이점이 있다.

do{
    console.log('일단 한번은 실행된다.'); // 이 코드만 한번 실행되고 반복 종료.
}while(false);

• forEach

  	forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용하지만, for문처럼 index와 조건식, increase를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있다.

[10, 20, 30].forEach((value, index, array)=>{
    console.log(`${index} : ${value}`); // 0 : 10, 1 : 20, 2: 30 출력
})

• break

  	반복문, switch문, 레이블 문과 결합한 문장을 빠져나올 때 사용한다.

for (var i = 0; i < 10; i++) {
    if (i == 5) { // i 가 5 와 같을 경우
        break; // for 문 종료
    }
    console.log(i); // 0,1,2,3,4
}

• continue

  	반복문 안의 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행한다.

 for (var i = 0; i < 10; i++) {
    if (i == 5) { // i 가 5 와 같을 경우
        continue; // 다시 순회표현식으로 이동
    }
    console.log(i); // 0,1,2,3,4,6,7,8,9
}

---

컨포넌트화해서 모듈화하는 것이 요즘 트렌드이다