프로젝트를 진행하면서 사용했던 연산자 위주로 정리해보려한다.

💡 산술연산자

기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)이 있다.그리고 나누고 난 나머지를 계산해주는 Mod(Modulus)(%)가 있다.

const a = 1 + 3; // 4 덧셈
const b = 5 - 2; // 3 뺄셈
const c = 2 * 5; // 10 곱셈
const d = 6 / 4; // 1.5 나눈 몫
const e = 8 % 3; // 2 나눈고 난 나머지

💡문자열연산자

'+'과 '*'은 숫자 뿐만 아니라 스트링도 계산해준다.BUT 문자열과 더할 때 문자열이 아닌 데이터도 문자열로 바꿔서 나타낸다.

const string = 'we ' + 'code'; // 'we code'
const string2 = 'we' + 19; // 'we19'
const string3 = 19 + 'code' + 2; // '19wecode2'
const string4 = 3 + 4 + 'code'; // '7code'

💡증감연산자

숫자를 1 (++)증가시키거나 1 (--)감소시킬 경우 사용한다.- 전위증감연산자(변수 앞에 오는 경우) ++i, 변수를 1 증감시키는 작업을 우선적으로 실행- 후위증감연산자(변수 뒤에 오는 경우) i++, 변수를 1 증감시키는 작업을 해당 라인이 끝난 후 실행

var i = 0;
i++; // i는 1
alert(i++); // 1을 먼저 alert한 후, ++되어 i는 2
alert(++i); // 2에서 먼저 ++한 후에 alert하여 3을 alert

💡대입연산자

'=' 연산자를 사용하여 변수에 값을 대입.

• 복합대입연산자 +=, =, /=, =, %= 도 있다.

const i = 10; //모든 i가 10일 때
i += 2; // 12 (i = i + 2와 같음)
i -= 3; // 7 (i = i - 3과 같음)
i *= 4; // 40 (i = i * 4와 같음)
i %= 5; // 2 (i = i % 5와 같음)

💡비교연산자

피연산자들을 비교하고 비교에 따라 논리 값을 반환.==, !=, >, <, >=, <=

100 == 10 \* 10; // true   //==같음
6 != 2 \* 2; // true       //!=같지않음
2 \* 5 > 3 \* 3; // true   //>큼
6 * 3 <= 2 * 9; // true    //<=크거나 같음

💡삼항연산자

세 개의 피연산자를 취할 수 있는 유일한 연산자로 (조건 ? 참 : 거짓)으로 구성되어 있다.보통 if문의 단축 형태로 쓰임

const wecode = i > 10 ? 15 : 6
// i > 10 == true면 wecode 변수는 15(참) 되고, false면 6(거짓)이 된다.

💡논리연산자

&&(and), ||(or), !(not)논리연산자는 true, false를 연산하는 게 아니라, 참인 값과 거짓인 값들을 연산함

• && 연산자는 피연산자들의 값이 모두 true일 경우에만 true를 반환하고, 나머지 경우에는 false를 반환.
• || 연산자는 피연산자들의 값 중 하나라도 true가 있으면 true를 반환하고, 하나도 true가 없으면 false를 반환.🍯tip) 값을 줄때 함수가 들어있는 값이나, 좀 무거운 값들은 뒤로 배치한다
• ! 연산자는 피연산자 값의 반대 값을 반환한다. true이면 false를, false이면 true를 반환.

var a = 10;
var b = 20;

(a < b) && (a * 2 == b); // true
//(a < b)는 true(참)이고 (a * 2 == b)도 참이다. 참 && 참이므로 true

(a > b) || (a * 2 <= 20); // true
//(a > b)는 false(거짓)이고 (a * 2 <= 20)은 참이다. 거짓 || 참이므로 true

!(a < b); // false
//(a < b)는 true(참)이고, 이의 반대 !(a < b)은 거짓 ! 거짓이므로 false

논리 연산자는 코드를 줄일 때도 자주 사용한다.

💡=== 비교연산자

두 데이터를 비교할 때 사용할 때 사용하며, 크게 관계 연산자와 동등 연산자로 나눌 수 있다.값 뿐만 아니라 자료형까지 같아야 true가 된다.

//세 개 모두 true
0 == ''
0 == false
0 == []

값 뿐만 아니라 자료형까지 같아야 true

//세 개 모두 false
0 === '' // false
0 === false // false
0 === [] // false

자료형까지 다른지 비교할 때는 != 대신에 !==를 쓴다.

TEST

💻 wecode의 2주간의 Pre-course가 끝나고 중간시험을 보았다.문제별 코드를 정리하며 2주간의 시간을 재정리를 해보려한다.

JavaScript 관련 문법으로 총 5가지의 문제가 출제되었다.

Q1. 짝수인지 판별하는 함수 isEven을 작성 주세요.

console.log(isEven(11)) // --> "짝수가 아닙니다."
console.log(isEven(10)) // --> "짝수 입니다."

내 코드

function isEven(num) {
  if (num%2 == 0){
    return "짝수 입니다."
  } else{
    return "짝수가 아닙니다."
  }
}
isEven(6);   //짝수 입니다.

산술연산자를 활용해 푸는 문제였다. (산술연산자?)num의 값을 2로 나누어 떨어지는 값이 0일경우 "짝수", 아닐경우 "홀수"를 리턴해준다.삼항연산자를 사용했을 경우의 코드

function isEven(num) {
  return (num % 2 == 0 ? '짝수 입니다' : '짝수가 아닙니다')
}
isEven(6);   //짝수 입니다.

Q2. calculateTotal 함수를 작성하세요.

팁과 세금을 제외한 식사값이 주어졌을때, calculateTotal 함수는 팁과 세금이 포함된 총 식사값을 반환합니다.

Notes:- 세금은 9.5% 팁은 15% 로 계산하세요.- 팁을 계산할때 세금을 포함하여 계산하지 마세요.

console.log(calculateTotal(20)); // --> 24.9

내 코드

function calculateTotal(amount) {
  let tax = amount * 0.095;
  let tip = amount * 0.15;
  return amount + tax + tip;
}
calculateTotal(20); //24.9

세금과 팁을 계산할 각 변수를 선언 후 'amount'를 통해 계산되어진 값과 amount의 총합을 구하는 문제였다.ES6문법으로 작성된 코드

const calculateTotal = amount => {
  return amount + (amount * 0.095) + (amount * 0.15);
}
calculateTotal(20); //24.9

Q3. getPrefix 함수를 작성하세요.

문자열이 주어졌을때, -를 기준으로 앞에 있는 문자열을 반환하세요.

console.log(getPrefix('BTC-KRW')) // --> BTC

내 코드

function getPrefix(str) {
  let line = str.indexOf('-');
  if (line !== -1){
    return str.slice(0, line);
  }
}
getPrefix(we-code); //we

문장안에 '-'기호를 확인하고, 문장 시작부터 해당기호 전까지 문장을 리턴해주는 문제였다. (slice와 split)ES6문법으로 작성된 코드

function getPrefix(str) {
  return str.split('-')[0];
}
//split('-')는 -를 지우라는 뜻이다.
//return str.split('-')[0]은 -를 지운 첫번째 문자열을 반환하라는 뜻이다.

Q4. getFind 함수를 작성하세요.

문자와 문자열이 주어졌을때, getFind 함수는 주어진 문자열에서 주어진 문자가 나타나는 첫번째 위치를 반환합니다.

Notes:문자열의 첫번째 문자는 인덱스 값 0 을 가집니다.만약 문자열에 해당 문자가 여러번 나타나면, 첫번째로 나타나는 위치를 반환해야 합니다.만약 문자가 문자열에 존재하지 않는다면, -1 을 반환해야 합니다.

• 중요!!indexOf 함수를 사용하지 마세요.

const output = getFind('a', 'I am a hacker')
console.log(output) // --> 2

내 코드

function getFind(filter, sentence) {
 var str = sentence;
 var result = str.search(filter);
 return result;
 }
 console.log(getFind('a', 'I am a hacker')); //2

새로운 변수를 정의해 각 요소를 대입시킨 후 search 메 서드를 이용해서 인덱스 값을 도출해내는 문제였다.(search란?)for문을 이용해 작성된 코드

function getFind(filter, sentence) {
  for(let i = 0; i < sentence.length; i++{
    if (filter === sentence[i]) {
      return i;
    }
  } return -1;
}
const output = getFind('a', 'I am a hacker')
console.log(output) //2

Q5. find_longest_word 함수를 만들어 주세요.

주어진 리스트안에 있는 단어중 가장 긴 단어를 찾을수 있도록 함수를 완성해주세요.

console.log(find_longest_word(["PHP", "Exercises", "Backend"]))
// --> "Exercises"

내 코드

function find_longest_word(arr) {
  let long = arr[0];
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].length > long.length) {
      long = arr[i];
    }
  } return long;
}
find_longest_word(["PHP", "Exercises", "Backend"])

나는 이 문제의 풀이가 너무 어려웠다.기준이 되는 변수를 정의하고 for문을 계속돌려 문제를 해결하였는데, 위코더들의 다른 풀이는 map메서드를 이용해서 풀었다. (map 메서드)map메서드를 이용해 작성된 코드

function find_longest_word(arr) {
  let arrLength = arr.map(x => x.length);
  let maxLength = Math.max(...arrLength);
  let longestWord = arrLength.indexOf(maxLength);
  return arr[longestWord];
}