Frontend/JavaScript19 [JavaScript] null 병합 연산자 1. null 병합 연산자 Nullish coalescing operatornull ?? "Right";undefined ?? "Right";"Left" ?? "Right";"Left" ?? undefined; null 병합 연산자, '??'는 좌측의 피연산자가 null 또는 undefined일 때 우측 피연산자의 값을 return 하고그렇지 않은 경우에는 왼쪽의 피연산자의 값을 return 하는 논리 연산자이다. 상단의 예제 코드를 실행해 보는 것으로 null 병합 연산자가 어떻게 동작하는지 파악해 보자.예제 코드를 실행하면, 좌측의 피연산자의 값이 null 또는 undefined인 경우우측 피연산자인 문자열 "Right"라는 값이 return 되는 것을 확인할 수 있고 반대로 좌측 피연산자의 값이 n.. 2024. 6. 21. [JavaScript] Promise 1. Promise 2. Promise 객체 내부 Property 3. '.then()' / '.catch()' / '.finally()' ① .then() ② .catch() ③ .finally() 4. Reference 1. Promise Promise란 비동기 작업을 처리할 때 Callback 함수 대신 유용하게 활용할 수 있는 JavaScript 내장 객체로, 비동기 작업을 수행하고 나서 작업의 성공/실패 여부와 그 결과 값을 나타낸다. const prom = new Promise((resolve, reject) => { //executor, 실행자, 실행 함수 }); 위의 예시처럼 'new Promise()' 연산자를 통해 Promise 객체를 생성할 수 있다. 여기서 Promise 객체를 생성.. 2024. 4. 10. 최대 공약수 구하는 Logic function GetGCD(num1, num2){ let gcd = 1; for (let i = 2; i 2024. 4. 2. [JavaScript] 콜백 함수 Callback Function 1. 콜백 함수 Callback Function 콜백 함수란 인자, 값의 형태로 전달되는 함수를 말한다. JavaScript에서 함수를 순차적으로 실행하고자 할 때 활용할 수 있는 방법이다. function Test(Callback){ Callback(); console.log("Test 함수 실행"); } const Test2 = () => { console.log("Test2 함수 실행"); } Test(() => { console.log("임의 함수 생성, 실행")}); Test(Test2); 위의 예제처럼 Test 함수 호출 시, 임의의 함수를 만들어서 콜백 함수로 활용할 수도 있고 아니면 기존에 만들어둔 함수를 콜백 함수로 사용할 수도 있다. 콜백 함수는 기본적으로 함수를 다른 함수의 인자로 전.. 2024. 2. 4. [JavaScript] 구조 분해 할당 1. 구조 분해 할당 Destructuring Assignment 구조 분해 할당은 배열의 요소나 객체의 Property를 말 그대로 분해해서 각 변수에 할당하는 문법이다. 기존 배열이나 객체에 저장된 데이터 중 일부만 필요한 경우에 활용할 수 있는 문법이다. 먼저 배열의 요소를 분해해서 할당하는 방법부터 알아보도록 하겠다. ① 배열, 구조 분해 할당 (1). 배열 요소를 각 변수에 분해 할당하기 const colors = ["Red", "Green", "Blue"]; let [c1, c2, c3] = colors; console.log(`c1 : ${c1}`); //c1 : Red console.log(`c2 : ${c2}`); //c2 : Green console.log(`c3 : ${c3}`); /.. 2024. 1. 9. [JavaScript] 배열 Array 목차 0. 개요 1. 배열 Array ① 배열의 정의 ② 배열 요소 접근 2. 배열 요소 추가 및 삭제 ① 배열 요소 추가 ② 배열 요소 삭제 3. Reference 0. 개요 빨간색, 파란색, 초록색 위의 세 가지 색상을 'Color'라는 변수에 저장하려고 한다. 기본적으로 변수에는 한 개의 값만 저장할 수 있기 때문에, 객체를 활용해서 세 가지 색상 요소를 'Color' 변수에 저장해야한다. let Color = { "Color1": "Red", "Color2": "Blue", "Color3": "Green" }; 변수 'Color'에 "빨간색", "파란색", "초록색" 세 가지 색상이 객체의 형태로 할당된 것을 확인했으니 이제 다른 색상을 하나 더 추가해 보자. let Color = { "Color.. 2023. 10. 29. [JavaScript] this 목차 1. this란? ① this ② this.(Key)와 '객체 변수'.(Key) 비교 2. JavaScript에서의 this 3. Reference 1. this란? 이전 게시글에서 메서드를 추가하고 사용하는 것을 다뤘지만 객체 메서드가 객체 Property를 참조할 수 있게 하는 방법에 대해서는 다루지 않았었다. 그러므로 이번에 다룰 것은 메서드가 객체 Property를 참조하려고 할 때 쓸 수 있는 'this' 키워드에 관한 것이다. ① this //this 예제 const Person = { name: "John", Hello(){ console.log(`안녕하세요. 저는 ${this.name}입니다.`); } }; Person.Hello(); 객체 메서드에서 'this'는 아래와 같이 입력하.. 2023. 10. 25. [JavaScript] 객체 (Object) 1. 객체 ① 객체 생성 방법 (1). 객체 생성자 (2). 객체 리터럴 ② Property 2. 객체 Property 접근법 ① 점 표기법 ② 대괄호 표기법 3. 메서드 Method ① 메서드 생성 방법 (1). 외부 함수를 객체 메서드로 할당하는 방법 (2). 객체 리터럴 시, 메서드를 같이 생성하는 방법 4. Reference 1. 객체 이번에 정리한 것은 JavaScript의 비 원시 타입의 자료형인 객체에 대한 것이다. 기본적으로 변수에는 값을 하나만 저장할 수 있다. 변수에 원시 타입인 number, String, boolean 값 중 하나를 할당했다면 이후에 해당 변수에 새로운 값을 재할당하기 전까지 한 개, 한 종류의 값만 저장된 상태이다. let Sample = 10; console.lo.. 2023. 9. 20. [Javascript] 함수 표현식, 화살표 함수 목차 1. 함수 표현식 ① 함수 표현식 ② 함수 선언식과 함수 표현식 ③ 일급 객체 2. 화살표 함수 1. 함수 표현식 Javascript 함수 게시글에서 함수를 만들 때 아래와 같은 형식으로 만든다고 정리했었다. function print(){ console.log("함수 실행."); } 이와 같이 function 키워드를 사용해서 함수를 선언해서 함수를 생성하는 방식을 함수 선언식이라고 한다. Javascript에서는 함수 선언식 외에도 함수를 만들 수 있는 방식이 더 존재하는데 이번에 공부한 것은 함수를 만드는 방법 중 하나인 함수 표현식에 관한 것이다. 바로 본론으로 들어가도록 하겠다. ① 함수 표현식 //함수 표현식 var print = function (){ console.log("Hello".. 2023. 8. 15. 이전 1 2 3 다음
