Javascript

    데이터 타입 비교

    Object 타입의 비교 Object는 레퍼런스 형태로 값을 저장한다. // object equality by reference 1. const ellie1 = { name: 'ellie' }; 2. const ellie2 = { name: 'ellie' }; 3. const ellie3 = ellie1; 4. console.log(ellie1 == ellie2); 5. console.log(ellie1 === ellie2); 6. console.log(ellie1 === ellie3); 위 코드에서 4,5,6 번줄의 값을 보면 4번에서 false가 출력된다. ellie1과 ellie2는 다른 레퍼런스를 가지고 있기 때문이다. 5번에서 false가 출력된다. 마찬가지로 서로 다른 레퍼런스를 가지고 있기 ..

    Object.keys()

    Object.keys() 메소드는 주어진 객체의 속성 이름들을 순서대로 배열형태로 반환한다. const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1));위 코드의 결과값으로 Array ["a", "b", "c"]이 반환된다.

    구조 분해 할당

    구조 분해 할당이란? 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 매칭되는 두 변수가 변수명이 같다면 뒤에 있는 변수는 생략이 가능하다. 주로 딕셔너리의 값들을 변수에 할당해줄때 키값을 생략하기 위해 쓰인다. 예시 ajax 통신할 때 키 값 생략 router.post("/auth", async (req, res) => { const { nickname, password } = req.body; const user = await User.findOne({ $and: [{ nickname: nickname }, { password: password }], }); 위의 코드의 const { nickname, password }..

    백틱을 사용해 자바스크립트 함수로 인자를 보낼 때

    백틱 안에서 ${ } 형태로 자바스크립트 함수에 인자를 보낼 때 let comments = response["comments"]; reponse로 comments에 담긴 데이터 정보를 json으로 받는다. for (const comment_arr of comments) { if (comment_arr["nickname"] == logined_nickname) { let comment_id = comment_arr["_id"]; comments에서 인덱스 하나하나 순회하며 "_id" 값을 조회한다. `수정 ` 받아온 comment_id 값을 이용해 html 태그 내부에서 활용해 준다. 다른 곳에선 다 문제가 없지만 onclick="comment_modification(${comment_id})" 부분에서 ..

    async와 await

    async와 await async와 awaits는 promise를 더욱 간결하고 동기적으로 실행되는 것처럼 만들어 준다. promise를 계속하여 체이닝하면 코드가 복잡해 지는데 이를 해결해주는 것이 async와 await이다. async function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 다음은 기존의 promise를 호출해주는 함수이다. function fetchUser() { return new Promise((resolve, rejecdt) => { resolve('haewoong') }) } const user = fetchUser(..

    Promise 이해하기

    개요 자바스크립트에서 비동기적 처리를 위해 쓰는 오브젝트이다. 기본적으로 콜백함수와 구조는 같지만 간결화된 코드로 훨씬 깔끔하게 콜백함수의 처리를 할 수 있다. promise의 상태 Promise의 상태는 총 3가지가 있다. 1. Pending(대기) 아래와 같이 Promise가 처음 생성되면 pending(대기) 상태가 된다. promise가 실행 되었지만 브라우저에서 결과를 처리하지 않은 상태다. const promise = new Promise((resolve, reject) => {}); console.log(promise); // Promise { } 2. Fulfilled(이행) 아래와 같이 Promise에서 resolve를 실행하면 Fulfilled(이행) 상태가 된다. 조건에 따라 reso..

    비동기, 콜백 개념 이해하기

    동기와 비동기 동기적(Synchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식이다. 비동기적(Asynchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식이다. 언제 코드가 실행될지 예측할 수 없다. 자바스크립트는 동기적이다 자바스크립는 호이스팅이된 코드 이후부터 한줄한줄 제일 위에서부터 밑으로 동기적으로 실행된다. 호이스팅이란? 밑에 작성된 코드를 끌어올려 우선적으로 실행해주는 것을 말한다. var 변수나 함수 선언이 호이스팅 되게 된다. 즉 밑에서 선언된 var나 function이 제일 위로 끌어올려져 실행된다. console.log..

    for...loop, for...of, for...in 그리고 forEach

    for...loop, for...of, for...in, forEach는 ES6부터 추가된 새로운 반복문 문법이다. for loop 전통적인 for loop 방법이다. students 배열의 길이(length)가 될 때까지 i 란 변수가 순차적으로 커지면서 배열의 원소에 접근하는 방식이다. const students = ["John", "Jane", "Alex"] for (let i = 0; i < students.length; i++) { console.log(students[i]); } // John // Jane // Alex for of for of 를 사용하면 배열의 원소 를 하나씩 가져올 수 있다. 위 방법과 다르게 별도의 변수를 선언해서 배열의 길이를 알아야 한다거나 하는 불편함이 없이 코드..

    var와 let

    var의 문제점 1. 같은 변수를 계속 선언할 수 있음 var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 같은 변수를 두번 선언했음에도 오류가 나지 않고 출력되는걸 볼 수 있다. 이는 코드량이 많아지게 되면 변수가 어디에서 어떻게 사용되었는지 파악하기 힘들고 선언된 값을 바뀌게 한다. 2. 반복문에서 정의된 변수가 반복문이 끝난 이후에도 계속 남아 있다. for (var i = 0; i < 10; i++) { console.log(i); } console.log('last:', i); // 0 // 1 // 2 // 3 // 4 // 5 // 6 // 7 ..