호이스팅이란 ?

변수나 함수 선언문이 해당 스코프의 맨 위로 옮겨지는것을 뜻한다.

호이스팅의 문제점

1. 호이스팅이 발생하게되면 개발자가 코드를 작성한 순서와 다르게 동작할 수 있으므로 주의가 필요

2. 변수 선언은 호이스팅되지만, 할당된 값은 그 자리에 남아있지 않고 undefined로 초기화되기 때문에 변수를 사용하기 전에 해당 값을 할당하지 않으면 예상치 못한 결과가 발생할 수 있음

호이스팅 방지

1. 변수나 함수를 사용하기전 반드시 초기화하는것을 권장

2. var, let대신 const 키워드를 사용하여 블록 스코프 지키기

정규표현식의 코드 구성은 두개의 / 사이에 패턴을 넣는방식이다.

정규표현식에서 사용하는 패턴은 다음과 같다.

다음은 데이터 값이 영어 소문자가 포함되어있는지를 확인하는 간단한 예제이다.

const regex = /[a-z]/

console.log(regex.test('abc')); # true
console.log(regex.test('aBc')); # true
console.log(regex.test('ABC')); # false
console.log(regex.test('123')); # false

예제에서 알 수 있다시피 조건이 맞다면 true가 반환이 된다.

만약 조건을 여러개를 두고 조건에 부합하지않을 때, 무언가를 출력하고싶다면 다음과 같이 코드를 작성하면 된다.

const regex = /[\s|ㄱ-ㅎ|가-힣|a-z|A-Z|0-9]/

if (regex.test(data) == false) {
  실행할 코드 ~
}

프로젝트를 진행하던 중, 이미지 파일에 롱클릭을 구현했는데, 브라우저에서 지원하는 롱클릭에 의해 정상적인 동작이 힘들어 해당 이벤트를 막는 방법을 찾아 보았다.

<script> 안에 다음과 같은 코드를 입력하면 된다.

<script>

window.oncontextmenu = function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

</script>

숫자 -> 문자

String.fromCharCode()

const a = 97

console.log(String.fromCharCode(65));   // A
console.log(String.fromCharCode(a));    // a

문자-> 숫자

charCodeAt()

const ASCII = "ASCII";

console.log('ascii'.charCodeAt(0));		// 97
console.log(ASCII.charCodeAt(0));		// 65

codePointAt()

const ascii = "ascii";

console.log('ASCII'.codePointAt(0));		// 65
console.log(ascii.codePointAt(0));		// 97

input EventHandler

JS에서 parseInt를 이용하여 나눗셈의 몫만 구할 수 있다.

var result1 = 17 / 3 // 5.66666667
var result2 = 17 % 3 // 2
var result3 = parseInt(17 / 3) // 5

Array Methods

사용 예시

reverse

• 원본 배열의 요소들의 순서를 반대로 정렬

    const numbers = [1, 2, 3, 4, 5]
    numbers.reverse()
    console.log(numbers) // [5, 4, 3, 2, 1]

push & pop

• 배열의 가장 뒤에 요소를 추가 또는 제거

    const numbers = [1, 2, 3, 4, 5]
  
    numbers.push(100)
    console.log(number) // [1, 2, 3, 4, 5, 100]
  
    number.pop()
    console.log(number) // [1, 2, 3, 4, 5]

includes

• 배열의 특정 값이 존재하는지 판별 후 참/거짓 반환

    const numbers = [1, 2, 3, 4, 5]
  
    console.log(numbers.includes(1)) // true
  
    console.log(numbers.includes(100)) // false

indexOf

• 배열에 특정 값이 존재하는지 판별 후 인덱스 반환

• 해당 값이 없을 경우 -1 반환

    const numbers = [1, 2, 3, 4, 5]
    let result
  
    result = numbers.indexOf(3) // 2
    console.log(result)
  
    result = number.indexOf(100) // 1
    console.log(result)

join

• 배열의 모든 요소를 구분자를 이용하여 연결

• 구분자 생략 시 쉼표 기준

    const numbers = [1, 2, 3, 4, 5]
    let result
  
    result = numbers.join() // 1,2,3,4,5
    console.log(result)
  
    result = numbers.join('') // 12345
    console.log(result)
  
    result = numbers.join(' ') // 1 2 3 4 5
    console.log(result)

Array Helper Methods

• 배열을 순회하며 특정 로직을 수행하는 메서드
• 메서드 호출 시 인자로 callback 함수를 받는 것이 특징

사용 예시

forEach

• 배열의 각 요소에 대해 콜백 함수를 한 번씩 실행

• array.forEach(callback(elemet[, index[, array]]))

    const colors = ['red', 'blue', 'green']
  
    colors.forEach((color) => {
        return console.log(color)
    })
    // red
    // blue
    // green

map

• 콜백 함수의 반환 값을 요소로 하는 새로운 배열 반환

• array.map(callback(element[, index[, array]]))

    const numbers = [1, 2, 3]
  
    const doubleNumbers = numbers.map((number) => {
        return number * 2
    })
    console.log(numbers) // [ 1,2,3 ]
    console.log(doubleNumbers) // [ 2,4,6 ]

filter

• 콜백 함수의 반환 값이 참인 요소들만 모아서 새로운 배열을 반환

• array.filter(callback(element[, index[, array]]))

    const products = [
    { name: 'cucumber', type: 'vegetable' },
    { name: 'banana', type: 'fruit' },
    { name: 'carrot', type: 'vegetable' },
    { name: 'apple', type: 'fruit' },
    ]
  
    const fruits = products.filter((product) => {
    return product.type === 'fruit'
        })
    console.log(fruits)
    // [ { name: 'banana', type: 'fruit' }, { name: 'apple', type: 'fruit' } ]

reduce

• 콜백 함수의 반환 값들을 하나의 값(acc)에 누적 후 반환

• array.reduce(callback(acc, element, [index[, array]])[, initialValue])

    const tests = [90, 90, 80, 77]
  
    const acc = tests.reduce((total, x) => total + x, 0)
  
    console.log(acc) // 337

find

• 콜백 함수의 반환 값이 참이면 해당 요소를 반환

• array.find(callback(delement[, index[, array]]))

    const avengers = [
    { name: 'Tony Stark', age : 45 },
    { name: 'Steve Rogers', age: 32},
    { name: 'Thor', age: 40},
    ]
  
    const avenger = avengers.find((avenger) => {
    return avenger.name === 'Tony Stark'
    })
  
    console.log(avenger) // { name: 'Tony Stark', age: 45 }

some

• 배열의 요소 중 하나라도 판별 함수를 통과하면 참을 반환

• array.some(callback(element[, index[, array]]))

    const arr = [1, 2, 3, 4, 5]
  
    const result = arr.some((elem) => {
    return elem % 2 === 0
    })
  
    console.log(result) // true

every

• 배열의 모든 요소가 판별 함수를 통과하면 참을 반환

• array.every(callback(element[, index[, array]]))

    const arr = [1, 2, 3, 4, 5]
  
    const result = arr.every((elem) => {
    return elem % 2 === 0
    })
  
    console.log(result) // false

1. 할당 연산자

   • 오른쪽에 있는 피연산자의 평가 결과를 왼쪽 피연산자에 할당하는 연산자

       let a = 10

2. 비교 연산자

   • 피연산자들을 비교하고 결과값을 boolean으로 변환하는 연산자

       10 > 1  // true
       10 < 1  // false

3. 동등 연산자 ( == )

   • 두 연산자가 같은 값으로 평가되는지 비교 후 boolean 값을 반환

   • 비교할 때 암묵적 타입 변환을 통해 타입을 일치 시킨 후 비교하므로 예상치 못한 결과가 발생할 수 있음

       const a = 1
       const b = '1'
     
       console.log ( a == b ) // true

4. 일치 연산자 ( === )

   • 두 연산자의 값과 타입이 모두 같은 경우 true를 반환

       const a = 1
       const b = '1'
     
       console.log ( a == b ) // false
       console.log ( a === Number(b)) // true

5. 논리 연산자

   • 세 가지 논리 연산자로 구성

     1. and 연산은 &&

     2. or 연산은 ||

     3. not 연산은 !

         true && true // true
         true && false // false
        
         true || false // true
         false || false // false
        
         !true // false

6. 삼항 연산자

   • 3 개의 피연산자를 사용하여 조건에 따라 값을 반환하는 연산자

   • 가장 앞의 조건식이 참이면 : 앞의 값이 반환, 반대일 경우 뒤의 값이 반환

   • 삼항 연산자의 결과 값이기 때문에 변수에 할당 가능

       true ? 1 : 2 // 1
       false ? 1 : 2 // 2
     
       const result = Math,PI > 4 ? 'yes' : 'no'
       console.log(result) // no.

JavaScript는 변수를 선언하는 키워드가 정해져 있음

1. let
   • 블록 스코프 지역 변수를 선언 (추가로 동시에 값을 초기화)
   • 재할당 가능 & 재선언 불가능
   • 블록 스코프를 갖는 지역 변수를 선언
2. const
   • 블록 스코프 읽기 전용 상수를 선언 (추가로 동시에 값을 초기화)
   • 재할당 & 재선언 불가능
   • 선언 시 반드시 초기값을 설정 해야 하며, 이후 값 변경이 불가능
   • let과 동일하게 블록 스코프를 가짐
3. var
   • 변수를 선언 (추가로 동시에 값을 초기화)
   • 재할당 & 재선언 가능*
   • 호이스팅되는 특성으로 인해 예기치 못한 문제 발생 가능성 때문에 const와 let 사용을 권장

// 선언 : 변수를 생성하는 행위 또는 시점
// 할당 : 선언된 변수에 값을 저장하는 행위 또는 시점

let Numb // 선언
console.log(Numb) // undefined

Numb = 10 // 할당
console.log(Numb) // 10

let Numb = 0 // 선언 + 할당
console.log(Numb) // 0