[SEB_FE_45] 2023.04.18 / Javascript 기초(1)

📖 [강의 내용 및 개념 정리]
목차

• 자바스크립트란?
• 타입
• 변수
• 연산자
• 2023.04.18 리뷰

[자바스크립트란?]

(출처) [번역] 자바스크립트의 역사 – 과거 요약

(출처) 자바스크립트란? 요약

자바스크립트의 장점

• 주요 브라우저에서 지원하고 기본 언어로 사용됨
• DOM 조작을 통해 인터랙티브한 웹을 만들 수 있음

"Java Script?" No! "Javascript"

자바와 자바스크립트 언어는 관련이 있을까?
정답은 "없다"이다.
지금도 유명하지만 그 당시 많이 쓰였던 자바 언어의 영향력을 홍보로서 사용하기 위함이라고 한다.
(여담: 자바 개발자에게 자바스크립트를 "Java Script"라고 하면 매우 동요하는 모습을 볼 수 있다🤭)

자바스크립트 엔진

• V8: Chrome과 Opera에서 쓰임
• SpiderMonkey - Firefox에서 쓰임
• Trident 또는 Chakra: IE에서 쓰임
• ChakraCore: Microsoft Edge에서 쓰임
• SquirrelFish: Saffari에서 쓰임

예를 들어, "V8에서만 지원하는 기능"이라고 하면 chrome과 opera에서 밖에 안쓰이므로 엔진 종류를 기억하면 좋다.

자바스크립트로 트랜스파일할 수 있는 언어들

• Typescript: 자바스크립트에 타입을 명시하도록 한 언어 by Microsoft
• Flow: 자바스크립트에 자료형을 명시하도록 한 언어 by Facebook
• CoffeScript: 짧은 문법과 쉬운 코드로 작성하도록 한 언어 (Ruby 개발자들이 좋아한다고 합니다!)
• Dart: 고유의 엔진을 가진 독자적 언어이며 웹과 앱 개발에 사용할 수 있어 인기가 많은 언어 by Google

[코드 에디터]

• StackBlitz
  어플리케이션 개발을 위한 클라우드 통합 개발 환경
• Visual Studio Code
• Webstrom

타입

(출처) tistory - 원시 타입(primitive type) vs 참조 타입(preference type) 요약

원시 타입은 모두 하나의 값을 담고 있음

• 예) 문자, 숫자, null, symbol …

참조 타입은 변수에 할당할 때에는 값이 아닌 '주소'를 저장

• 예) 배열, 객체, 함수
• 변수는 주소를 저장하고, 주소는 특별한 동적인 데이터 보관함에 보관되는데 이 데이터 보관함을 메모리 힙 이라고 합니다.
• 값을 재할당 할 경우 주소는 참조한 모든 값이 영향을 받습니다. 즉, 값이 공유됩니다.

React의 hook 중 하나인 useEffect에서 참조 타입인 dependency의 변화를 감지하지 못하는 경우가 있다.

useEffect dependency에 들어간 변수 타입
수정 전) moment() 즉, 타입이 objectOf(moment)
-> 참조타입 변수로 date가 수정되어도 useEffect가 감지하지 못하는 경우가 있음

수정 후) moment().format(’YYYY-MM-DD’) 즉, 타입이 string
-> 원시타입 변수로 date 수정 시 useEffect가 정확히 감지함

참고) 1.1 + 0.1은 1.2가 아니다?

유튜브 코딩애플 채널 - 위 수식이 틀린 이유는? (개발자 면접 타임)

숫자형

• 정수 및 부동 소수점 숫자
• 특별 숫자 값: Infinity, -Infinity, NaN
  • 1/0은 무한대(Infinity)를 의미
• BigInt: (253-1)(9007199254740991) 보다 큰 값 혹은 -(253-1) 보다 작은 정수를 표현하고 싶을 때 사용

문자형

불린형

// 대표적인 falsy 값
false
0
-0
0n
// 빈 문자열
null
undefined
NaN

• 주의사항: [], {}처럼 참조타입의 빈 값은 true

null 값

undefined 값

객체와 심볼

typeof 연산자

• 인수의 자료형을 나타내는 문자열을 반환
• typeof null은 object (하위호환성을 유지하기 위해 해당 부분 유지됨)

형변환

• 문자형으로 변환 String(value)
• 숫자형으로 변환 Number(value)
  • 
• 불린형으로 변환 Boolean(value)

변수

let과 const

• let: 변수 재할당이 가능
• const: 변수 재할당이 불가능한 상수

변수 명명 규칙

• 변수명에 쓸 수 있는 문자: 문자와 숫자, 그리고 기호 $와 기호 _
• 숫자로 변수명 시작할 수 없음
• 대/소문자 구별
• 예약어는 변수명으로 사용 불가
  • 예약어
• 대문자 상수는 프로젝트 전반적으로 쓰일 상수를 선언할 때 주로 사용하는 컨벤션
  • ex. const DEFAULT_COLOR = "#ff2222";
• 모든 언어로 변수를 선언하는 것은 가능하지만 영어로 선언하는 것을 권장

연산자

연산자 우선순위

기본 연산자

할당 연산자 체이닝

let a, b, c;

a = b = c = 2 + 2;

복합 할당 연산자

let a = 1;

a += 1; // 2

증가/감소 연산자

• 후위형 vs 전위형

let a = 1;
let b = ++a;

console.log(b); // 2

let c = 1;
let d = c++;

console.log(d); // 1
// 후위형을 사용할 경우 값이 증가되긴 했지만, 증가 전 기존 값을 반환함

비트 연산자

주로 2진수에서 사용

• 비트 AND ( & )
• 비트 OR ( | )
• 비트 XOR ( ^ )
• 비트 NOT ( ~ )
• 왼쪽 시프트(LEFT SHIFT) ( << )
• 오른쪽 시프트(RIGHT SHIFT) ( >> )
• 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )

쉼표 연산자

마지막 표현 식의 값만 반환됨

let a = (1+2, 3+4);
console.log(a); // 7

비교 연산자

주의사항: 비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꿔 비교

일치 연산자

null이나 undefined

alert( null === undefined ); // false
alert( null == undefined ); // true

null과 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

[2023.04.18 리뷰]

오늘은 앞으로 공부할 때 시간 배분을 잘 해야겠다는 반성을 하게 되는 날이었다.

놓쳤던 개념들을 위주로 빠르게 확인하고 심화 공부 또는 과제를 해야겠다.