[javascript] 표현식(Expression)과 연산자(Operator)

jinwonShen·2022년 8월 15일
JavaScript

javascript

목록 보기
7/52
post-thumbnail

👍 표현식(expression)

  • 하나의 값으로 평가될 수 있는 문장이다.
    자바스크립트에는 크게 두 가지 종류의 표현식이 존재한다.

변수의 값을 대입하는 표현식

let color = 'beige';

하나의 값을 리턴하기 위해 두 개 혹은 그 이상의 값을 사용하는 표현식

let area = 3 * 2;

👉 연산자

  • 개발자가 하나 혹은 그 이상의 값을 하나의 값으로 만들 때 사용한다. 덧셈 뺄셈, 나눗셈과 같은 연산을 컴퓨터를 통해 작업하는 것이다.

연산자 종류

산술연산자, 문자결합연산자, 대입연산자, 증감연산자, 비교연산자, 논리연산자, 삼항연산자


👉 산술연산자

  • 산술연산자는 피연산자가 숫자인 연산자이다.
    currentYear - birthyear + 1 currentYear, birthyear, 1은 연상 대상으로 '피연산자' 로 부른다.
    더하기 빼기 같은 것을 '연산자'라고 부른다.
분류종류설명
사칙 연산자+더하기 연산을 할 때 사용한다.
사칙 연산자문자와 문자, 문자와 변수 등을 연결할 때 사용한다.
사칙 연산자-빼기 연산을 할 때 사용한다.
사칙 연산자*곱하기 연산을 할 때 사용한다.
사칙 연산자/몫을 구할 때 사용한다.
나머지 연산자%나머지를 구할 때 사용한다.
증감 연산자++변수값을 1 씩 증가시킬 때 사용한다.
증감 연산자--변수값을 1 씩 감소시킬 때 사용한다.

✍ 실습하기 !

<script>
	let num1 = 15;
    let num2 = 2;
    let result;
    
    result = num1 + num2;
    document.wrtie(result + '<br>');
    result = num1 - num2;
    document.wrtie(result + '<br>');
    result = num1 * num2;
    document.wrtie(result + '<br>');
    result = num1 / num2;
    document.wrtie(result + '<br>');
    result = num1 % num2;
    document.wrtie(result + '<br>');
</script>

🤞 결과


👉 문자결합연산자

  • 피연산자(연산 대상 데이터)가 문자형 데이터이다.
    여러 개의 문자를 하나의 문자형 데이터로 결합할 때 사용한다.
    피연산자 중 하나가 문자열이면 나머지 피연산자를 문자열로 만든다. ( 예: '문자' + 1 )

✍ 실습하기 !

<script>
	const t1 = "학교종이";
    const t2 = "떙땡땡";
    const t3 = 8282;
    const t4 = "어서모이자";
    let result;
    
    result = t1 + t2 + t3 + t4;
    document.write(result);
</script>

🤞 결과

👉 대입연산자

  • 대입연산자(=)는 연산된 데이터를 변수에 저장할 때 사용한다.
    복합대입 연산자는 대입연산자가 복합으로 적용된 것이다.
종류설명
=num = 1 은 우변의 값 1을 좌변의 num 에 대입한다.(저장한다.)
+=num += 2 는 num = num + 2 와 같다.
-=num -= 2 는 num = num - 2 와 같다.
*=num = 2 는 num = num 2 와 같다.
/=num /= 2 는 num = num / 2 와 같다.
%=num %= 는 num = num % 2 와 같다.

✍ 실습하기 !

<script>
	let num1 = 10;
    let num2 = 3;
    
    num1 += num2; // 13 = 10 + 3
    document.write(num1, '<br>');
    
    num1 -= num2; // 10 = 13 - 3
    document.write(num1, '<br>');
    
    num1 *= num2; // 30 = 10 * 3
    document.write(num1, '<br>');
    
    num1 /= num2; // 10 = 30 / 3
    document.write(num1, '<br>');
    
    num1 %= num2; // 1 = 10 % 3
    document.write(num1, '<br>');
    
    //html 태그를 복합연산자를 이용해 사용함.
    var str = "<table border='1'>";
    str += "<tr>";
    str += "<td>자바스크립트</td><td>제이쿼리</td><td>study</td>";
    str += "</tr>";
    str += "</table>;
    document.write(str);
</script>

🤞 결과


👉 증감연산자

  • 숫자형 데이터를 1씩 증가 또는 1씩 감소 시키는 연산자로 증감연산자는 어느 위치에 오는가에 따라서 결과값이 달라진다. ++, -- 연산자는 변수의 앞쪽이나 뒤쪽에 붙여 사용할 수 있다.
let score = 10;
++score; // 11;
score++; // 12;
console.log(score);

👉 증감연산자 특징

  • 증가감 연산자가 변수와 단독으로 사용될 때는 변수의 앞쪽이나 뒤쪽에서 붙여도 상관없지만 "=" 연산자와 같이 사용되면 결과값에 영향을 준다.
// 전치연산자(선행연산자)
let score = 10;
let result = ++score;
console.log(result + ',' + score); //11, 11

// 후치연산자(후행연산자)
let score = 10;
let result = score++;
console.log(result + ',' + score); //10, 11

✍ 실습하기

<script>
	//++score 전치연산자
    let score = 10;
    let result = ++score;
    document.write(result + ',' + score + '<br>');
    
    //score++ 후치연산자
    let score = 10;
    let result = score++;
    document.write(result + ',' + score + '<br>');
    
    //우선순위 연산자
    let calculation = 3 - 5 * 8 / 2 + 3;
    document.write(calculation);
</script>

🤞 결과


👉 증감연산자 계산원리

  • result = ++score의 경우
    ++score은 = 보다 우선순위가 높습니다.
    따라서 ++score를 먼저 연산한 이후에 결과값을 result변수에 저장합니다.
let result = ++score
let result = score = 11
let result = 11
  • result = score++의 경우
    score++은 = 보다 우선순위가 낮습니다.
    따라서 result = score가 먼저 연산된 후에 score++이 연산됩니다.
let result = socre++
let result = 10
			 score++
             score = 11

✍ 증감연산자 계산해보기

let a = 10; // a는 ?
let b = a++ + 5; // b는 ?

let c = 10; // c는 ?
let d = ++c + 5; // d 는 ?

let a = 10; // a는?
let b = a++ +5; // b는 ?
let c = b--; // c는 ?

//해설
let a = 10;

let b = a++ + 5;
// b = 10 + 5 => b 는 15
// a는 나중에 연산되므로 10 + 1, 최종 a는 11

let c= b--;
// 15- = 14; 최종 b는 14
// 후치연산자는 위에 식이 계산되기 전에 값이 저장되므로
// 최종 c는 15

- 연산자의 우선순위

연산자의 우선순위는 '*', '/'중 좌측 연산자 우선 '+', '-'중 좌측연산자 우선, 마지막이'=' 연산자 입니다.


- 그룹연산자

  • 우선순위를 높여주고 싶다면 그룹연산자 "()"를 사용한다.

let calculation = (5 - 2) * 8;


- 비교연산자

  • 두 데이터를 '크다, 작다, 같다'로 비교할 때 사용한다. 결과값은 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

- 이상, 초과, 이하, 미만 표현

종류설명
이상num >= 10, 10 이상을 의미
초과num > 10, 10 초과를 의미
이하num <= 10, 10 이하를 의미
미만num < 10, 10 미만 의미

✍ 실습하기

<script>
	const com1 = (5 > 2);
    console.log('com1 : ' + com1);
    
    const com2 = (5 < 2);
    console.log('com2 : ' + com2);
    
    const com3 = (5 == 5);
    console.log('com3 : ' + com3);
    
    const com4 = (5 == "5");
    console.log('com4 : ' + com4);
    
    const com5 = (5 === 5);
    console.log('com5 : ' + com5);
    
    const com6 = (5 != 5);
    console.log('com6 : ' + com6);
    
    const com7 = (5 !== 5);
    console.log('com7 : ' + com7);
</script>

🤞 결과


- 논리연산자

종류설명
&& (AND) 논리곱a && b, a와 b 모두 참일때 true
true && true = true , true && false = false
false && true = false , false && false = false
││(OR) 논리합a││b, a와 b중 하나만 참이면 true
true ││ true = true , true ││ false = true
false ││ true = true , false ││ false = false
!(NOT) 부정!a, a가 true이면 false, false이면 true로 바꾸어준다.

✍ 실습하기

<script>
	let logic1, logic2, logic3, logic4, logic5;
    
    logic1 = (3 > 2) && (5 > 3);
    console.log('logic : ' + logic1);
    
    logic2 = (3 < 2) && (5 > 3);
    console.log('logic : ' + logic2);
    
    logic3 = (3 > 2) || (5 > 3);
    console.log('logic : ' + logic3);
    
    logic4 = (3 < 2) || (5 < 3);
    console.log('logic : ' + logic4);
    
    logic5 = !(3 < 2);
    console.log('logic : ' + logic5);
    
    logic6 = !(3 > 2);
    console.log('logic : ' + logic6);
</script>

🤞 결과


- 연산자 우선순위

서로 다른 연산자를 계산하는 순서

  1. 단항연산자(--, ++, !)
  2. 산술연산자(*, /, %, +, -)
  3. 비교연산자(>, >=, <, <=, ==, ===, !==, !=)
  4. 논리연산자(&&, ||)
  5. 대입(복합대입) 연산자(=, +=, -=, *=, /=, %=)

같은 분류일 때 계산하는 순서

1st2nd3nd4nd5nd6nd7nd
( )
단항연산자!++--
산술연산자*/%+-
비교연산자<<=>>===!====
논리연산자&&││
대입(복합)연산자=+=-=*=/=%=

👉 삼항연산자

  • 조건식의 결과값에 따라 실행 결과가 달라지는 연산자로 연산을 위해 피연산자 3개가 필요하다.

    조건식 ? 자바스크립트 코드1 : 자바스크립트 코드2

조건식의 값이 참이면 1번코드 실행, 그렇지 않으면 2번코드 실행

✍ 실습하기

<script>
	const a = 10;
    const b = 3;
    
    const result = a > b ? "JavaScript" : "hello";
    document.write(result);
</script>

🤞 결과


✍ 실습하기

  • 10과 -10이 음수인지 양수인지 삼항 연산자를 활용해 코드로 제작해 보세요.
<script>
	const num1 = 10;
    const num2 = -10;
    const result1 = num1 > 0 ? '양수' : '음수';
    const result2 = num2 > 0 ? '양수' : '음수';
    document.write(result1 + '<br>');
    document.write(result2);
</script>

🤞 결과

✍ 실습하기

질의 응답창으로 적정체중 구하기

  • 질의 응답창을 만들어 방문자의 이름, 신장, 체중을 입력받은 후 적정 평균체중을 구해보세요.

적정체중 = (본인신장 - 100) * 0.9

입력 : 당신의 이름은? / 신장은 ? / 몸무게는 ?
적정 평균체중 오차는 ±5이며
방문자가 입력한 체중이 적정체중일 경우에는 '000님은 적정체중입니다.'를
아닐경우에는 '000님은 적정체중이 아닙니다.'를 화면에 출력하시오.

사용자몸무게 >= 적정체중 -5 && 사용자몸무게 <= 적정체중 + 5

<script>
	const userName = prompt("당신의 이름은?","이름을 입력하세요.");
    const userHeight = prompt("당신의 신장은?","신장을 입력하세요.");
    const userWeight = prompt("당신의 몸무게는 ?","몸무게를 입력하세요.");

    //적정체중?(본인신장 - 100) * 0.9
    const nomalWeight = (userHeight - 100) * 0.9;
    let result = userWeight >= nomalWeight - 5 && userWeight <= nomalWeight + 5;

    result = result ? ' 적정체중입니다. ' : ' 적정 체중이 아닙니다. ';
    document.write(userName + '님은' + result);
</script>
profile
jinwonShen
하면 된다. | 좋은 FE 개발자 되기
이전 포스트

[javascript] 배열(Array)

다음 포스트

[javascript] 객체(Object)

0개의 댓글