[TIL] KDT Clouding APP - Javascript Basic 1
iTerm2
- shell의 종류중 하나가 zsh.
- oh-my-zsh은 zsh configuration을 관리하기 위한 프레임워크
- oh-my-zsh에는 다양한 플러그인과 테마가 있어 활용도가 높음
- zsh 플러그인
- zsh-syntax-highlighting
- zsh-autosuggestions
- fasd: 열어본 파일이나 이동한 디렉토리를 기억하고, 빠르게 검색할 수 있도록 도와줍니다.
- tmux: 하나의 터미널 창에서 여러가지 패널 생성 가능
VScode snippet 세팅
console.log (clg)
console.dir (cdi)
console.table (clt)
처음에는 cmd+p –> ‘>’ + Snippets –> ‘Configure user snippets’ –> ‘javascript.json’ 파일애서 스니펫을 직접 추가해보았고, Javascript(ES6) code snippets 확장팩을 설치해서 환경을 셋업했다.
유용한 API들이 다양하게 제공되고 있어 많이 많이 써보는게 좋겠다!
Javascript 언어의 특징
-
인터프리터 언어 기계어 실행 단계에서 전처리단계없이(컴파일X) 변환과 동시 수행된다. 이로인해 컴파일러 언어에 비해 실행 속도가 느리지만, 최근 모던 브라우저 내의 V8엔진에서 컴파일 과정을 포함시켜서 속도를 크게 개선시켰다고 한다.
-
언어 특징
- 변수에 들어가는 값에 따라서 런타임시에 타입이 추론된다.
- 함수는 객체와 값과 동일하게 취급
- 프로토타입 기반의 상속 : 객체를 프로토타입화해서 복제과정을 통해 상속을 구현함.
- 여러 프로그래밍 패러다임을 지원함. ex) 명령형,함수형,객체지향형
ECMAScript
(ECMAScript2015 = ES2015 = ES6)
- 브라우저 지원여부 확인 사이트 : caniuse
- polyfill
- 지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드를 제공함.
- Babel
- transfiling 도구; ES6 이전 버전의 Javascript로 변환하는데 사용되는 도구
- polyfill 기능도 지원함.
Javascript 기본 문법 - 변수, 데이터 타입
[변수 호이스팅]
var
코드 평가 단계에서 변수 선언, 초기화(메모리 할당 및 undefined 초기화) 진행되고, 코드가 실행될 때에 값을 할당하게 됨!
console.log(a); // undefined (error X)
console.log(b); // undefined (error X)
var a = 1;
var b = 2;
=> 호이스팅 발생; a,b 변수 선언문이 해당 scope의 맨 상단으로 옮겨진 것과 같은 결과가 발생.
var 단점
- 키워드 생략이 가능하여 초기화와 재할당의 구분이 어려울 수 있음.
- 중복 선언이 가능하여 변수의 결과 예측에 혼란이 있을 수 있음.
- 전역변수화로 인해 무분별한 변수 접근이 발생할 수 있다.
즉, 의도치않은 변수의 값 변경과 코드의 예측이 어려워지는 이슈들이 있어 사용을 지양해야 한다!
const, let
1) const (상수)
평가 단계에서 선언만 진행되고, 실행 단계에서 초기화와 값 할당 진행되기에 할당문이 실행되기 전에 참조가 불가능! (무조건 값을 할당해야!)
console.log(a); // ReferenceError !
const a = 1;
- 재할당 불가;상수값에 주로 사용
- 지역변수로 사용
2) let (변수)
- 재할당 가능; 지역변수로 사용
[데이터타입 - 원시타입]
- 변경 불가능한 값으로, 참조 형태가 아닌 ‘값’으로써 전달된다.
- 원시 래퍼 객체 / 원시 타입은 다르다.
1) Number
- 실수로 표현(정수,실수 구분없음)
- Infinity : 무한대 (-Infinity 가능)
- Nan : 숫자가 아님
- BigInt : 정수를 나타낼 수 있는 숫자 원시값; 다른 타입과 혼용 불가
BigInt(Number.MAX_SAFE_INTEGER)
BigInt(1n) + 1 // TypeError
2) String
- UTF-16 코드 단위의 시퀀스로 표현
- (``)ES6 이후부터 사용 가능
const color = 'red';
console.log(`apple is ${color}`);
3) null
- 주로 이전에 참조되었던 값을 의도적으로 더이상 참조하지않겠다는 뜻으로 사용한다!
- null 체크는 일치연산자(===) 사용하자!
4) Symbol
- 주로 객체의 key로 사용
const foo = {
[Symbol.for('apple')]: 'fruit',
};
console.log(foo[Symbol.for('apple')]);
[데이터타입 - 객체타입]
- mutable (<-> 원시타입:immutable_원시타입은 변경해서 사용하지 마라?)
- 객체는 참조 방식으로 전달된다.
[동적 타입 언어]
1) 명시적 타입 변환
원시 래퍼 객체의 정적 메소드를 활용하여 의도적으로 타입을 변경할 수 있다.
ex) 값.toString(), Number(값), Boolean(값)
2) 암묵적 타입 변환
ex) 값 + “”(->String), 값 * 1(->Number), !!값(->Boolean)
typeof 혹은 일치연산자를 사용하여 타입 guard 구현하거나, 타입스크립트를 사용해야…!