자바스크립트 요약
자바스크립트 기초
자바스크립트 입출력
import * as readline from "readline"
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
rl.on("line", (line) => {
console.log("input: ", line);
rl.close();
});
rl.on("close", () => {
process.exit();
});
자바스크립트 자료형과 선언
//선언후에도 파이썬 처럼 자료형 변경이 자유로움
let id=10 //변수
const name="이름" //상수
console.log(id+name) //문자열과 연산하면 자동으로 형변환
//형변환1
parseInt(name) //문자를 숫자로 변환 "10"=>10, "이름"=>nan
//그외 parseFloat 도 있다
//형변환2
String(id) //입력값을 문자로
Number(id) //문자형을 숫자로 변환
- 대입 연산시(=) 값이 복사되는것(불변형)
| Number | 숫자 |
|---|---|
| Boolean | 참거짓 |
| String | 문자열 |
| null, undefined | 명시적인 무 와 아직 할당 안한 무를 의미 |
- 대입 연산시(=) 주소가 복사되는것(복사시 같은 것을 가르키게 됨)(가변형)
| class | 같은 인스턴스를 가르킴 |
|---|---|
| { } | 객체 |
| [] | 배열 |
자바스크립트 배열과 객체
//배열
let arr=[0,1,2,3]
arr.push(4)//0을 뒤에 삽입
arr.unshift(-1)//-1을 맨 앞에 삽입
console.log("배열: ",arr, "길이: ",arr.length)
console.log(arr.pop())//맨뒤의 값을 추출 후 삭제
console.log(arr.shift())//맨앞의 값을 추출 후 삭제(dequene)
console.log(arr[1])//임의위치 접근
console.log(arr)
//객체
const obj={
name:"익명",
func: function(){
console.log("함수1")
},
get fullName(){
return this.name+""+"is Name"
},
set fullName(value){
this.name=value //객체 내부 함수에서 객체값에 접근할떈 무조건 this가 필요
}
}
ref={}
name="유저" //값형식은 복제
ref.func=()=>console.log("함수2")//주소형식은 주소를 전달
ref["name"]=obj.name //두가지 방식으로 객체 사용가능
console.log(obj)
obj.func()
obj["fullName"]="객체 is Name"
//스프레드
let a=[0,1,2]
let b=[...a] //펼쳐서 복사
let { c, d, e=3}= { c: 1, d: 2 } //키 값이 같은 것에 맵핑. 없으면 무시
const object = { f: 1, g: 2, h:3 }
let {f, ...rest}=object //f 빼고 나머지는 rest로 간다
- 자바스크립트는 왠만하면 에러가 안난다.
- 길이 4짜리 배열에 [4]을 연산해도 undefined가 뜰뿐
- 배열이 아닌 자료형에도 [ ] 연산해도 undefined가 뜬다.
- 객체는 파이썬의 딕셔너리와 비슷
자바스크립트 연산
let a=10
let b=4
let result=0
//가감승제
result=a + b // 14
result=a - b // 6
result=a * b // 40
result=a / b // 2.5 (자료형 변환)
result++ // 3.5 단항 연산
//나머지 제곱
result=a%b # 2
result=a**b # 10^4
//문자열 연산
a="가"
b="나"
c=1
print(a+b) # 가나 (c는 자료형이 다르므로 안됨)
print(a,b,c)# 가나1
//널 연산
1+nan #nan
1+undefined #nan
1+null #1
//비트 연산 (&,|,^,~) 왠만해선 사용하지 말것
result= a&b # 0b1010 0b100 0
//연산하고 대입
b+=a # b=b+a 와 동일
- 숫자형 끼리는 자동 형변환을 해줌
- 숫자형을 문자열로 자동으로 바꿔주진 못함
파이썬 조건문
//비교
a=1
b=1.0
c="1"
d=[1]
e=[1]//같은 값을 가져도 주소가 다르므로 다른 취급
console.log(
"==는 자료형을 따지지 않는다\n", //!=
"비교 예: ",a==b, " ",
"비교 예: ",a==c, " ",
"비교 예: ",a==d, " ",
"비교 예: ",d==e, " ")//모두 True, 마지막만 false
console.log(
"===는 자료형을 엄격하게 따진다\n", //!==
"비교 예: ",a===b, " ",
"비교 예: ",a===c, " ",
"비교 예: ",d===e, " ")첫번째만 True
//switch 문
let value="5"
switch (value) {
case '1':
console.log('1번');
break;
case '2':
console.log('2번');
break;
default:
console.log('3번');
}
//if문
let a=10
let b=11
if (a > b) {
console.log('a 가 b보다 큽니다.');
} else if(a == b){
console.log('a 가 b와 같습니다.');
} else{
consolo.log("a 가 b보다 작습니다"
}
- 문자형도 숫자형으로 자동 형변환 해줌
- 단일원소 배열도 같은 취급 해버림(다만 배열끼리는 안됨)
- 객체는 같은 원소가 들어있어도 키 때문에 다른 취급(객체끼린 안됨)
- null, undefined, 0, NaN은 false 취급
- 삼항연산자도 사용가능
자바스크립트 반복문
//쉬운 사용법
let value=[]
for(let i=0;i<10;i++){
value.push(i)
}
for(i in value)
{
console.log(i)
}
value="0"
//이런 말도 안되는게 허용된다. 심하게 자유로운 구조
while(value<10){
console.log(value)
value++
}
console.log(typeof(value))//자료형이 변환되있다
//반복 함수
const array = [1, 2, 3, 4, 5, 6, 7, 8];
//모두 결과가 같다
array.forEach(n => {
console.log(n)
});//원소를 각각 반복
array.map(n => console.log(n))// 원소를 각각 반복
console.log("인덱스 찾기",array.indexOf("1")) //없는 값은 -1로, 있는 값은 인덱스로 반환
filteringArr=array.filter(n=>n%2===0)//조건에 맞는 배열(객체)를 반환가능
console.log("짝수로 필터링: ",filteringArr)
자바스크립트 심화
파이썬 메서드
//방법1
function method(first=1, second=2){
console.log("변수값: ",first, second)
return first+second
}
result=method(1,10)
console.log(result)
//방법2
method=(first=1, second=2)=>{
console.log("변수값: ",first, second)
return first+second
}
result=method(11,10)
console.log(result)
자바스크립트 클래스
class instanceClassParent{
constructor(name){
this.name=name //this로 인스턴스 변수 선언
console.log(name)
}//생성자
}//c#처럼 생성가능. 생성자를 constructor로 하기로 약속
class instanceClass extends instanceClassParent{
constructor(name="기본파라메터"){
super(name)//부모 생성자 명시적으로 호출 해야함
}//생성자
func() {
console.log(this.name)
}
}//extends로 상속 가능
new instanceClass().func() //c#처럼 new 로 선언
- 다중 상속 불가
- 자바처럼 extends로 상속
자바스크립트 익스포트 임포트
//익스포트 a.js
function sayHi(user) {
console.log(`Hello, ${user}!`);
}
function sayBye(user) {
console.log(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // 두 함수를 내보냄
//익스포트 b.js
function sayGood(){
console.log(`Good`);
}
export default sayGood; //하나만 내보냄
//익스포트 c.js
function sayBad(){
console.log(`Bad`);
}
export.sayBad = sayBad;
//임포트 main.js
import * as say from './a.js';// 여러개를 따로 받으므로 따로 따로 호출
import good from './b.js'; //하나만 받으므로 그 자체 취급
say.sayHi('John');
good();
say.sayBye('John');
//임포트 main2.js
const bad = require("./c.js")
bad.sayBad()
- import 구문은 es6부터 지원되므로 package.json에 "type": "module” 를 추가
- c.js에서 export 그 자체를 require("./c.js")로 불러오는 구조
자바스크립트 초중요 비동기
//옛날 방법1. 프로미스를 변수처럼 생성
//프로미스 생성만으로 실행된다. resolve는 성공, reject는 에러시에 사용
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
console.log("myPromise Call")
resolve(1)
}
, 500) //0.5초 뒤에 결과값을 반환
})
myPromise.then(n => {
console.log(n);
}).catch(error => {
console.log(error);
})//결과값을 반환 받고 함수를 실행. 에러가 나면 캐치가 해결
//myPromise call->1
//옛날방법2. 함수로 생성
function promiseRecursion(n){
return new Promise((resolve, reject) => {
console.log("지금값은 ",n)
resolve(++n)
return n
});
}
promiseRecursion(0).then(
promiseRecursion
).then(
promiseRecursion
).then(
promiseRecursion
).catch(e=>{
console.error(e)
})//반환값을 연속 비동기사용. 호출시 자동 사용
//지금값은 0->1->2->3 (1초간격으로)
//추천 async await방법
async function asyAwait(){
console.log('안녕하세요!')
await new Promise(resolve=> setTimeout(resolve, 1000))
console.log('반갑습니다!')
}
async function useAsync(name){
try {
await asyAwait(); //await 로 기다릴수 있다. 함수밖 루프는 속행
//(함수밖도 await로 기다리지 않을때)
} catch (e) {
console.error(e);
}finally{
console.log(name,"종료")
return name
}
}
await useAsync("유저") //안녕하세요->1초후->반갑습니다
//await가 있으면 종료까지 기다리고. 없으면 실행시키도 멈추면 다음으로
- 자바스크립트를 쓰는 대표적인 이유
- async await만은 꼭 알아둘것
- await Promise.all([a,b,c]) //비동기 세개의 배열반환
- await Promise.race([a,b,c]) //입력값중 하나 먼저온것만 반환. 셋다 실행은 됨
Ghost