🏃🏻‍♀️ 연산자와 구문

[ 연산자 ]

값과 값사이에 연산자 사용시 연산자를 연산자 값(데이터)을 피연산자라고 함

피연산자 연산자   피연산자   연산자   피연산자
   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 10
- const {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반복문은 코드를 간소화 할수있어 단순 반복을 시킬때 사용 하면 좋음!

저작자표시 비영리 변경금지

'Javascript' 카테고리의 다른 글

6. [JavaScript] 클래스 (0)	2023.07.27
5. [JavaScript] 함수 (0)	2023.07.25
3. [JavaScript] 데이터 타입 (0)	2023.07.22
2. [JavaScript] NodeJs와 npm 프로젝트 개발서버실행 및 빌드 (0)	2023.07.22
1. [JavaScript] 개요 (0)	2023.07.22

오늘도 또각또각‍ φ(*ᴗ͈ˬᴗ͈)φ.ﾟ

4. [JavaScript] 연산자와 구문

🏃🏻‍♀️ 연산자와 구문

[ 연산자 ]

- 산술 연산자

- 할당 연산자

- 증감 연산자

- 부정연산자

- 비교연산자

- 논리연산자

- 삼항 조건 연산자

- 전개 연산자

- 구조 분해 할당

- 선택적 체이닝

[ 구문 - 조건문 ]

- if 조건문

- swich 조건문

[ 구문 - 반복문 ]

- for 반복문

- for of 반복문

- for in 반복문

- while 반복문

- do while 반복문

'Javascript' 카테고리의 다른 글

티스토리툴바

4. [JavaScript] 연산자와 구문

🏃🏻‍♀️ 연산자와 구문

[ 연산자 ]

- 산술 연산자

- 할당 연산자

- 증감 연산자

- 부정연산자

- 비교연산자

- 논리연산자

- 삼항 조건 연산자

- 전개 연산자

- 구조 분해 할당

- 선택적 체이닝

[ 구문 - 조건문 ]

- if 조건문

- swich 조건문

[ 구문 - 반복문 ]

- for 반복문

- for of 반복문

- for in 반복문

- while 반복문

- do while 반복문

'Javascript' 카테고리의 다른 글

관련글

티스토리툴바