[ JS ] - 연산자와 구문

200원짜리개발자·2024년 6월 11일

FrontEnd

목록 보기
19/29
post-thumbnail

제로베이스 자바스크립트 기초개념 연산자와 구문 부분 정리
축약된 부분이 존재할 수 있습니다.

연산자

산술 연산자

// 산술 연산자 (Arithmetic operator)
  
console.log(1 + 2);
console.log(5 - 7);
console.log(3 * 4);
console.log(10 / 2);
console.log(7 % 5);

할당 연산자

// 할당 연산자 (Assignment Operators)
  
let a = 3;
console.log(a);
  
// a = a + 2
a += 2;
console.log(a);
  
// a = a - 2
a -= 2;
console.log(a);
  
// a = a * 2
a *= 2;
console.log(a);
  
// a = a / 2
a /= 2;
console.log(a);
  
// a = a % 2
a %= 2;
console.log(a);

증감 연산자

// 증감 연산자 (Increment & Decrement Operators)는 변수를 1씩 더하거나 빼는 연산자이다.
  
// ++ 기호가 뒤에 있는 경우
let b = 3;
console.log(b++);
console.log(b);
  
// ++ 기호가 앞에 있는 경우
let c = 3;
console.log(++c);
console.log(c);
  
// -- 기호가 뒤에 있는 경우
let d = 3;
console.log(d--);
console.log(d);
  
// -- 기호가 앞에 있는 경우
let f = 3;
console.log(--f);
console.log(f);

// 증감 연산자 보다는, 할당 연산자를 사용하는 것을 추천한다.
let e = 3;
e += 1;
console.log(e);
e -= 1;
console.log(e);

부정 연산자

// 부정 연산자(Negation Operator)는 참과 거짓의 반대값을 불린 데이터로 반환합니다.
  
console.log(!true); // false
console.log(!false); // true

console.log("중첩 사용!!");
console.log(!0); // true
console.log(!!0); // false
console.log(!!!0); // true
console.log(!!!!0); // false
  
console.log("거짓(Falsy)!!");
console.log(!null); // true
console.log(!NaN); // true
console.log(!undefined); // true
console.log(!""); // true
  
console.log("참(Truthy");
console.log(!{}); // false
console.log(![]); // false
console.log(!"A"); // false

비교 연산자

// 비교 연산자(Comparison Operators)는 두 데이터를 비교할 때 사용한다.
const a = 1;
const b = 3;
  
// 동등(형 변환!)
console.log(a == b);
  
// 부등(형 변환!)
console.log(a != b);
  
// 일치
console.log(a === b);
  
// 불일치
console.log(a !== b);
  
// 큼
console.log(a > b);
  
// 크거나 같음
console.log(a >= b);
  
// 작음
console.log(a < b);
  
// 작거나 같음
console.log(a <= b);

논리 연산자

강의가 현재 이상해서 다음껄로

삼항 연산자

// 삼항 연산자(Ternary Operator)
// 조건 ? (조건이 참일 때 실행) : (조건이 거짓일 때 실행)
  
const f = ["사과", "바나나", "체리"];
  
// IF 조건문
if (f.length > 0) {
  console.log("과일이 존재합니다.");
} else 
  console.log("과일이 존재하지 않습니다.");
}
  
// 삼항 연산자
const message =
  f.length > 0 ? "과일이 존재합니다." : "과일이 존재하지 않습니다";
console.log(message);

전개 연산자

// 전개 연산자(Spread Operator)
  
// 배열 데이터
const numbers = [1, 2, 3];
console.log(numbers); // [1, 2, 3]
console.log(...numbers); // 1, 2, 3
  
const n1 = [1, 2, 3];
const n2 = [2, 3, 4];
const n3 = n1.concat(n2);
const n4 = [...n1, ...n2];
console.log(n3); // [1, 2, 3, 2, 3, 4]
console.log(n4); // [1, 2, 3, 2, 3, 4]
  
// 객체 데이터
const o1 = { a: 1, b: 2, c: 3 };
const o2 = { b: 99, c: 100, d: 101 };
const o3 = Object.assign({}, o1, o2);
const o4 = { ...o1, ...o2 };
console.log(o3); // { a: 1, b: 99, c: 100, d: 101}
console.log(o4); // { a: 1, b: 99, c: 100, d: 101}

구문

조건문 -if

const age = 20;
if (age <= 20) {
  console.log("성인");
}
  
const num = 7;
if (num % 2 === 0) {
  console.log("짝수");
} else {
  console.log("홀수");
}
  
const score = 100;
if(score >= 90) {
  console.log("A")
} else if(score >= 80) {
  console.log("B");
} else if(score >= 70) {
  console.log("C");
} else if(score >= 60) {
  console.log('D')
} else {
  console.log("F")
}

조건문 -switch

// switch (조건) {
//  case 값1:
//    break;
//  case 값2:
//    break;
//  case 값3:
//    break;
//  default:
// }
  
const prod = "스마트폰";
switch (prod) {
  case "노트북":
    break;
  case "스마트폰":
    break;
}

반복문 -for

// for 
// for (초기화; 조건; 증감) {}
for (let i = 0; i < 10; i += 1) {
  console.log(i);
}

반복문 -for of

// for of 문
// for (const 아이템변수 of 배열) {}
const fs = ["사과", "바나나", "체리"];
for (let i = 0; i < fs.length; i += 1) {
  const f = fs[i];
  console.log(f);
}
for (const f of fs) {
  if (f === "체리") {
    continue;
  }
  console.log(f);
}

반복문 -for in

// for in 문
// for (const 키변수 in 객체) {}
const user = {
  name: "이백원",
  age: 85,
  isValid: true,
  email: "gyejeongjin@gmail.com",
};
for (const key in user) {
  if (key === "age") continue;
  console.log(key, user[key]);
}

반복문 -While

// while 문
// while (조건) {}
let count = 1;
while (count <= 10) {
  count += 1;
  console.log(count);
}
profile
고3, 프론트엔드

0개의 댓글