[Javascript] New Javascript 7장 Null 병합 연산자

📚 1. Null 병합 연산자란?자바스크립트에서 ??는 Null 병합 연산자라고 불리는데, 이 연산자는 값이 null 또는 undefined 일 때만 오른쪽 값을 반환하고, 그렇지 않으면 왼쪽 값을 반환합니다, 즉 값이 없을때만 대체값을 쓰는 목적을 가진 연산자입니다.📚 2. 기본 문법let 결과 = 값1 ?? 값2;값1이 null 또는 undefined -> 값2를 반환그 와(0, 빈문자열 "", false 값을 falsy 값을 포함) -> 값1반환📚 3. 예제 코드🦖 1.기본 동작let name = null;let defaultName = "Guest";let user = name ?? defaultName;console.log(user);👉 name이 null이라 ??연산자 오른쪽 값인 G..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 27.
• textsms

[Javascript] New Javascript 6장 - 옵셔널 체이닝

1. 옵셔널 체이닝이란?자바스크립트를 사용하다 보면 객체 속성에 접근할 때 예상치 못한 에러(undefined 나 null)값으로 오류가 발생하는 경우가 흔하게 발생하고 있습니다. 예를 들어 API 응답에서 특정 필드가 누락되거나, 깊은 객체 구조에 중간 값이 비어있으면 흔히 다음과 같은 에러를 보게 됩니다.Uncaught TypeError: Cannot read properties of undefined (reading 'prop')이러한 문제를 해결하기 위해선 기존에 조건문 또는 논리 연산자(&&)를 사용했지만, 코드가 길어지며 점점 가독성이 떨어지는 계기가 되었고 이러한 불편함을 해소하기 위해 ECMAScript 2020(ES11)에서 도입된 문법이 바로 옵셔널 체이닝(Optional Chainin..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 25.
• textsms

[Javascript] New Javascript 5장 - 스프레드 연산자

☑️ 1. 스프레드 연산자 (...)스프레드 연산자는 배열이나 객체를 펼쳐 복사하거나, 함수인자로 전달할 때 사용되며 객체나 배열의 요소를 펼처서 복사 또는 병합할 때 사용되는 연산자입니다. 배열 예시const arr1 = [1, 2, 3];const arr2 = [...arr1, 4, 5, 6]; // arr1 요소를 펼처 arr2에 추가console.log(arr2); // [1, 2, 3, 4, 5, 6]const str1 = ["Hello"];const str2 = [...str1, " ", "World"].join(""); // join을 사용해 arr1 arr2 문자 합치기console.log(str2); // Hello World객체 예시const nobj1 = { a: 1, b: 2 };c..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 24.
• textsms

[Javascript] New Javascript 4장 - 디스트럭처링 할당

✅ 1. 배열 구조 분해배열 구조 분해는 배열의 값을 순서대로 변수에 담을 수 있습니다.const arr = [1, 2, 3];const [x, y] = arr;console.log(x); // 1console.log(y); // 2 기본값을 지정할 수도 있습니다 (값이 없을 경우 대체)// 기본 값 지정 (값이 없을 때 대체)const arr = [10];const [a, b = 20] = arr;console.log(a); // 10;console.log(b); // 20; 값을 건너뛰고 필요한 것만을 가져올 수 있습니다.const arr = [1, 2, 3, 4];const [first, , third] = arr;console.log(first); // 1console.log(third); // ..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 20.
• textsms

[Javascript] New Javascript 3장 - 템플릿 리터럴

✅ 1. 템플릿 리터럴(Templae literal)템플릿 리터럴이란 백틱( ` )을 사용하여 문자열을 작성하는 방법으로 변수나 표현식을 더욱 쉽게 문자열 안에 삽입하는 기능입니다. 여러 줄 문자열에 작성도 가능합니다.const name = "Jammy";const age = 19;// 기존 문자열 방식const speak1 = "Hello, My Name is" + name + "I'm " + age + "years old";// 템플릿 리터럴 방식const speak2 = `Hello, My Name is ${name}, I'm ${age} years old`;console.log(speak2);// Result: Hello, My Name is Jammy, I'm 19 years old ✅ 장점: ..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 14.
• textsms

[Javascript] New Javascript 2장 - 화살표 함수

✅ 1. 화살표 함수란?Javascript의 화살표 함수(Arrow Function)은 ES6(ECMAScript 2015)에 도입된 간결한 함수 표현식 문법으로 function 키워드 대신 => (화살표)를 사용하여 함수를 작성합니다. 주로 익명 함수, 콜백 함수 작성 시 더 짧고 간결하게 쓰기 위해 사용합니다.특징function 키워드 없이 작성 가능 -> 코드의 간결함함수 내부 this가 상위 스코프의 this를 그대로 사용익명 함수가 주로 쓰임 -> 이벤트 핸들러, 콜백에 적합arguments 객체가 없음 (필요시 나머지 매개변수 사용)✅ 2. 기본 문법화살표 함수는 기본적으로 function 대신 => 기호를 사용해 함수를 정의합니다. 함수 몸체가 한 줄이라면 중괄호( { } )와 return ..

• format_list_bulleted Front-End/JavaScript
• · 2025. 8. 12.
• textsms