본문 바로가기
FRONT-END/JavaScript

[JS] 0930

by codechu 2025. 9. 30.

연산자

 

할당 연산자

 

  • 일반 할당 ( = ) : X = Y 꼴에서 Y를 X에 할당한다.
  • 더하기 복합 대입 연산 ( +=) : x += y꼴에서 x와  y를 더한 값을  x에 재할당한다.
let a = 3;
a = a + 6; a 를 두번쓰기 귀찮아서 복합 대입 연산이 나옴
a +=6 랑 같음
  • 빼기 복합 대입 연산 ( -=)  :  x -= y꼴에서 x와  y를 뺀 값을  x에 재할당한다.
  • 곱하기 복합 대입 연산(*=) :  x *= y꼴에서 x와  y를 곱한 값을  x에 재할당한다.
  • 나누기 복합 대입 연산(/=) :  x /= y꼴에서 x와  y를 나눈 값을  x에 재할당한다.
  • 나머지 복합 대입 연산(%=) :  x %= y꼴에서 x와  y를 나눈 나머지를  x에 재할당한다.
  • 거듭 제곱 복합 대인 연산(**=) :  x **= y꼴에서 x의  y제곱을  x에 재할당한다.
  • 논리 and 복합 대입 연산(&&=) :  x &&=  y꼴에서 x와  y가 모두 참인가의 여부를 x에 재할당한다.
  • 논리or 복합 대입 연산( ||=)  :  x ||=  y꼴에서 x와  y 중 하나가 참인가의 여부를 x에 재할당한다.
  • 널리쉬 병합 복합 대입 연산(??=) : x ?? y 꼴에서  x 가 널리쉬인 경우 y 값을 ,아니라면 x 값을 할당한다,
let x = y

 

비교 연산자

 

  • 동등(==) : x == y 꼴에서 x와y 의 값이 같은가의 여부이다. ( 타입비교를 못함 )
2 == '2' = 결과 true가 나옴 // 숫자 문자 구분 x ( 사용을 지양하는게 좋음 )

 

  • 일치 (===) : x===y 꼴에서 x와 y의 값과 타입이 같은가의 여부이다. ( 타입 비교를 함)
  • 불일치 (!==) : x ! == y 꼴에서 x와y 의 값 혹은 타입 중 하나 혹은 모두가 다른가의 여부이다
  • 초과(>) : x > y 꼴에서 x가y보다 큰가의 여부이다.
  • 미만(<) : x < y 꼴에서 x가y보다 작은가의 여부이다.
  • 이상(>=) : x >= y 꼴에서 x 가  y 보다 크거나 같은가의 여부이다.
  • 이하(<=) :  x <= y 꼴에서 x 가  y 보다 작거나 같은가의 여부이다.

 

산술 연산자

 

더하기(+) : x+y꼴에서 x와y합이다

  • 피연산자중 하나 이상이 문자열일 경우 문자열 합치기를 수행한다

빼기(-) :   x-y꼴에서 x와y의 차이다

  • 피연산자 중 그 타입이 number 가 아닌 것이 있을 경우 numbe로의 형변환을 시도한 후 연산한다
  • number로의 형변이 불가능한 피연산자가 있을 경우 연산 결과는  Nan 이다.

곱하기 (*) :x꼴에서 y  x 와 y 의 곱이다.

  • 피연산자중 그 타입이 number가 아닌 것이 있을 경우 number로의 형 변환을 시도한 후 연산한다.
  • number 로의 형변환이 불가능한 피연산자가 있을 경우 연산 결과는 true 이다

나누기(/) : x/y 꼴에서  x를 y로 나눈 몫이다.

  • 피연산자중 그 타입이 number가 아닌 것이 있을 경우 number 로의 형 변환을 시도한 후 연산한다
  • number로의 형변환이 불가능한 피연산자가 있을 경우 연산 결과는 Nan이다
  • y가 0일 경우 그 결과는 infinity 혹은 - infinity 

 

나머지(%) : x%y  꼴에서 x를 y 로 나눈 나머지이다.

  • 피연산자중 그 타입이 number가 아닌 것이 있을 경우 number 로의 형 변환을 시도한 후 연산한다
  • number로의 형변환이 불가능한 피연산자가 있을 경우 연산 결과는 Nan이다

거듭제곱 (**) : x ** y 꼴에서 x 의  제곱이다.

 

단항 양수( + )  :+x 꼴에서 변수  x 의 부호를 강조하거나,  x의 타입이 number가 아닐때 number로의 형변환을 시도하게 한다.

 

단항 음수( - ) : -x 꼴에서 x의 부호를 반전하거나, x 의 타입이 number가 아닐 때 number로의 형변환을 시도하게 한다.

 

증가( ++ )

  • 전위증가 : ++x 꼴에서 구문 실행 전 x 에 1을 더한다.
  • 후위증가 : x++ 골에서 구문 실행 후 x 에서 1을 뺀다. 

감소 ( -- ) 

  • 전위 감소  : --x 꼴에서 구문 실행 전 x 에 1을 뺀다.
  • 후위 감소 :  x-- 꼴에서 구문 실행 후 x 에 1을 뺀다.

 

논리연산자

 

논리 AND(&&) : x && y 꼴에서 논리  x 와 y 가 모두 참 true 인가의 여부이다

논리 OR(||) : x  || y 꼴에서 논리  x 와 y 중 하나가 참 true 인가의 여부이다

논리 NOT, 부정 (!) : !x 꼴에서 x 의 논리를 부정(반전)한다.

 

 

삼항연산자

 

삼항 연산자 ( ? : ) : c ? : t : f 꼴에서 논리 c 가 참(true)이라면 t 로  거짓이라면 f (false) 로 연산된다.

 

 

기타 연산자

  • 멤버 접근 ( . ) : x.y 꼴에서 x 의 멤버인 y 에 접근하기 위해 사용한다
  • 배열 인자 접근 ( [ ]  ) : x[y] 꼴에서 배열인 x 의 인자 중 인덱스가 y 인자에 접근하기 위해 사용한다.
  • 오브젝트 속성 접근 ( [ ] ) : x[y] 꼴에서 오브젝트인  x 의 쌍 중 키가 y 인 쌍에 접근하기 위해 사용한다.
  • 객체화 (new) : new T 꼴에서 타입 T 를 객체화 하기 위해 사용한다.
  • 함수 호출 ( () ) : F () 꼴에서 함수 F 를 호출하기 위해 사용한다
  • 우선연산 (  () ) : ( x) 꼴에서 x 를 우선하기 위해 사용한다.
  • 삭제( delete ) : delete x.y 혹은 delete x['y'] 꼴에서 오브젝트 x 의 속성인 y 를 삭제 하기 위해 사용한다.
  • instanceof : x instanceof T 꼴에서 객체 x 가 타입 T 이거나 상속, 구현 대상인가의 여부이다.
  • typeof : typeof x 꼴에서 x 의 타입인 문자열이다.
  • 널리쉬 병합 연산자 ( ?? ) : x ?? y 꼴에서  x 가 널리쉬일때, y 값으로 연산되고, 그렇지 않으면  x 그대로 연산된다.
  • 옵셔널 체이닝 멤버 접근 연산자 ( ?.) : x ? .y 꼴에서 x 의 멤버인 y 에 접근할 때 , x 가 널리 쉬라면, 오류를 발생시키는 대신 전체 결과를 undefined  로 갈음 한다.

 

연산자 우선순위

연산자 사이에는 연산되는 우선순위가 있으며 아래는 숫자가 작을수록 우선순위가 높다는 의미이다

  1. 우선 연산 ( () )
  2. 멤버 접근. 옵셔널 체이닝 멤버접근, 배열 인자 접근, 오브젝트  속성 접근 ( . , ?. , [], [])
  3. 객체화, 함수 호출 ( new , () )
  4. 후위 증가, 후위 감소 ( ++, -- )
  5. 논리 NOT , 단항 양수, 단항 음수, typeof, delete ( ! , + , - ) 
  6. 거듭 제곱( ** )
  7. 곱하기, 나누기, 나머지
  8. 더하기, 빼기
  9. 초과 , 미만 , 이상 , 이하 ,instanceof(> , < >=, <= )
  10. 동등, 부등, 일치, 불일치 ( == , != , ===, ! == )
  11. 논리 and ( && )
  12. 논리 or ( || )
  13. 널리쉬 병합 연산 ( ?? )
  14. 삼항 연산 ( ? : )
  15. 일반 할당, 복합 대입 연산 ( = 등 )

 

반복문

 

키워드 

 

break 

  • break 키워드는 속해있는 반복문을 종료 시키기 위해 사용한다.

continue

  • continue 키워드는 현재 진행중인 사이클을 종료하고, 다음 사이클로 진행하기 위해 사용한다.

for

  • for  반복문은 반복의 기준이 되는 변수 ( 주로 인덱스 ) 를 활용해 특정 구현부를 반복하고자 할 때 사용한다.
for ( [ 변수 선언 및 초기화 ] ) ; [반복 조건 ] ; [ 변수 가감 혹은 복합 대입] ) {
[구변부]
}

1. for 반복문을 위한 변수 선언 및 초기화 한다.
2. 반복 조건이 참 ( true) 인지 확인한다.
     - > 반복 조건이 참( true) 이라면 구현부를 1회 실행하고, 3 으로 이동한다.
     - > 반복 조건이 거짓 ( false ) 이라면 , 반복문 실행을 종료한다.
3. 변수 가감 혹은 복합 대입을 실행하고 2로 돌아간다.

 

 

for ...in

  • for in반복문은 문자열로 키가 지정된 열거 가능한 대상의 키를 반복하기 위해 사용한다. ( 배열보다  오브젝트에 사용함 )
  • 반복 대상의 인자가 인덱스를 가지고 순서대로 나열되어 있는 경우 for...in 을 사용하지 않는다.
for ([ 변수 혹은 상수 선언 ] in [반복 대상] { 
[구현부]
}
- >    for (let key in object) { // object의 각 key에 대해 반복 }

 

const user = {
  name: "Alice",
  age: 30,
  city: "Seoul"
};

for (let key in user) {
  console.log(key);         // key 출력
  console.log(user[key]);   // value 출력
}

 

 

for ...of

  • for of반복문은 반복할 수 있는 대상이 가지는 인자에 대해  반복하기 위해 사용한다.
  • 인덱스에 대한 변수가 필요 없을 경우 인덱스 범위 오류 및 가독성 향상 등을 위해 가능한한 일반 for 반복문 보다 for ...of 반복문을 사용하는 것이 좋다.
for ( [ 변수 혹은 상수 선언 ] of [반복 대상] {
[구현부]
}

 

 

 

while

  • while반복문은 주어진 조건이 참true 일때 횟수와 관계 없이  구현부를 실행하기 위해 사용한다
while ([조건] ) {
[구현부]
}

만약 조건이 항상 참 true 이거나 거짓false 로 변하는 경우의 수가 없고, 구현부 내에서 break 및 return 등의 중단 키워드가 없다면, 해당 반복문이 무한히 반복됨으로 유의한다.

 

 

do-while 

  • do-while 반복문은 while 반복문과 유사하나, 조건과 관계 없이 최초 한번은 반드시 구현부를 실행하는 차이점이 있다.

do {
[구현부 ]
} while ([조건])

만약 조건이 항상 참 true 이거나 거짓false 로 변하는 경우의 수가 없고, 구현부 내에서 break 및 return 등의 중단 키워드가 없다면, 해당 반복문이 무한히 반복됨으로 유의한다.

 

 

조건문

 

if 

  • 주어진 조건이 참일때만 구현부를 실행하기 위해 사용한다. (
    • 조건이 거짓(false) 이면 중괄호 안 코드는 그냥 건너뜁니다.
    • 오류가 나지 않습니다! ) 
if ([조건]) {
[구현부]
}

 

else 

  • else 문은 단독으로 사용할 수 없고, if 문과 함께 사용하여야 한다.
  • else 문은 앞서 제시된 모든조건이 거짓일때 최종적으로 실행할 구현부를 위해 사용한다.
  • else문은 if 문 하나에 여러개 존재할 수 없다.
  • else 문은 if 문의 마지막 구문이어야 한다.

if ([조건]) {
[참 구현부]
}else {
[거짓 구현부]
 }

 

 

else if 

  • else if 문은 단독으로 사용할 수 없고, if 문과 함께 사용하여야 한다.
  • else if 문은 앞서 제시된 모든 조건이 거짓일 때 부수적인 조건을 추가해 해당 조건이 참일때  구현부를 실행하기 위해 사용한다.
  • else if  문은 if 문 하나에 여러개 존재할 수 있다.
  • else if 문의 조건이 비록 참이라 하더라도 선택하는 if 혹은 else if 의 조건이 참이라면 해당 후행하는 else if 는 실행되지 않는다. ( 하나의 if 문에서 실행될 수 있는 구현부는 하나 이하임으로)
  • 모든 else if는 if 보다 후행하고 else 보다 선행하여야 한다.

 

if ( [선행 조건 1 ] ) {
[선행 조건 1 구현부] 
} else if ([ 선행 조건 2 ] ) {
[선행 조건 2 구현부] 
} else if ([ 선행 조건 3 ] ) {
[선행 조건 3 구현부] 
} else {
[거짓 구현부]
}


 

  • 위 예시에서 선행 조건 1이 참인 경우 선행 조건 1 구현부를 실행하고 나머지 else if 와  else 문은  실행되지  않는다.
  • 위 예시에서 선행 조건 1 이 거짓이고 선행조건 2가 참인경우 선행 조건 2 구현부를  실행하고 후행하는 else if 와 else 는 고려하지 않는다.
  • 위 예시에서 선행 조건 1 및 선행조건 2가 거짓이고 선행조건3 이 참인경우 선행조건 3 구현부를 실행하고 후행하는 else 는 고려하지 않는다.
  • 위 예시에서 선행조건 1,2,3 이 모두 거짓이라면, else를 실행한다.
  • 즉, else if  의 개수와 무관하게 하나의 if 문에 존재하는 구현부는 실행되지 않거나, 단 한개만 실행될수 있다.

 

 

switch 

switch 문은 분기 대상 변수가 가지는 값에 따라 case 를 활용해 실행할 구문을 분리하기 위해 사용한다.


switch([분기 대상 변수]) {
case [값 1 ] :
[값 1 구현 부]
[break]; ?
case [값 2 ] :
[값 2 구현 부]
[break]; ?
[default : ] ? 
[default 구현부] ? 

 

  • 분기 대상 변수가 가지는 값이 case 에 명시된 값과 일치하는 가장 빠른 case 의 구현부가 실행된다.
  • 일치하는 case 가 없다면 default 구현부가 실현된다.
  • break 키워드는 해당 위치에서 즉시 switch 문을 종료하겠다는 의미이다.
  • default 는 여러개 존재할 수 없으며 작성시 반드시 switch 의 마지막에 위치해야 한다.

 

함수

  • 함수(function)은 호출( call, invoke) 가능한 대상이다.
  • 함수는 반복적으로 여러곳에서  사용될 가능성이 높은 로직을 분리하기 위해 사용한다.
  • 하나의 함수는 하나의 목적을 가지는 로직을 구현하는 것이 좋다.
  • 함수의 명명법은 카멜케이스이고, 주로 아래의 형태를 가진다.
    • 동사
    • 동사 목적어
    • to  목적어

함수 호출

  • 함수는 종류를 구분하지 않고 아래와 같이 호출할 수 있다.
[함수이름]([전달 인자,....]?):

가령, console의 멤버인 log 라는 이름을 가지는 함수에 전달 인자 hello world 를 전달해 호출하는 표현은 아래와 같다.

console.log('hello word')

 

일반 함수

 

기명 함수

기명 함수는 이름이 있는 함수로 아래와 같이 작성된다.


function [함수 이름] ([매개 변수,...]?) {
[구현부]
}

 가령, 전달받은 매개변수 a 와 b 의 합을 반환하기 위한 함수 sum 은 아래와 같이 만들 수 있다.

function sum(a,b){
return a + b ; 
} 
  • return 키워드는 해당 함수의 호출 결과를 호출자에게 반환하기 위해 사용한다.
  • return 키워드는 해당 위치에서 함수의 실행을 즉시 종료한다. 이에, 반환값 없이 해당 함수의 실행을 고의로 종료하기 위해
    return; 만 작성하기도 한다.
  • 같이 반환하거나 (return;)반환하지 않은 경우, 해당 함수의 호출 결과는 undefined이다.

'FRONT-END > JavaScript' 카테고리의 다른 글

[JS] 1001 - 1013  (0) 2025.10.01
[JS] 0929 수업 13일차  (0) 2025.09.29

관련글

티스토리툴바