연산자

연산자란 특정한 동작을 하도록 지시하는 기호입니다.
값끼리 더하고, 빼거나, 나누거나, 곱하거나, 비교하거나의 작업을 할 수 있습니다.

산술연산자

산술연산자는 기본적으로 숫자형에서만 사용합니다.

단, +의 경우 문자열끼리 합해줄 때 사용할 수도 있습니다. 이를 연결 연산자라고 합니다.
따라서 123 + "123"을 하게될 경우 문자열이 섞여있어 숫자인 123도 문자열로 변환 후 더해주게 되며 값이 문자열 "123123"이 반환됩니다.

• a + b : a에 b를 더한 후 그 값을 구합니다.
• a - b : a에서 b를 뺀 후 그 값을 구합니다.
• a * b : a에 b를 곱한 후 그 값을 구합니다.
• a / b : a에서 b를 나눈 후 그 값을 구합니다.
• a % b : a에서 b를 나눈 후 그 나머지를 구합니다.
• a++ : a에 1을 더합니다. a = a + 1과 같은 뜻 입니다.
• a-- : a에 1을 빼줍니다. a = a - 1과 같은 뜻 입니다.

💡 파이썬에서는 //로 몫만 구할 수 있는데, JS에서는?
JS에서는 기본 연산자로는 나눈 후 값을 구하거나(/), 나눈 후 나머지를 구할(%) 수는 있지만 나눈 후 몫을 구하는 연산자는 없습니다.
따라서 / 연산자로 값을 구한 후 parseInt() 메서드로 값을 정수로 변환해주는 식으로 구할 수 있습니다.

💡 a++와 ++a의 차이점
a++의 경우 먼저 a를 불러온 후 +1을 해주는 개념입니다.
반면 ++a의 경우 바로 +1을 a에 연산해주는 개념으로 해당 개념의 경우 console.log()로 출력 시 결과를 눈으로 볼 수 있습니다.

let a = 10;
let b = 10;
console.log(a++); //10
console.log(a); //11
// 설명 : a라는 변수를 불러오고 연산했기 때문에 콘솔에는 현재 a의 값인 10이 표시되고 연산이된 상태입니다. 
// 따라서 연산전 상태의 a가 콘솔창에 찍혔고 연산은 추후 진행되었다는 것을 알 수 있습니다.
console.log(++b); //11
console.log(b); //11
// 설명 : a변수에 대해 바로 연산되어 연산결과인 11이 바로 표시되는것을 확인할 수 있습니다.

할당연산자

값을 또는 연산된 결과를 변수에 할당하는 연산자 입니다.
모든 연산자에 =이 들어가며 할당을 뜻합니다. 해당 = 좌측으로 연산해줄 연산자 기호를 붙여서 사용합니다.

• a = 값 : a에 입력된 값을 할당하는 기본 할당 연산자 입니다.
• a += b : a에 b를 더한 후 그 값을 다시 a에 할당합니다. => a = a + b와 동일
• a -= b : a에 b를 뺀 후 그 값을 다시 a에 할당합니다. => a = a - b와 동일
• a *= b : a에 b를 곱한 후 그 값을 다시 a에 할당합니다. => a = a * b와 동일
• a /= b : a에 b를 나눈 후 그 값을 다시 a에 할당합니다. => a = a / b와 동일
• a %= b : a에 b를 나눈 후 그 나머지를 다시 a에 할당합니다. => a = a % b와 동일

연결연산자

2개 이상의 문자열을 합해줄 때 사용됩니다.

• "문자열1" + "문자열2" : "문자열1문자열2"로 연결시켜 줍니다.

비교연산자

두 값을 비교하여 boolean 값을 반환해줍니다.
즉, 해당 비교의 값에 따라 true 또는 false 를 반환해줍니다.

• a == b : a와 b가 일치하면 true, 불일치하면 false를 반환합니다.
• a === b : a와 b가 자료형까지 일치하면 true, 불일치하면 false를 반환합니다.
• a != b : a와 b가 불일치하면 true, 일치하면 false를 반환합니다.
• a !== b : a와 b가 불일치하거나 자료형이 불일치하면 true, 둘 다 일치하면 false를 반환합니다.
• a < b : a가 b보다 작으면 true, 크면 false를 반환합니다.
• a <= b : a가 b보다 작거나 같으면 true, 크면 false를 반환합니다.
• a > b : a가 b보다 크면 true, 작으면 false를 반환합니다.
• a >= b : a가 b보다 크거나 같으면 true, 작으면 false를 반환합니다.

논리연산자

boolean 을 연산해주는 연산자 입니다.

• a조건 || b조건 : a조건 또는 b조건 중 하나만 true여도 true값을 반환합니다.
• a조건 && b조건 : a조건과 b조건 모두 true인 경우만 true값을 반환합니다.
• ! a조건 : a조건 이 true면 false를, false면 true값을 반환합니다.

💡 !(NOT연산자) 분배법칙
!(true || false) = false && true !(NOT연산자)로 인해 기존 연산자가 모두 반대되도록 분배된다.

💡 || 연산자와 &&일 때 효율적인 조건문 작성법
||연산조건일 경우 조건문 중 가장 첫번째 조건문 부터 true, false 여부를 판단합니다. 해당 연산자의 경우 조건문 중 하나라도 ture일 시 true로 반환하기 때문에, 가능한 첫번째 조건이 true일 확률이 높은 조건 적용해 줌이 연산속도에 효율적입니다.

&&일 경우 반대로 조건문 중 첫번째 조건문 부터 false가 나올때까지 모든 조건문을 연산합니다. 따라서 가능한 첫번째 조건문 부터 false일 확률이 높은 순으로 작성해줌이 좋습니다.

이러한 조건문 작성방법을 단축 평가(short circuit evalution)라고 합니다.

제어문

특정 조건에 따라 코드를 실행하거나, 조건동안 반복하거나 하는 문장을 말합니다.

조건문

괄호안에 입력된 조건문의 내용이 true인 경우 코드를 실행시켜주는 문장입니다.

if / else if / else

• if : 조건절을 체크 후 true일 시 실행문을 실행한후 if문을 빠져나갑니다.
• else if : 위 if 조건절이 false일 시 else if의 조건절을 체크 후 true일 시 실행문을 실행합니다.
  한번 실행되면 다음 else if 절이 있어도 해당 if문 전체를 빠져나갑니다.
• else : 모든 조건 체크 후 전부 false일 시 실행문을 실행합니다.

//사용법-------------------------------------------------------------
if(조건절1) {
  조건절1이 true일 시 실행할 명령문;
} else if(조건절2) {
  조건절1이 false이고 조건절2가 true일 시 실행할 명령문;
} else {
  조건절1, 조건절2 전부 false일 시 실행할 명령문;
}

//예시-------------------------------------------------------------
let number = 10;

if(number > 5) {
	console.log('number는 5보다 큽니다.');
  //조건을 만족시켜 실행함
} else if(number > 8) {
	console.log('number는 8보다 큽니다.');
  //위 첫번째 if문이 거짓일 경우 다중조건을 차례대로 체크 후 참인게 있으면 실행 후 빠져나감
} else if(number >10) {
	console.log('number는 10보다 큽니다.');
  //다중조건
} else {
	console.log('어떤 조건도 만족시키지 못했습니다.');
} //위 if문 else if문 모두 만족하지 못할 경우 실행 됩니다.

삼항연산자

위 if문의 경우 다중 조건 체크할 때 유리한 편입니다. 조건과 실행문이 짧다면 삼항연산자를 이용할 수 있습니다.

삼항연산자의 경우 if문의 비해 읽기 어렵기 때문에, 상황에 맞게 사용해야합니다.

//사용법-------------------------------------------------------------
(조건절) ? true일 때 실행 할 명령문 : false일 때 실행 할 명령문;

//예시-------------------------------------------------------------
let username = "geehyun";

(username != "geehyun") ? console.log("지현이 아닙니다!") : console.log("지현 입니다!");

switch

switch문의 표현식(괄호 안 식)의 값이 case 절에 일치할 경우 해당 case절에 관련된 명령문 수행합니다.

switch문에서는 if문과 달리 표현식과 case절이 완전히 일치해야 해당 case절이 실행 됩니다.

//사용법-------------------------------------------------------------
switch(표현식) {
  case 표현식과 비교할 값1 : 
    명령문;
    break;
  case 표현식과 비교할 값2 : 
    명령문;
    break;
  default : 모든 case절 불일치 시 실행할 명령문;
}

//예시-------------------------------------------------------------
let score = prompt('수학 점수를 입력해주세요!');
let value = Math.floor(score/10);
switch(value) {
  case 10 :
  case 9 :
    console.log('A 학점 입니다.');
    break;
  case 8 :
  case 7 :
    console.log('B 학점 입니다.');
    break;
  case 6 :
  case 5 :
    console.log('C 학점 입니다.');
    break;
  default : console.log('D 학점 입니다');
}

• case
  : 표현식과 비교할 값을 작성합니다. 해당 값이 일치할 시 하위 명령문을 실행합니다.
• break
  : break를 만나면 switch문 종료됩니다.
• default
  : 일치하는 case절이 없다면, default절의 명령문 실행합니다. (if문에서의 else와 유사)

반복문

조건에 따라 특정 명령문을 반복적으로 실행줘야할 경우 반복문을 사용할 수 있습니다.
반복문의 종류는 for, while, do ~ while이 있으며 상황에 따라 맞는 반복문을 사용합니다.

for

값이 일정한 규칙을 갖고 커지면서 명령을 반복 실행할 경우 이용할 수 있습니다.

for (초기화; 조건식; 표현식) {명령문}의 형태를 갖으며 아래 실행순서를 따릅니다.

⭐ 실행순서
1. 초기화 실행 (최초 1회만 실행)
2. 조건식을 만족하는지 체크 후 만족 시 3번으로 / 불만족 시 for문 종료
3. {명령문} 실행
4. 표현식 실행
5. 다시 2번으로 이동

• for : 기본 for문 형식입니다.
• for ~ in
  : for(let 변수명 in 배열/객체명) {명령문;}
  특정 키값(객체의 경우 키, 배열의 경우 인덱스)이 설정한 변수에 할당되어 해당 변수를 기준으로 반복하는 반복문입니다.
• for ~ of :
  : for(let 변수명 of 배열명) {명령문;}
  배열의 값이 설정한 변수에 할당되어 해당 변수를 기준으로 반복하는 반복문입니다.

//사용법-------------------------------------------------------------
for(초기화; 조건절; 표현식) {
  명령문;
}

//예시-------------------------------------------------------------
//객체의 key값을 이용해서 반복문을 사용할 때
let person = {
  name : '홍길동',
  age : 25,
  job : '개발자'
}
let keys = Object.keys(person);

//방법 1
for(let i = 0; i<keys.length; i++) {
  let key = keys[i];
  console.log(`${key} : ${person[key]}`);
}
//방법 2 (for in을 사용)
for(let key in person) {
  console.log(`${key} : ${person[key]}`);
}

//예시2-------------------------------------------------------------

//배열에서 반복문을 사용할 때
let fruits = ['사과', '배', '바나나', '포도', '딸기']

//방법 1
let fruitsLength = fruits.length;
console.log(fruitsLength);
for(let i = 0; i < fruitsLength; i++) {
  console.log(`${i+1}번째 요소는 ${fruits[i]} 입니다`);
}

//방법 2 (for of 사용)
for(let fruit of fruits) {
  console.log(`${fruits.indexOf(fruit)+1}번째 요소는 ${fruit} 입니다`);
}

while / do ~ while

반복 횟수를 정확히 알 수 없을 때 사용하는 반복문으로, 조건문이 참일 때 실행됩니다.

⚠️ while 문 사용 시 반복에서 빠져 나올 수 있는 break 등의 연산이 필수적으로 필요합니다.
탈출구가 없을 시 무한 반복 루프에 들어갈 수 있습니다.

• while : 조건문을 체크하여 조건이 true일 때만 반복합니다.
• do ~ while : 최초 1회에 한해서는 무조건 명령문을 실행하며 2번째 이후 실행시에는 조건문을 체크하여 true일 경우만 반복합니다.

//while 사용법-------------------------------------------------------------
while(조건절) {
  명령문;
}
//while 예시-------------------------------------------------------------
let count = 0;
while(count < 5) { 
  console.log(count);
  count++;
}

//do ~ while 사용법-------------------------------------------------------------
do {
  명령문(최초 1회 무조건 실행, 이후 조건절 체크 후 실행);
} while(조건절)
  
//do ~ while 예시-------------------------------------------------------------
let number = 7;
do {
  console.log(number);
  number++;
} while(number < 5)
// 결과 : number가 처음부터 7이어도 while 조건과 상관없이 최초 1회는 명령문이 실행 됨.

분기

반복문 내에서 사용하며 계속 진행 또는 종료 등의 분기를 제어하는 기능을 합니다.

break

현재 진행중인 제어문의 흐름을 종료합니다. 즉 현재 위치한 스코프를 탈출 합니다.

예를들어 이중 for문 사용시 안쪽 for문 에서 break 발생 시 안쪽 for문 에서만 탈출하고 바깥쪽 for문이 진행됩니다.

특수한 조건일 때 반복문을 종료해줘야하거나, while문에서 무한 루프에 빠지지 않기 위해 break로 탈출 분기점을 만들어 줍니다.

//사용법-------------------------------------------------------------
for(초기값; 조건절; 표현식){
  //반복문의 스코프 내부
  if(조건) break; //해당 조건이 충족되면 바로 현재 위치한 스코프를 탈출합니다.
}

//예시-------------------------------------------------------------
let text = '';

for (let i = 0; i < 10; i++) {
  if(i == 3) {
    break;
  }
  text += i;
}

console.log(text);
// 결과 : 012
// i==3일때 break를 만나 해당 반복문 종료 됨

continue

주로 반복문에서 사용되며 continue문장을 만난 순간 그 아래 명령문은 무시한채 반복을 재 실행 합니다.

let text = '';

for (let i = 0; i < 10; i++) {
  if(i == 3) {
    continue;
  }
  text += i;
}

console.log(text);
// 결과 : 012456789 
// i==3일때 continue를 만나 아래 명령문 실행안하고 다음 반복으로 넘어감

참고

Do it! 한 권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석 - 고경희
위 책을 공부하며 작성하고 있습니다!