본문 바로가기
반응형

JavaScript7

JS의 스프레드 연산자 스프레드 연산자(Spread Operator)는 자바스크립트의 배열이나 객체를 개별 요소로 분리하는 데 사용하는 문법입니다.형태는 점 3개(...)로 이루어져 있습니다....배열 // 배열의 각 요소를 펼침...객체 // 객체의 프로퍼티를 펼침스프레드 연산자는 배열이나 객체의 요소를 하나씩 펼쳐서 복사하거나 병합할 때 사용하는 문법 입니다.배열배열을 쉽게 복사하거나 결합할 때 매우 유용합니다.배열 복사const arr = [1, 2, 3];const copy = [...arr];console.log(copy); // [1, 2, 3] (복사본 생성)위 코드에서 arr 배열이 [...arr]로 복사되어 완전히 동일한 배열이 새롭게 만들어졌습니다. 두 배열은 서로 독립적입니다.배열 병합const a = .. 2025. 3. 27.
JS의 구조 분해 할당 구조 분해 할당(Destructuring Assignment)은 자바스크립트에서 배열이나 객체와 같은 자료구조의 값을 쉽게 꺼내어 개별적인 변수에 할당할 수 있도록 하는 문법입니다.따라서 배열이나 객체에서 필요한 값만 간단하게 추출해서 사용하는 것입니다.배열만약에 아래와 같은 배열이 있다고 해보겠습니다.const numbers = [10, 20, 30, 40];// 일반적인 방법const a = numbers[0];const b = numbers[1];const c = numbers[2];const d = numbers[3];// 구조 분해 할당const [x, y, z, w] = numbers;// x, y, z, w를 각각 a, b, c, d와 똑같이 사용 가능~!// 더 간결해짐!좀 더 살펴보기조금.. 2025. 3. 27.
JS의 옵셔널 체이닝 기존에는 . 을 통해서 객체가 가진 데이터에 접근을 했습니다.그런데 만약에 앞서 객체의 타입에서 살펴봤던 student 객체에 없는 데이터에 접근한다면 어떻게 될까요?let student = null;console.log(user.name); // Uncaught TypeError: Cannot read properties of null타입 에러가 발생합니다.자바스크립트에서는 존재하지 않는 객체의 속성이나 배열에 접근하면 런타임 오류가 발생합니다.옛날에는 이 문제를 해결하기 위해서 아래와 같은 방법을 사용했습니다.if (student && student.name) { console.log(student.name);} else { console.log("student 또는 name이 없습니다.");}근.. 2025. 3. 27.
JS의 템플릿 리터럴 사실 자료형의 문자형을 할 때 살펴봤습니다.템플릿 리터럴은 큰 따옴표 나 작은 따옴표 대신 백틱(``) 을 이용합니다.따라서 예제들을 통해서 좀 더 살펴보겠습니다.// 두 문자열을 줄바꿈을 포함해서 출력console.log(`string text line 1string text line 2`);var a = 5;var b = 10;console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);// "Fifteen is 15 and not 20."let name = 'KKW';const greeting = 'Hello my name is ${name}';console.log(greeting);// 중첩 템플릿const classes = `header ${ isLar.. 2025. 3. 27.
JS에서의 비교연산자 비교연산자비교연산자는 두 값의 동등 여부나 대소 관계를 비교하여 결과를 반환하는 연산자를 말합니다.연산자는 불리언(Boolean) 값 (true 또는 false)을 반환하며, 조건문(if, while 등)이나 삼항 연산자 등의 논리 흐름을 제어하는 데 쓰입니다.예를 들어 5 은 true를 반환하고, 5 == 10은 false를 반환합니다.비교 연산자설명 (의미)예시결과==동등(느슨한 동등)5 == "5"true===동등(엄격한 동등)5 === "5"false!=부등(느슨한 부등)5 != "5"false!==부등(엄격한 부등)5 !== "5"true>보다 큼7 > 3true보다 작음7 false>=크거나 같음5 >= 5true작거나 같음4 false위 표에서 보듯이, ==와 ===는 모두 같은지 비교하지만.. 2025. 3. 27.
JS의 자료형 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속합니다.이번에는 이 녀석을 살펴봅시다.자바스크립트에서 변수는 자료형에 관계없이 모든 데이터가 가능합니다.이게 무슨 말이냐면 어떤 변수를 let 키워드를 통해 선언한 뒤 문자열을 할당했다고 가정합시다.여기서 저는 다시 이 변수에 숫자를 할당할 수 있습니다.let a = "Hello";a = 10// 에러 상황이 아님. 정상적인 상황따라서 어떤 순간에는 문자열일 수도, 어떤 순간에는 숫자일 수도, 또 어떤 순간에는 다른 자료형일 수도 있습니다.이처럼 데이터의 타입이 존재하긴 하지만 타입이 언제든지 바뀔 수 있는 언어를 동적 타입 언어라고 합니다.자바스크립트는 이에 속하겠죠.이제 본격적으로 알아봅시다.원시 타입과 객체 타입자바스크립트의 데이터.. 2025. 3. 27.
반응형

티스토리툴바