만자의 개발일지

ES6가 등장하기 이전에 배열에 있는 요소 혹은 JSON 객체의 프로퍼티를 각각 변수에 담기위해 다음과 같이 일일이 하나하나 변수에 할당해주곤 했습니다. let users = ['홍길동', '김철수', '박민재'] let user1 = users[0] let user2 = users[1] let user3 = users[2] console.log(user1) console.log(user2) console.log(user3) let user = { name: '홍길동', age: '20' } let name = user.name let age = user.age console.log(name) console.log(age) 홍길동 김철수 박민재 홍길동 20 하지만 이 경우에 배열의 요소가 많아지거나 JS..

옵셔널 체이닝(Optional Chaining) 자바스크립트에서 존재하지 않는 요소에 접근하려 할 때 에러가 발생할 수 있습니다. 그래서 옵셔널 체이닝이 등장하기 전에는 AND 연산자의 단축평가를 이용해 이를 해결할 수 있었습니다. let users = {} console.log(users && users.user && users.user.name) undefined 하지만 이 경우에 체이닝이 길어지면 길어질수록 코드의 복잡성이 증가한다는 단점이 있습니다. 그래서 이를 해결하기 위해 ES2020 부터 옵셔널 체이닝이 추가되었습니다. 옵셔널 체이닝(?.)은 체이닝(.)과 동일한 기능을 하는데 차이점은 옵셔널 체이닝은 nullish한(null or undefined) 값을 할당하고 있는 경우에 에러를 반환하..

null 병합 연산자(Nullish Coalescing Operator) null 병합 연산자(??)는 왼쪽 값이 null 혹은 undefined 인경우 오른쪽 값을 반환하는 연산자입니다. 언뜻 보면 OR 연산자의 단축 평가와 매우 유사하지만 두 연산자에는 중요한 차이점이 있습니다. 우선 왼쪽값이 null 혹은 undefined의 경우 OR 연산자와 똑같이 동작합니다. console.log(null || 100) console.log(null ?? 100) console.log(undefined || 200) console.log(undefined ?? 200) 100 100 200 200 하지만 null과 undefined를 제외한 false로 평가되는 모든 값의 경우 OR 연산자는 오른쪽 값을 반환하..

OR 연산자가 둘중 하나의 조건만 참일 경우 참을 반환한다는것도 알고, AND 연산자는 두 조건 모두 참일 경우 참을 반환한다는 것도 아는데, 이게 왜 이렇게 동작하는지에 대해 고민한적이 없었습니다. 그래서 이번 포스팅을 작성하면서 OR, AND 연산자가 어떻게 동작하는지와 단축 평가에 대해 알아보았습니다. 논리 연산자(Logical Operator) 프로그래밍에서의 논리 연산자는 세 가지 종류가 있습니다. ! NOT && AND || OR 보통 논리 연산자는 다음과 같이 if 문에서 거짓을 참으로 바꿔주거나(!) 다중 조건(&&, ||)을 지정해 줄 때 많이 사용합니다. 아래는 일반적으로 논리 연산자를 if 문에서 사용하는 예제입니다. 첫번째 if 문에서 answer가 'yes'이거나 혹은(OR) 'Y..

async&await async와 await는 가장 최근에 나온 비동기 처리 패턴으로, 기존의 콜백함수와 프로미스의 단점을 보완한 문법입니다. 흔히 말하는 콜백지옥 혹은 여러개의 프로미스가 서로 의존하고있는 경우 코드의 가독성이 저하될 수 있습니다. 이를 async와 await를 사용하여 더욱 간편하게 가독성있는 코드를 작성할 수 있습니다. 사용법 async와 await의 사용법은 매우 간단합니다. 함수앞에 async를 붙이면 해당 함수는 자동으로 프로미스를 반환하게 됩니다. 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날때까지 기다립니다. (동기적으로 처리) await은 async가 붙은 함수 안에서만 사용 가능합니다. 다음과 같이 프로미스로 작성한 코드를 async를 사용해 간편하게..