🏃🏻♀️ 연산자와 구문
[ 연산자 ]
값과 값사이에 연산자 사용시 연산자를 연산자 값(데이터)을 피연산자라고 함
피연산자 연산자 피연산자 연산자 피연산자
3 + undefined && '할롱방구'- 산술 연산자
+: 더하기-: 빼기*: 곱하기/: 나누기%: 나머지 (2로 나눴을때 나머지로 짝수(0)와 홀수(1) 구분시 유용)
- 할당 연산자
=: 이퀄기호로 변수에 값 할당 및 재할당const: 재할당 불가let: 재할당 가능
const a = 3;
a = a + 2; // Uncaught TypeError: Assignment to constant variable.
let b = 5;
b = b + 12; // 17+=: 더하기 할당연산자 (=+ 없음 X)
왼쪽변수 데이터 값에 오른쪽 피연산자를 값을 더해 왼쪽 피연산자인 변수에 재할당- 다른 산술연산자 사용가능 (+, -, *, /, %)
b // 17
b += 3 // 20
b -= 3 // 14
b *= 3 // 51
b /= 3 // 5.666666666666667
b %= 3 // 2- 증감 연산자
- 숫자데이터가 할당된 변수의 앞이나 뒤에
++(증가),--(감소)연산자를 사용하면++는 +1,--는 -1을 해줌- 증감연산자가 변수 뒤에 있으면 다음코드에 +1, -1 이 적용
- 증감연산자가 변수 앞에 있으면 해당코드에 +1, -1 이 바로 적용
let a = 3;
console.log(a++); // 3
console.log(a); // 4
console.log(++a); // 5
console.log(a); // 5
console.log(a--); // 5
console.log(a); //4
console.log(--a); // 3
console.log(a); // 3- 부정연산자
!데이터: 해당 데이터의 반대되는 boolean 데이터 출력
flase에 해당하는 데이터앞에 부정연산자를 넣으면 true값이 출력됨
console.log(!true) // false
console.log(!false) // true
console.log(!1) // false
console.log(!0) // true
// true
console.log(!!1);
console.log(!null);
console.log(!'');
// false
console.log(!123456);
console.log(!{});
console.log([]);
- 비교연산자
== / 동등연산자, !== / 부등연산자는 형변환때문에 부정확함 대신 === / 일치연산자, !== / 불일치연산자를 사용하는게 정확함
const a = 5;
const b = 7;
-
==/ 동등연산자: 양쪽 피연산자의 값이 같은가? 같으면 true
(형변환이 일어나 문자데이터'3'과 3을 true로 출력할수있음)
console.log(a == b); // false -
!=/ 부등연산자 : 양쪽 피연산자의 값이 다른가? 다르면 true
(형변환이 일어나 문자데이터'3'과 3을 false로 출력할수있음 )
console.log(a != b); // true -
===/ 일치연산자: 피연산자의 값이 데이터 타입까지 일치하는가? 일치하면 true
console.log(a === b); // false -
!==/ 불일치연산자: 피연산자의 값이 데이터 타입까지 불일치하는가? 불일치하면 true
console.log(a !== b); // true -
>: 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 큰가? 크면 true
console.log(a > b); // false -
>=: 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 크거나 같은가? 크거나 같으면 true
console.log(a >= b); // false -
<: 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작은가? 작으면 true
console.log(a < b); // true -
<=: 왼쪽 피연산자의 값이 오른쪽 피연산자의 값보다 작거나 같은가? 작거나 같으면 true
console.log(a <= b); // true
- 논리연산자
-
&&/ AND 연산자: 값이 모두 참이여야 true- 가장 왼쪽 피연산자부터 오른쪽으로 해석해 가장 먼저 만나는 거짓데이터 반환
- 모두가 참데이터면 마지막 참데이터 반환
console.log(true && false); // false
console.log(1 && 0); // 0
console.log(2 && 0 && 1); // 0
console.log(1 && undefined && null); // undefined
console.log("A" && "b" && "C"); // C-
||/ OR(또는) 연산자: 값중 하나(이상)만 참이면 true- 가장 왼쪽 피연산자부터 오른쪽으로 해석해 가장 먼저 만나는 참데이터 반환
- 모두 거짓데이터일시 마지막 거짓데이터 반환
console.log(false || true); // true
console.log(0 || 1); // 1
console.log(false || 0 || {}); // {}
console.log(false || [] || "c"); // []
console.log(function () {} || undefined || ""); // function
console.log(false || null || NaN); // NaN??/ Nullish 병합 연산자: 가장 왼쪽 피연산자 부터 해석해null,undefined(Nullish 데이터)를 제외한 모든 데이터중(거짓데이터포함) 처음 만나는 데이터 반환
- 피연산자 데이터가null,undefined즉 Nullish데이터만 있을때는 마지막 Nullish데이터를 반환
console.log(false ?? true); // false
console.log(null ?? 1 ?? true); // 1
console.log(undefined ?? null ?? NaN); // NaN
console.log(null ?? undefined); // undefined
console.log(0 ?? 3 ?? 1); // 0- 삼항 조건 연산자
if조건문 코드를 간소화할수있어 많이 사용함
조건문 ? '참일때 실행할 코드' : '거짓일때 실행할 코드'
const a = 5;
// if 조건문
if (a > 3) {
console.log("참!");
} else {
console.log("거짓...");
}
// 참!
// 심힝 조건 연산자
console.log(a > 3 ? '참!' : '거짓...'); // 참!- 전개 연산자
Spread Operator
배열데이터의 대괄호를 없애고 배열데이터 안에 있던 내용만 전개시켜줌
객체데이터의 중괄호를 없애고 객체데이터 안에 있는 속성만 전개시켜줌
function fn(x, y, z) {
console.log(x, y, z);
}
const a = [ 1, 2, 3 ];
fn(a); // (3) [1, 2, 3] undefined undefined
// y, z인자에 값이 없어 undefined 데이터가 반환
fn(...a); // 1 2 3
// [] 대괄호가 없어져 x, y, z 에 인자 값으로로 1, 2, 3 데이터가 들어감- 구조 분해 할당
[], {} 뒤에 할당연산자로(=) 변수명을 할당하면 배열과 객체의 구조(내용을) 분해해 알아서 할당해줌
const arr = [1, 2, 3, 4, 5];
const obj = {
f: 6,
g: 7,
h: 8,
i: 9,
j: 10
}-
배열 구조 분해 할당
const [a, b, c, d, e] = arr; // 1 2 3 4 5-
구조의 순서대로 할당되기때문에 앞의 구조를 빼고할당하고싶으면 할당하고 싶지않은 구조 갯수 만큼
,로 비워서 구분해줘야함
const [, , , d, e] = arr; // 4 5 -
전개연산자를 사용해 나머지 뒷구조를 차례로 하나의 변수에 배열로 할당할수 있음
const [a, b, ...rest] = arr;
console.log(a, b, rest); // 1 2 [3, 4, 5]
-
-
객체 구조 분해 할당
-
객체의 속성명을 변수로 지정해주면 원하는 속성의 값만 가져올수 있음
const {f, h, j} = obj; // 6 8 10 -
객체에 없는 속성명을 할당하면
undefined(자바스크립트가 자동으로 없다는 뜻을 암시적으로 할당) 할당되며=로 값을 할당해 기본값을 지정해줄수있음
const {f, g, none, h, i, j} = obj;
console.log(f, g, none, h, i, j); // 6 7 undefiend 8 9 10const {f, g, yes = 11, h, i, j} = obj;
console.log(f, g, yes, h, i, j); // 6 7 11 8 9 10 -
객체에 해당하는 속성이 있는데 구조분해시 값을 할당하면 이는 기본값이고 객체에서 속성에 할당한 데이터가 있기때문에 객체에서 할당한 값이 우선시됨
cosnt {f, g, h, i, j = 11} = obj; // 6 7 8 9 10 -
객체 구조분해할당시 객체의 속성명이 변수명이 되는데 변수명을 바꾸고 싶으면
:로 변경(객체에 없는 속성 기본값 할당과 변수명 변경 동시에 가능)
const {f:six, g:seven, k:eleven = 11} = obj;
console.log(six, seven, eleven) // 6 7 11 -
전개연산자를 사용해 원하는 속성을 제한 나머지를 구조를 객체로 할당할수 있음
const { h, ...rest} = obj;
console.log(f, h, rest) // 6 8 {g: 7, i: 9, j: 10}
-
- 선택적 체이닝
-
체이닝: 객체의 속성안에 또 속성이 있을경우 점표기법으로 속성명을 이어적어 타고가 값을 가져오는것
-
선택적 체이닝: 점표기법앞에
?를 사용하면?뒤의 내용을 실행하지 않고undefined반환
const userA = {};
const userB = undefined;
const userC = null;-
-
객체에 없는 속성을 불러내면
undefined가 반환되고undefined에 점표기법을 사용하면TypeError가 남(null도 동일)console.log(userA.name); // undefined
console.log(userB.name); // TypeError
console.log(userC.name); // TypeError
-
체이닝을 하다 없는 속성을 불러내어
undefined가 반환되었는데 거기에 또 점표기법으로 체이닝을 하게되어도TypeError가 남 -
선택적 체이닝을 사용해 점표기법앞에
?를 사용하여 오류나는 것을 방지console.log(userB?.name); // undefined
console.log(userC?.name); // undefined -
여러개의 객체가 동일한 기본속성을 가지고있는데 기본속성외 다른속성이 았는 객체가 있을수도 있는 특수한 경우에만 사용
-
const userD = {
name: 'POPPY',
age: 33,
address: {
country: 'Korea',
city: 'Seoul'
}
}
const userE = {
name: 'GGUGGU',
age: 333
}
console.log(userD.address.city); // Seoul
console.log(userE.address.city); // TypeError
// userE객체에는 address 속성이 없어 undefined가 반환되는데 여기에 점표기법을 또 사용해 타입에러가남
console.log(userE.address?.city); // undefined
// 점표기법 앞에 ?를 사용해 ?뒤의 코드를 실행하지않고 undefined 반환
// e.g.
console.log(userE.address?.city || '주소 없음'); // 주소없음
// || 연산자는 왼쪽부터 차례로 읽어나가다 첫번째 만나는 참데이터를 반환
// undefined || '주소 없음' -> 거짓데이터 || 참데이터 -> 주소 없음 반환
[ 구문 - 조건문 ]
- if 조건문
- 조건이 참일 경우에만 실행
if (조건) {
// 조건이 참일때만 실행
}- 조건이 참 또는 거짓일때 실행할 코드 각각 지정
if (조건) {
// 조건이 참일때 실행
} else {
// 조건이 거짓일때 실행
}- 여러가지 조건이 참일 경우 조건마다 실행할 코드 지정, 모든 조건이 거짓일경우 실행할 코드 지정
if (조건1) {
// 조건1이 참일때 실행
} else if (조건2) {
// 조건2가 참일때 실행
} else if (조건3) {
// 조건이 참일때 실행
} else {
// 조건1, 조건2, 조건3 모두 거짓일때 실행
}- swich 조건문
- 매개변수(조건)의 값이 정확하게 떨어질때 swich문을 사용함
- swich문은 if문으로 변경가능하지만 if문은 상황에따라 swich문으로 변경이 불가할 수 있음
- break 사용
case에 break를 사용하면 조건과 케이스의 값이 일치할때 일치하는 case의 코드가 실행되고 종료
swich (조건) {
case 값1:
// 조건이 '값1'일때 실행
break; // 조건이'값1'일때 실행될 코드 실행 후 종료
case 값2:
// 조건이 '값2'일때 실행
break; // 조건이'값2'일때 실행될 코드 실행 후 종료
case 값3:
// 조건이 '값3'일때 실행
break; // 조건이'값3'일때 실행될 코드 실행 후 종료
defult:
// 조건이 '값1', '값2', '값3' 모두 다 아닐때 실행
// case에 break가 없을때 타고 내려와 실행
}
// e.g.
function price (fruit) {
let p;
swich (fruit) {
case '딸기':
p = 1000;
break;
case '복숭아':
p = 2000;
break;
case '수박':
p = 3000;
defult:
p = 0;
}
return p
}
console.log(price('사과')); // 0 -> '사과'인 case가 없어 defult의 코드 실행
console.log(price('딸기')); // 1000
console.log(price('복숭아')); // 2000
console.log(price('수박')); // 0 -> '수박' case에 break가 없어 defult의 코드 실행- return 사용
case에 return을 사용하면 break를 사용하지 않아도 조건과 case의 값이 일치할때 case의 코드가 실행되고 종료
swich (조건) {
case 값1:
return // 조건이'값1'일때 실행될 코드 -> 실행 후 종료
case 값2:
return // 조건이'값2'일때 실행될 코드 -> 실행 후 종료
case 값3:
return // 조건이'값3'일때 실행될 코드 -> 실행 후 종료
defult:
return // 조건이 '값1', '값2', '값3' 모두 다 아닐때 실행
}
// e.g.
function price(fruit) {
case '딸기':
return 1000;
case '복숭아':
return 2000;
case '수박':
return 3000;
defult:
return '없음';
}
console.log(price('사과')); // 없음 -> '사과'인 case가 없어 defult의 코드 실행
console.log(price('딸기')); // 1000
console.log(price('복숭아')); // 2000
console.log(price('수박')); // 3000[ 구문 - 반복문 ]
반복문은 {}안의 로직이 반복될때마다 초기화됨 -> {}안에서 const 상수를 사용해도 오류가 나지않음
- for 반복문
- 실행순서
for (1. 초기화; 2. 조건; 4. 증감) {
3. 조건이 참이면 반복 실행할 코드
}
//e.g.
for (let i = 0; i < 10; i += 1) {
console.log(i); // 콘솔에 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 한줄씩 찍힘
}- break 키워드 사용
for (let i = 0; i < 10; i += 1) {
if ( i > 3 ) {
break;
}
console.log(i); // 3보다 크면 break(종료)되어 콘솔에 0, 1, 2, 3 까지만 한줄씩 찍히고 종료
}- continue 키워드 사용
현재 반복을 종료하고 다음 반복 실행
for (let i = 0; i < 10; i += 1) {
if ( i % 2 === 0) {
continue; // i가 0, 2, 4, 6, 8 일때 조건 참 -> 밑의 코드실행하지 않고 다음 반복으로 넘어감
}
console.log(i); // 1, 3, 5, 7, 9 -> if조건 거짓, if조건문 코드가 실행되지않고 콘솔코드가 실행됨
}- for of 반복문
- of 키워드를 사용하면 배열데이터의 각각의 배열 아이템에 for 반복문 보다 간소화하여 조회
- 배열데이터 안에 객체데이터가 아이템으로 들어있으면 .(점표기법)으로 객체의 속성에 접근가능
for (const 변수명 of 배열데이터) { // 배열데이터의 아이템을 담을 변수 지정
console.log(변수명); // 배열데이터의 배열들이 콘솔에 한줄씩 출력
}
// e.g.
const colors = ['Pink', 'Yellow', 'White'];
for (const color of colors) {
console.log(color); // Pink, Yellow, White 가 콘솔에 한줄씩 차례로 출력
}- for in 반복문
- 키워를 사용하여 객체의 속성(key)과 값(value)을 조회
- 객체의 속성은 고유의 값이기 때문에 순서를 가지지 않아 순서를 보장할수 없으며 속성의 갯수만큼 반복함
const user = {
name: 'Poppy',
age: 33,
isValid: true,
city: 'Seoul'
}
for (const key in user) { // 객체의 속성을 담을 변수 지정
console.log(key); // 속성 조회 -> name, age, isValid, city 속성을 문자데이터로 한줄씩 콘솔에 출력
console.log(user[key]); // 속성이름이 []안으로 들어가 속성값 조회
// Poppy, 33, true, Seoul -> 값의 데이터타입 그대로 조회해서 한줄씩 콘솔에 출력
}- while 반복문
- 조건이 참이면 무한 반복(브라우저 멈춤)하고 거짓이 되어야 반복이 멈추기 때문에 거짓이 되는 시점을 명확이 명시해야함
- for문보다 조건을 간소화 할수있음
while (조건) {
// 참이면 계속반복
}
// e.g.
let n = 0;
while (n < 3) {
console.log(n); // 0 < 3 계속 참 무한한복
}
while (n < 3) {
console.log(n); // 0 1 2 만 참
n += 1; // 증감시켜 조건이 거짓이 되면 종료
}- do while 반복문
- 조건보다 앞에 있는 {}가 무조건 먼저 실행되고 조건을 판단하기때문에 코드가 최초 한번은 실행되고 조건이 참이면 {}반복 실행
do {
조건이 참인지 거짓인지 판단하기 전에 일단 먼저 실행
} while (조건)
// e.g.
let n = 0;
do {
console.log(n); // 0은 거짓데이터지만 조건을 판단하기전에 먼저실행되기 때문에 콘솔에 0 출력
} while (n) // 조건 거짓 {} 반복되지않고 종료
do {
console.log(n); // 0(거짓이지만 조건판단전에 먼저 실행), 1(조건이 참), 2(조건이 참)
n += 1; // n 1씩 증감
} while (n < 3) // n이 증감되어 3이되면 조건이 거짓 -> {} 반복되지않고 종료📌 취향따라 선택
for반복문은 배열이나 객체에 특화되어있어 배열, 객체 데이터를 다룰때 사용하면 좋음!
wihle반복문은 코드를 간소화 할수있어 단순 반복을 시킬때 사용 하면 좋음!
🎮 패스트캠퍼스
프론트엔드 웹 개발의 모든 것 초격차패키지 Online.
