본문 바로가기

강의 실습/한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지63

비 구조화 할당 배열과 객체를 우아하게 사용하는 방법 (구조분해할당) 1. 배열의 비 구조화 할당 // 배열의 값 변수에 할당 let arr = ["one", "two", "three"]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one, two, three); // one two three // 비 구조화 할당을 이용한 배열의 값 변수에 할당 (배열의 기본변수 비 구조화 할당) let arr = ["one", "two", "three"]; let [one, two, three] = arr; console.log(one, two, three); // one two three // 배열의 선언분리 비 구조화 할당 let [one, two, t.. 2023. 12. 20.
조건문 업그레이드 Upgrade If Condition 1. 배열 활용한 조건문 업그레이드 // 주어진 문자열이 한식인지 검사하는 함수 // 논리표현식 사용 function isKoreanFood(food) { if (food === "불고기" || food === "비빔밥" || food === "떡볶이") { return true; } return false; } // 배열 내장함수 includes 활용 function isKoreanFood(food) { if (["불고기", "떡볶이", "비빔밥"].includes(food)) { return true; } return false; } const food1 = isKoreanFood("불고기"); const food2 = isKoreanFood("파스타"); con.. 2023. 12. 19.
단락회로 평가 단락회로 평가 : 왼쪽에서 오른쪽으로 연산하게 되는 논리연산자의 연산 순서를 이용하는 문법으로, 뒤에 위치한 피연산자를 확인할 필요 없이 연산을 끝내는 것. (논리연산자의 특성을 이용한 문법) 1. 논리연산자를 이용한 단락회로 평가 console.log(false && true); // 앞에가 false면 뒤에는 볼 필요 없이 평가 종료 console.log(true || false); // 앞에가 true면 뒤에는 볼 필요 없이 평가 종료 console.log(!true); 2. Truthy & Falsy 활용한 단락회로 평가 // 단락회로 평가 사용 전 const getName = (person) => { if (!person) { return "객체가 아닙니다."; } return person.na.. 2023. 12. 18.
삼항 연산자 조건문 한 줄로 끝내기 1. 삼항연산자 조건식 ? 참 일때 수행할 식 : 거짓일 때 수행할 식 // 양수 음수 판별식 let = 3; // if문 if (a >= 0) { console.log("양수"); } else { console.log("음수"); } // 삼항연산자 a >= 0 ? console.log("양수") : console.log("음수"); // 양수 기존 5줄 코드를 1줄로 줄일 수 있다. // 빈 배열 판별식 let a = []; // if문 if (a.length === 0) { console.log("빈 배열"); } else { console.log("안 빈 배열"); } // 삼항연산자 a.length === 0 ? console.log("빈 배열") : console.log.. 2023. 12. 17.
Truthy & Falsy 참 같은 값, 거짓 같은 값 // 자바스크립트의 Truthy & Falsy let a = ""; // false let a = "string"; // true if (a) { console.log("TRUE"); } else { console.log("FALSE"); } 자바스크립트 조건식에는 boolean 값을 넣지 않아도 참이나 거짓으로 인식되는 속성이 있다. 1. Truthy true가 아니어도 조건문에서 참으로 평가하는 값. 빈 배열 [], 빈 객체(리터럴) {}, 숫자형 값, 문자열 값 2. Falsy false가 아니어도 조건문에서 거짓으로 평가하는 값. null, undefined, 0, -0, NaN, "" 3. Truthy와 Falsy 활용 // 객체를 매개변수로 받아서 받은 객체에서 특.. 2023. 12. 13.
배열 내장 함수 1. forEach 배열을 모든요소 1번씩 순회. 내장함수에 매개변수로 콜백함수를 전달. const arr = [1, 2, 3, 4]; // for문을 통한 배열 순회 for (let i = 0; i console.log(elm)); // 화설표 함수로 응용 arr.forEach(function (elm) { console.log(elm); console.log(elm * 2); // 각각의 요소에 응용가능 }); 2. map 원본배열의 모든 요소를 순회하며 연산하여 return 된 값들을 따로 배열로 만들어 반환. // 배열의 모든요소에 2를 곱하여 .. 2023. 12. 11.
반복문 반복문 : 특정 명령을 반복해서 수행 // 이름 5번 출력 console.log("이름"); console.log("이름"); console.log("이름"); console.log("이름"); console.log("이름"); // 이름 100번 출력 console.log("이름"); // ... console.log("이름"); 코드가 너무 많아져서 수정하기 힘들고, 다른 사람과 협업도 힘들어진다. 반복문을 이용하면 중복되는 코드를 줄일 수 있다. 1. for for (초기식(반복의 주체가 되는 변수); 조건식(반복이 조건을 만족할 때만 돌아가도록 설정); 연산(반복이 1번 수행될 때마다 실행될 연산)) { 반복 수행할 명령 } // for문 for (let i = 1; i 2023. 12. 10.
배열 배열 : 순서있는 요소들의 집합. 여러개의 항목이 들어있는 List. 배열은 비원시 타입이다. 객체와 더불어 가장 많이 사용되는 자료형이다. 1. 배열 객체 생성 // 생성자를 이용한 방법 let arr = new Array(); // 대괄호를 이용한 방법 : 배열 리터럴 방식 let arr = []; // 배열에 값 넣기 let arr = [1, 2, 3, 4]; console.log(arr); // [1, 2, 3, 4] // 배열에 값으로 여러 자료형이 들어갈 수 있다. let arr = [1, "2", true, null, undefined, {}, [], function() {}]; 2. 배열의 인덱스 배열은 데이터가 위치한 순서(인덱스)를 통해 접근. // 배열의 인덱스 let arr = [1.. 2023. 12. 9.
객체 자바스크립트의 자료형 - Primitive Type (원시 타입) : 한 번에 하나의 값만 가질 수 있음. 하나의 고정된 저장 공간 이용. - Non-Primitive Type (비원시 타입) : 한 번에 여러 개의 값을 가질 수 있음. 여러 개의 고정되지 않은 동적 공간 사용. 객체는 비원시 타입이다. 1. 객체 생성 // 객체 생성자를 이용한 방법 let person = new Object(); // 중괄호를 이용한 방법 : 객체 리터럴 방식 let person = {}; // 객체 프로퍼티 let person = { // key - value 형태의 값 가짐. 여러개의 프로퍼티를 가질 수 있다. 각각 자료형이 달라도 된다. key: "value" // 프로퍼티 (객체 프로퍼티) : 속성, 객체가 가.. 2023. 12. 6.

티스토리툴바