arrow function vs function

arrow function : 화살표 함수

const 함수명 = (매개변수) => {
   함수내용
}

• function 키워드를 사용하지 않고 함수를 정의하는 것
• 매개변수가 하나뿐인 경우에 괄호는 선택사항
• 매개변수가 없는 함수는 괄호가 필요
• 익명 함수의 형태
• 메소드 함수가 아닌 곳에 적합 (생성자로서 사용할 수 없음)

function : 전통적인 함수

function 함수명(매개변수){
   함수내용
}

    var elements = [
      'Hydrogen',
      'Helium',
      'Lithium',
      'Beryllium'
    ];
    
    // 이 문장은 배열을 반환함: [8, 6, 7, 9]
    elements.map(function(element) {
      return element.length;
    });
    
    // 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
    elements.map((element) => {
      return element.length;
    }); // [8, 6, 7, 9]
    
    // 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
    elements.map(element => {
      return element.length;
    }); // [8, 6, 7, 9]
    
    // 화살표 함수의 유일한 문장이 'return'일 때 'return'과
    // 중괄호({})를 생략할 수 있다.
    elements.map(element => element.length); // [8, 6, 7, 9]

• 참고) https://velog.io/@modolee/javascript-function-vs-arrow-function

변수 선언문 let, const, var

let	⭐ const	var
블록범위	블록범위	전역범위, 함수범위
재할당 O (업데이트O)	재할당 X	재할당 O
재선언 X (다시선언X)	재선언 X	재선언 O
변하는 데이터 값	변하지 않는 데이터 값 (상수 선언)	잘 사용하지 않는 추세
	완전히 새로 재할당하는 것은 불가능하지만, 변경(배열 추가,삭제)은 가능

논리연산자

&& : AND 연산자

• 두 피연산자가 모두 참일 경우에만 true , 그렇지 않으면 false

|| : OR 연산자

• 두 피연산자 중 하나라도 참이 있으면 true, 그렇지 않으면 false
  • 💡피연산자가 boolean 값이 아닌 경우에도 평가를 위해 boolean으로 변환됨. ( true로 평가되며, 피연산자를 반환)

! : NOT 연산자

• 피연산자를 boolean 으로 변환하여 그 값의 반대값을 반환

falsy, truty한 value들

• false로 판명되는 것들
  - undefined, null
  - NaN
  - 0 (숫자 리터럴), -0
  - “” (빈 문자열)
  - false
  - 나머지는 모두 true

optional chaining

• 옵셔널 체이닝 optional chaining : ?.
• 참고 ) https://ko.javascript.info/optional-chaining
  - ?.을 사용하여 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근함
  - ?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환

nullish collash

• null 병합 연산자 : nullish collash ??
• 참고 ) https://ko.javascript.info/nullish-coalescing-operator
  - ??를 사용하면 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있음
  - a ?? b
  - a가 null도 아니고 undefined도 아니면 a
  - 그 외의 경우는 b

if else vs 삼항연산자

if...else

if (조건1)
    명령문1
else if (조건2)
    명령문2
else if (조건3)
    명령문3
	...
else
    명령문N

• if 다음에 나오는 조건이 참인 경우에 명령문을 실행
• 위에서 부터 실행하며, 조건에 해당하는 명령문이 실행되면 조건문을 종료
• 조건에 모두 해당하지 않는다면, else 에 해당하는 명령문 실행

삼항연산자

조건문 ? 참 일때실행할 식 : 거짓일 때 실행할 식
    
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"

⭐.map method

const array1 = [1, 4, 9, 16];
// pass a function to map 
const map1 = array1.map(x => x * 2);
        
console.log(map1);
// expected output: Array [2, 8, 18, 32]

• 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함

⭐.filter method

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
        
const result = words.filter(word => word.length > 6);
        
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

• 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환함

typescript

• TypeScript는 JavaScript기반의 언어
• 컴파일언어, 정적 타입 언어
• 타입스크립트 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환됨
• 코드 작성 단계에서 타입을 체크해 오류 확인 가능
• 장 ) 미리 타입을 결정하기에 실행 속도가 매우 빠름
• 단 ) 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸림
  

TypeScript	JavaScript
JS의 모든 기능 있음	웹 개발에 주로 사용
정적타입의 컴파일 언어	동적 타입의 인터프리터 언어
코드 작성 단계에서 타입을 체크해 오류를 확인함	런타임에서 오류를 발견할 수 있음
리액트와의 호환성 좋음

참고 ) https://www.samsungsds.com/kr/insights/TypeScript.html