본문 바로가기
반응형

웹/Javascript9

JS에서의 함수들 이번에는 JS에서 자주 사용하는 함수들 몇 가지를 짚고 넘어가겠습니다.그 전에 자바스크립트에서의 함수 선언 방법과 종류 그리고 콜백 함수가 무엇인지 가볍게 알고 넘어가겠습니다.함수 선언 방법일반 함수자바스크립트에서 일반 함수는 function 을 사용해서 함수를 선언합니다.일반 함수는 함수 선언식과 함수 표현식으로 함수를 정의할 수 있다.둘의 차이가 있는데 이를 한 번 알아보겠습니다.함수 선언식함수 선언식은 자바스크립트에서 함수를 선언하는 가장 기본적인 방법입니다.아래와 같은 방식을 함수 선언식이라고 합니다. 아마 익숙하신 분들도 계실 것 같아요function hello() { console.log("Hello");}함수 선언식은 function 키워드를 써주고, 함수의 이름을 써줍니다.이 함수를 호출.. 2025. 3. 27.
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.
반응형

티스토리툴바