JavaScript / Nullish coalescing operator (??)
·
JavaScript/이론 & 문법
Nullish coalescing operator (??)Nullish coalescing operator (??)는 JavaScript에서 도입된 연산자로,변수가 null 또는 undefined일 경우에만 오른쪽 피연산자의 값을 반환하는 연산자입니다 !즉 변수가 nullish 한 상태일 때만 다른 대체 값을 제공하고, 그렇지 않으면 원래 값을 유지하는데 사용됩니다. 기본 문법을 살펴볼까요?// a : 평가할 값// b : a가 null또는 undefined일 때 반활할 대체 값let result = a ?? b; a가 null또는 undefined일 경우 b를 반환합니다.그렇지 않으면 a의 값을 유지합니다. 이 연산자는 논리 연산자 || 와 비슷하게 작동하지만 차이점이 있는데요 !??는 nullish ..
JavaScript / Nullish coalescing assignment (??=)
·
JavaScript/이론 & 문법
Nullish coalescing assignment (??=) / 널 병합 할당Nullish coalescing assignment(??=)는 논리적 null 할당 연산자라고도 합니다.JavaScript에서 변수가 null 또는 undefined일 경우에만 값이 할당되도록 하는 연산자입니다.즉, 해당 변수에 값이 없을 때만 새로운 값을 할당하고, 값이 존재하면 기존 값을 유지하는 역할을 합니다. 기본 문법을 살펴볼까요 ?// variable : 값을 할당할 대상인 변수// value : variable에 null 또는 undefined일 경우 할당할 값variable ??= value; 위 문법을 보면, variable에 null 또는 undefined일 경우에, value를 variable에 할당합니..
JavaScript 옵셔널 체이닝 / Optional chaining
·
JavaScript/이론 & 문법
Optional chaniningOptional chaining이란?옵셔널 체이닝은 존재하지 않을 수 도 있는 요소(Property) 또는 메서드(Method)를 안전하게 호출할 수 있도록 도와줍니다.Optional chaining 연산자  ' ?. '는 체인의 각 참조가 유효한지 아닌지 명시적으로 검증하지 않고, 연결된 객체 체인 안에 깊숙히 위치한 속성 값을 읽을 수 있어요.쉽게 말하자면 요소(Property)가 없는 중첩 객체(Object)를 에러 없이 안전하게 접근할 수 있습니다.?. 앞은 ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.const food = { breakfast: { meal: 'apple', desert: { ..
JavaScript 전개 구문과 구조 분해 할당
·
JavaScript/이론 & 문법
이번에는 배열이나 객체를 다룰 때 유용한 전개 구문과 구조 분해 할당에 대해 알아볼게요!전개 구문은 데이터 구조를 확장하거나 복사할 때 사용하며,구조 분해 할당은 데이터를 쉽게 분해하여 변수에 할당할 수 있게 해 줍니다. 전개 구문전개 구문은 배열(Array)이나 객체(Object)와 같은 데이터 구조를 확장할 때 사용하는 문법입니다.이를 통해 배열이나 객체를 쉽게 복사하거나, 새로운 배열이나 객체를 생성할 수 있습니다.전개식(Spread syntax)이라고 표현하기도 해요!'퍼지다, 펼치다'라는 의미의 spread처럼, 배열이나 객체로 포장되어 있는 데이터를 가지런히 펼쳐놓는 이미지를 생각하면 좋을 것 같아요. 배열(Array)의 전개 구문배열의 전개구문은 대괄호 '[ ]' 안에서 세 개의 점 ( ....
JavaScript / in 연산자의 사용
·
JavaScript/이론 & 문법
JavaScript 'in' 연산자JavaScript의 'in' 연산자는 객체의 속성을 확인하기 위한 연산자입니다.정확히는 객체의 속성(property) 이름이 객체에 존재하는지 확인하는 것에 사용됩니다.객체(Object) 뿐만 아니라 배열(Array)에서도 사용할 수 있어요!배열(Array)인 경우 -> 인덱스(index)가 있는지를 확인합니다!  // property : 확인하려는 속성 이름(또는 index)// object : 속성을 확인할 객체property in object 객체(Object)가 가진 직접적인 속성(property) 뿐만 아니라 프로토타입 체인에 있는 속성도 확인합니다.배열(Array)의 경우 해당 인덱스(index)가 존재하는지 확인할 수 있습니다.예시객체(Object)cons..
JavaScript for..in 과 for..of (iteration 문법)
·
JavaScript/이론 & 문법
JavaScript Iteration 문법Iteration 문법이란? 반복문법을 의미합니다.오늘은 JavaScript의 대표적인 반복문인 for..in과 for.. of의 차이점에 특징에 관해서 설명해 볼게요!for...infor...in은 열거 가능한 속성(key)을 순회하는 데 사용됩니다.배열(Array)에도 순회하는데 사용이 가능합니다.또한 객체(Object)의 속성에 접근할 때에도 사용됩니다. 그리고 for...in은 객체나 배열의 모든 열거 가능한 속성 이름을 반복합니다.배열(Array)인 경우에는 인덱스(index)를 순회합니다. - 숫자형(key)을 순회 예시)const obj = { a: 1, b: 2, c: 3 };for (let key in obj) { console.log(key);..
JavaScript 배열과 배열 생성 방법 / Array
·
JavaScript/이론 & 문법
배열 (Array)배열(Array)이란?한개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용합니다.// 배열 생성var arr = new Array();var arr = []; 배열 안에 들어있는 값들을 요소(element, item, etc)라고 합니다.var arr = [1, '2', true];// undefined = 아직 할당하지 않은 값// null = 독일어로 존재하지 않다. 라는 뜻// NaN = Not a Numbervar arr1 = [ undefined, null, NaN, 1000]; 배열의 특징배열은 번호가 메겨진 인덱스(index)를 갖는 특별한 유형의 '객체' 입니다.(객체이지만 객체와는 접근 방법이 달라요!)var colors = [ 'red', 'orange', 'yel..
JavaScript 객체 생성 방법 / Objects
·
JavaScript/이론 & 문법
객체(Object)객체는 데이터를 key:value 한 쌍의 구조로 저장하는 방식입니다.그래서 하나의 변수(식별자)에 여러 데이터들을 저장하고 관리할 수 있습니다. JavaScript에서의 거의 모든 것들은 객체입니다.배열(Array), 함수(Function), 객체(Object), 날짜(Date), 정규표현식(Regular Express) 등등..원시값을 제외한 모든 값들은 객체입니다. 물론 모든 객체들에 다루기는 것보다는 모듈의 기반이 되면서 ' key : value '의 한 쌍을 가지는 객체를 중심으로 살펴보겠습니다.1. 객체 리터럴(Object Literals)여러 가지 변수를 하나의 묶음으로 나타낼 때 객체를 사용합니다. 이러한 객체를 표현할 때, 중괄호 { }를 사용하여 나타내는 방식을 객체 ..