Study/JavaScript

[JavaScript_study] 주석 (Comments)

* 주석 (Comments) 주석은 코드 자체를 설명하는 것이 아니라, 왜(WHY) 이런 아키텍쳐를 선택했는지 그리고 어떻게(HOW)이 모듈을 사용해야 하는지를 설명하는것이 좋음 (단, 정말 필요한 경우에만) 외부에서 많이 쓰이는 함수 API인 경우 JSDoc를 사용하면 좋음 /** */ 형식의 주석 // 한줄 짜리 주석을 작성할 때 사용 ex) // TODO(latte) : 해야할 일 작성 ex) // TODO(latte) : xx기능 구현하기 * 주석 사용 예시 // 외부에서 많이 쓰이는 함수 API인 경우 JSDoc을 사용하면 좋음 // 첫줄에는 함수에 대한 설명 작성 /** * 주어진 두 인자를 더한 값을 반환함 * @param {*} a 숫자 1 * @param {*} b 숫자 2 * @retu..

[JavaScript_study] 널 병합 연산자(Nullish Coalescing Operator)

* Nullish Coalescing Operator ES11 (ECMAScript 2020) ?? null, undefined || falsy한 경우 설정(할당) ex) 0, -0, '' * 활용 예시 or연산자는 falsy한 경우에 설정된다. 그런데 default parameter은 null과 undefined인 경우 설정 그런데 일반 코드에서 or연산자를 쓰면 null과 undefined뿐만 아니라 텅텅 빈 문자열 및 0인경우에도 설정된다. null과 undefined일 경우에만 뒤의 코드를 수행하고 싶을때 해당 연산자를 이용하면 된다. * Nullish Coalescing Operator 활용 예시 코드 // or을 잘못쓰면 아래의 코드처럼 오출력이 생길 수 있다. let num = 0; cons..

[JavaScript_study] 옵셔널 체이닝 연산자 (Optional Chaining Operator)

* 옵셔널 체이닝 연산자 Optional Chaining Operator ES11 (ECMAScript 2020) ?(물음표)를 이용해서 표현한다. : 000?.ㅁㅁㅁ => 000값이 있다면? ㅁㅁㅁ를 반환해라 없다면 undefined를 반환 null 또는 undefined을 확인할때 좀 더 간편하게 할 수 있다. let item = { price: 1 }; const price = item?.price; console.log(price); let obj = { name: '🐶', owner: { name: 'latte' } }; function printName(obj) { const ownerName = obj?.owner?.name; console.log(ownerName); } printName(..

[JavaScript_study] 논리연산자, 단축평가(short-circuit evaluation)

* 단축평가(short-circuit evaluation) or 연산자의 경우 첫번째 값이 true면 뒤에 값을 볼 필요가 없으므로 첫번째 값이 반환된다. (단축된 평가) 만약 첫번째 값이 false면 두번째 값이 반환된다. or 연산자는 만약 어떤 값이 Falsy 하다면 대체로 사용 할 값을 지정해줄 때 매우 유용하게 사용 할 수 있다. A && B 연산자를 사용하게 될 때에는 A 가 Truthy 한 값이라면, B 가 결과값이 됩니다. 반면, A 가 Falsy 한 값이라면 결과는 A 가 된다. * 단축평가 활용 예시 앞조건이 truthy일때 && 뒤에 무언가를 해야 할 경우 앞조건이 falsy일때 || 뒤에 무언가를 해야 할 경우 null 또는 undefined인 경우를 확인할때 item이 true이고..

[JavaScript_study] 심볼(Symbol)

* 심볼 (Symbol) 유일한 키를 생성할 수 있음 symbol은 map에서 유용하게 사용할 수 있다. 보안을 높힐 때 혹은 유일한 key를 만들 때 Symbol을 사용하면 유니크함을 보장할 수 있다. Symbol을 이용하면 값은 동일해도 서로 다른 유일한 key가 만들어진다. map뿐만 아니라 obj에서도 유용하다. (아래의 예시 참조) * Symbol.for 동일한 이름으로 하나의 키를 사용하고 싶다면 : Symbol.for 전역 심볼 레지스트리 (Global Symbol Registry) 동일한 문자열과 동일한 Symbol을 사용한다면 Symbol.for을 이용한다. Symbol을 관리하고 있는 전역 레지스트리에 해당 Key에 해당하는 Symbol이 만들어지고 이 이름에 대한 문자열을 요구하면 동..

[JavaScript_study] Map과 Set

* 맵 (Map) [키, 값] 으로 이루어진 자료구조 순서가 없다. key는 유일한 키를 가지고 있어야 한다. key값만 다르다면 values는 중복가능 * 맵(Map)과 오브젝트(Object)와의 큰 차이점은?? map에서는 다양한 함수를 사용 가능하다. object에서는 사용할 수 있는 함수가 적다. map은 key[value] 동적으로 접근이 불가능하며 map.get(key)이라는 함수를 사용해야 한다. object는 key[value] 동적으로 접근이 가능하다. 결론 : 사용할 수 있는 인터페이스가 살짝 다르다. * 맵 (Map)예시코드 const map = new Map([ ['key1', '사과'], ['key2', '바나나'], ]); console.log(map); // 사이즈 확인 con..