javascript

---

자바스크립트 특징

동적언어

자바스크립트는 동적언어이다.

• 동적언어 : 런타임에 타입이 결정됨, 매번 타입을 써줄 필요가 없음
• 정적언어 : 컴파일 시간에 변수의 타입이 결정됨. 자바가 대표적인 예

일급객체

• 함수를 변수에 저장할 수 있다.
• 함수를 인자로 전달하거나, 반환값으로 사용할 수 있다

스크립트 언어

• 미리 컴파일 하지 않아도 즉석에서 코드를 실행할 수 있음.

---

var VS const, let

var는 블록스코프, const와 let은 함수스코프를 가짐
함수 스코프 대신블록 스코프를 사용하면 호이스팅같은 문제

• 함수 스코프 : 함수 내부에서 선언된 변수는 함수 내부의 모든 블록에서 접근이 가능함

function foo() {
  var x = 10; // 함수 단위 스코프
  if (true) {
    var y = 20;
    console.log(x, y); // 10 20
  }
  console.log(x, y); // 10 20
}
foo();
console.log(x, y); // ReferenceError: x is not defined, ReferenceError: y is not defined

• 블록스코프 : 특정 코드 블록 내에서 선언된 변수는 해당 블록 안에서만 유효함

function foo() {
  var x = 10; // 함수 단위 스코프
  if (true) {
    let y = 20; // 블록 단위 스코프
    const z = 30; // 블록 단위 스코프
    console.log(x, y, z); // 10 20 30
  }
  console.log(x, y, z); // ReferenceError: y is not defined, ReferenceError: z is not defined
}
foo();
console.log(x, y, z); // ReferenceError: x is not defined, ReferenceError: y is not defined, ReferenceError: z is not defined

---

화살표 함수

function f() {}
const f = () => {};

화살표 함수에는 this가 없음, 화살표 함수 본문에서 this에 접근하면 외부에서 값을 가져옴

 const relationship = {
    name : 'zero',
    friends : ['name', 'hero', 'xero'],
    logFriends(){
        this.friends.forEach(friend => {
            console.log(this.name, friend);
        });
    }
};

---

프로미스

• 실행은 하되 결과값은 나중에 받는 객체
• 결과값은 실행이 완료된 후 then이나 catch 메서드를 통해 받는다.
• 프로미스는 객체를 먼저 생성해야되는 규칙이 있삼

const condition = true;
const promise = new promise((resolve, reject) => {
    if(condition) {
        resolve('성공');
    }else{
        reject('실패');
    }
});

promise
.then((message)=>{
    console.log(message);
})
.catch((error)=>{
    console.log(error);
})
.finally(()=>{
    console.log('무조건');
})

프로미스 여러개를 한 번에 실행할 수 있는 방법

• Promise.all을 활용한다

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.resolve('성공2');
Promise.all([promise1, promise2])
    .then((result)=> {
        console.log(result);
    })
    .catch((error)=>{
        console.error(error);
    })

- 프로미스가 여러개 있으면 모두 resolve될 때까지 기다렸다가 then으로 넘어감
- 그 중에 하나라도 reject되면 catch로 넘어가므, 근데 어떤거인지 알 수 없음

• Promise.allSettled를 사용한다.

const promise1 = Promise.resolve('성공1');
const promise2 = Promise.reject('실패2');
const promise3 = Promise.resolve('성공3');
Promise.allSettled([promise1, promise2, promise3])
    .then((result)=>{
        console.log(result);
    })
    .catch((error)=>{
        console.log(error);
    });

결과는 아래와 같다. result 매개변수에 프로미스 결과값이 배열로 들어있다.

---

async/await

프로미스 코드 예제

function findAndSaveUser(Users){
    Users.findOne({})
    .then((user)=>{
        user.name = 'zero';
        return user.save();
    })
    .then((user)=>{
        return Users.findOne({gender: 'm'});
    })
    .then((user)=>{
        //생략
    })
    catch(err =>{
        console.error(err);
    });
}

여기서 ({})은!! 빈 객체를 생성하는 리터럴 표기법이라고 한다.
findOne메서드는 몽고디비에서 제공하는 메서드 중에 하나라고 한다
{}은 검색 조건이 된다. 모든 문서를 검색한 후 Users컬렉션에서 가장 처음 발견되는 문서 하나를 반환하게 된다.

• async/await 문법 사용시

async function findAndSaveUser(Users){
    try{
        let user = await Users.findOne({});
        user.name = 'zero';
        user = await user.save();
        user = await Users.findOne({gender:'m'});
    }catch (error) {
        console.error(error);
    }
}

---

Map과 Set

map은 객체와 유사하고 set은 배열과 유사하다고 생각하기

Map

• 속성들 간의 순서를 보장, 반복문을 사용할 수 있음.
• 속성명으로 문자열이 아닌 값도 사용할 수 있음
• size메서드를 통해 속성의 수를 알 수 있음

const m = new Map();

m.set('a','b'); // set(키, 값)으로 Map에 속성 추가
m.set(3, 'c'); // 문자열이 아닌 값을 키로 사용 가능
const d = {}; 
m.set(d, 'e'); // 객체도 허용

m.get(d); // get(키)로 속성값 조회
console.log(m.get(d)); // get(키)로 속성값 조회

m.size; // size로 속성 개수 조회
console.log(m.size) // 3

for(const [k,v] of m) {
    console.log(k, v); 
} // 속성간의 순서도 보장됨

m.forEach((v, k)=>{ // forEach도 사용가능함
    console.log(k,v); // 결과는 위와 동일함
})

m.has(d); // has(키)로 속성 존재 여부를 확인함
console.log(m.has(d)); // true

m.delete(d); // delete(키)로 속성을 삭제한다
m.clear; // clear()로 전부 삭제
console.log(m.size); // 0

Set

• 중복 허용 안함

const s = new Set();
s.add(false); // add(요소)로 Set에 추가
s.add(1);
s.add('1');
s.add(1); // 중복이므로 무시됨
s.add(2);

console.log(s.size); // 4(중복제거)

s.has(1); // 존재 여부 확인
console.log(s.has(1)); // ture

for(const a of s) {
    console.log(a); // false 1 '1' 2
}

s.forEach((a)=>{
    console.log(a); // false 1 '1' 2
})

s.delete(2); // 요소를 제거함
s.clear(); // 전부 제거함

• 중복 제거할 때도 set사용함

const arr = [1,3,2,7,2,6,3,5];
const s = new Set(arr);
const result = Array.from(s);
console.log(result); // [ 1, 3, 2, 7, 6, 5 ]

---

널 병합/옵셔널 체이닝

- 널 병합 연산자

|| 연산자

const a = 0;
const b = a || 3;

이 연산자는 falsy값이면 뒤로 넘어감

옵셔널 체이닝

const c = 0;
const d = c ?? 3; 

이 연산자는 null과 undefined일 때만 뒤로 넘어감

- 옵셔널 체이닝 연산자

null이나 undefined의 속성을 조회하는 경우 에러가 발생하는 것을 막아줌

const a = {}
a.b; // a가 객체이므로 문제 없음

const c = null;
try {
   c.d;
} catch(e){
   console.error(e); // TypeError: Cannot read properties of null (reading 'd')
}

c?.d;  // 문제없음, 이 값은 undefined가 됨

---

ajax

• 비동기적으로 웹 서비스를 개발할 때 사용하는 기법
• 페이지 이동없이 서버에 요청을 보내고 응답을 받는 기술

Get 방식임

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios.get('https://www.zerocho.com/api/get')
    .then((result) => {
        console.log(result);
        console.log(result.data);
    })
    .catch((error) => {
        console.error(error);
    }); 
</script>

데이터 확인