[JS] 연산자와 구문

Local Gaji·2023년 5월 6일

JavaScript

목록 보기
2/18

1. 산술/증감/할당 연산자

  • 산술 : + - * / %
  • 할당 : = += -= *= /= %=
    • 재할당은 let 변수일때 가능
  • 증감 : ++ --
let a = 3
console.log(a++) // 3
console.log(a)   // 4
console.log(++a) // 5

2. 부정/비교/논리 연산자

  • 부정 : !
console.log(!true) // false
console.log(!!0)   // false
console.log(!null) // true
  • 비교 : == === != !== > >= < <=
  • 논리 : AND&& / OR||

Nullish 병합

  • 0 || 7 // 7 : 참인 데이터 중 가장 먼저 나오는 데이터를 반환
  • 0 ?? 7 // 0 : null undefined를 제외한 데이터 중 가장 먼저 나오는 데이터를 반환

삼항 연산자 (Ternary)

조건 ? 데이터1 : 데이터2

console.log(a < 2 ? '참 ' : '거짓')

? 앞의 조건이 참이면 데이터1, 거짓이면 데이터2를 선택한다

3. 전개 연산자

  • 배열 출력 시 대괄호를 생략해줌
const a = [1,2,3]
const b = [4,5,6]
const c = [...a, ...b] // [1, 2, 3, 4, 5, 6]
  • 객체 데이터 출력 시 대괄호를 생략해줌
const a = {x:1, y:2}
const b = {y:3, z:4}

const c = Object.assign({}, a, b) // {x: 1, y: 3, z: 4}
const d = {a, b}       // {a: {x:1, y:2}, b: {y:3, z:4}}
const e = {...a, ...b} // {x: 1, y: 3, z: 4}
  • 매개변수로 전개 연산자 사용
function fn(x, y, z) {
	console.log(x,y,z) 
}

fn([1,2,3])    // undefined
fn(...[1,2,3]) // 1 2 3

4. 구조 분해 할당 (Destructuring assignment)

  • 리스트 요소들을 변수에 하나씩 할당할때
const arr = [1,2,3]
const [a,b,c] = arr      // a=1, b=2, c=3

let a = 0
let b = 0
let c = 0
;[a,b,c] = arr     // a=1, b=2, c=3
;[,b,c] = arr      // b=2, c=3, a는 비워둠

const [a, ...rest] = arr // a=1, rest=[2,3] (전개연산자)
  • 객체 구조분해할당
const obj = {
  a: 1,
  b: 2,
  c: 3
}

const {b, c} = obj    // 2 3
const {x} = obj       // undefined
const {x=4} = obj     // 4 
// x값이 undefined일 때 기본값을 지정, x값이 존재할경우 무시됨

const {a: one} = obj
console.log(one)      // 1  

const {x: four=4} = obj
console.log(four)     // 4

const {c, ...rest} = obj  // 3, {a: 1, b: 2} 
// c의 값과, c를 제외한 나머지 객체

5. 선택적 체이닝 (Optional Chaining)

const userA = {
  name: "gaji",
  address : {
  	city : 'Seoul'
  }
}

const userB = {
  name: "Muji",
}

console.log(userB.address?.city)  // Undefined
console.log(userB.address?.city || "주소 없음")  // 주소 없음                  
  • 점표기법에서 없을수도있는 key를 조회할 때 사용
  • ?를 쓰지않으면 에러가 나지만 ?를 써서 Undefined가 반환됨

6. 조건문

  • if 조건문 : if else else if

Switch 조건문

let p

switch () {
  case1:
    p = 1000
    // 값===값1일 때 실행
    break  // 함수일 땐 return 1000
  case2:
    p = 1500
    // 값===값2일 때 실행
    break
  default:
    p = 0
    // 값1도 값2도 아닐때 실행
}

7. 반복문

  • for : python의 for i in range(0,10): 과 같음

for (let i = 0; i < 10; i+= 1) {
  // 0부터 시작해서 10회 실행
}

  • for of : 배열 속 요소를 순회
const fruits = [1, 2, 3]

for (const fruit of fruits) {
  // list 안에있는 요소를 순회
}

  • for in : 객체 데이터 속 값들을 순회 (순서X)
const fruits = {
  apple: 1000,
  grape: 1500
}

for (const key in fruits) {
  // 객체 안에있는 key들을 순회
}

  • while
while (조건) {
  // 실행할 문장
}

  • do while : 최소 1번은 실행함 (python의 while True:)
do {
  // 실행할 문장
} while (조건)

0개의 댓글