JavaScript 공부 3주차

sdtana·2021년 3월 27일
0

학습할 것

  • 산술 연산자
  • 할당 연산자
  • 비교 연산자
  • 비트 연산자
  • 관계 연산자
  • 논리 연산자
  • 문자열 연산자
  • 조건(삼항) 연산자
  • 쉼표 연산자
  • 그 외의 연산자
  • 연산자 우선순위
  • (optional)표현식

산술 연산자

숫자값(리터럴 또는 변수)을 피연산자로 갖고, 하나의 숫자 값을 반환한다. 만약 연산이 불가능할 경우, NaN을 반환한다.
이항 산술 연산자는 두 피연산자를 산술 연산하여 반환한다. 모든 이항 산술 연산자는 피연산자의 값을 변경하지 않으며, 새로운 값을 생성한다. 종류로는 +(덧셈), -(뺄셈), *(곱셈), /(나눗셈), %(나머지)가 있다.
단항 산술 연산자는 하나의 피연산자를 산술 연산하며, 종류로는 ++(증가), --(감소), -(부호 반전)이 있다(+도 존재는 하나, 아무런 역활도 하지 않는다). 이중 ++와 --는 피연산자 앞에 위치하면 피연산자의 값을 증가/감소시킨 후 다른 연산을 수행하고, 피연산자 뒤에 위치하면 다른 연산을 수행한 후 피연산자의 값을 증가/감소 시킨다.

할당 연산자

우항 피연산자의 값을 좌항 피연산자에 할당한다.
종류로는
할당 =
덧셈 할당+= = x = x + y
뺄셈 할당-= = x = x - y
곱셈 할당*= = x = x * y
나눗셈 할당/= = x = x / y
나머지 연산 할당%= = x = x % y
지수 연산 할당**= = x = x ** y
가 있다.

비교 연산자

피연산자들을 비교하고 비교에 따라 boolean 값을 반환한다. 피연산자들은 숫자, 문자열, 논리형, 객체를 사용할 수 있으며, 만약 두 피연산자가 다른 타입일 경우, 대부분 비교를 위해 피연산자를 암묵적으로 타입 변환한다.
위 행위의 예외는 엄격한 비교를 수행하는 === 과 !== 연산이 있다
동등 == -> 3 == '3' // -> true
부등 != -> 3 != '4' // -> true
일치 === -> 3 === '3' // -> false, 3 === 3 // -> true
불일치 !== -> 3 !== '3' // -> true
~보다 큰 > -> 3 > 2 // -> true
~보다 크거나 같음 >= -> 3 >= 3 // -> true
~보다 작은 < -> 3 < 4 // -> true
~보다 작거나 같음 <= -> 3 <= 3 // -> true

  • =>은 연산자가 아닌 Arrow functions의 기호이다.
  • == 연산자는 false = 'false' // -> false, false = '0' // -> true 와 같은 예측하기 어려운 결과를 만들기도 하기에 === 연산자를 주로 사용하도록 주의한다.
  • NaN은 자신에게 ===연산자를 사용해도 일치하지 않는다. ->NaN === NaN // -> false
  • 양의 0과 음의 0은 서로에게 ==이나 ===연산자를 사용하면 true 값을 반환한다.
  • ES6에서 도입된 object.is 메서드를 사용하면 위 두 현상에 대하여 정확환 값을 반환한다. object.is(+0, -0) // -> false, object.is(NaN, NaN) // -> true

비트 연산자

피연산자를 2진수로 변환 -> 비교 -> 결과를 10진수로 변환 및 출력한다. 피연산자는 32비트 정수로 변환된다. 숫자는 32비트를 넘는 경우 왼쪽 비트부터 제거된다. ex)

변환전: 11100110111110100000000000000110000000000001
변환후: 10100000000000000110000000000001

논리곱 (AND) a & b : 두 피연산자의 각 자리 비트의 값이 둘다 1일 경우 해당하는 자리에 1을 반환한다
논리합 (OR) a | b : 두 피연산자의 각 자리 비트의 값이 둘다 0일 경우 해당하는 자리의 0을 반환한다
배타적 논리합 (XOR) a ^ b : 두 피연산자의 각 자리 비트의 값이 같을 경우 해당 자리에 0, 다른 경우 해당 자리에 1을 반환한다
부정 ~a : 피연산자의 각 자리의 비트를 뒤집는다
왼쪽 시프트 <<: 피연산자를 지정한 수만큼 비트 전체를 왼쪽으로 이동. 초과되어 이동되는 비트는 버려지며, 빈 자리에는 0이 작성된다.
오른쪽 시프트 >>: 피연산자를 지정한 수만큼 비트 전체를 오른쪽으로 이동되며, 초과되어 이동되는 비트는 버려지고 빈 자리에는 제일 왼쪽의 비트가 보존되어 작성된다.
부호 없는 오른쪽 시프트 >>>: 피연산자를 지정한 수만큼 비트 전체를 오른쪽으로 이동한다. 초과되어 이동되는 비트는 버려지며, 빈 자리에는 0이 작성된다.

관계 연산자

피연산자들을 비교하고, 비교의 참 여부에 따라 boolean 값을 반환한다.
in 연산자는 객체에 특정한 property가 존재하는 경우 true를 반환한다.
예제

const Person = {name: 'Lee', address: 'seoul'}
console.log('name' in Person) //-> true

instanceof연산자는 좌항에 객체를 가리키는 식별자, 우항에 생성자 함수를 가리키는 식별자를 피연산자로 받고, 우변의 생성자 함수의 바인딩된 객체가 좌변의 프로토타입 체인 상에 존재하면 true값을 반환하고, 아니라면 false를 반환한다.

논리 연산자

우변과 좌변의 피연산자를 논리 연산한다.
논리합(OR)||: 두 항 중 하나라도 true로 변환할 수 있는 경우 true, 아니라면 false를 반환한다.
논리곱(AND)&&: 두 항이 true로 변환할 수 있는 경우 true, 아니라면 false를 반환한다.
부정(NOT)!:단일 피연산자를 true로 변환할 수 있다면 false를 반환하고 그렇지 않다면 true를 반환한다.
! 연산자는 항상 불리언 값을 반환하나, 피연산자가 반드시 불리언 값이 아니어도 되며 만약 불리언 값이 아니라면, 불리언 타입으로 암묵적 타입 변환한다.|| 또는 && 연산자의 평가 결과는 불리언 값이 아닐 수도 있으며 이 둘의 표현식은 항상 2개의 피연산자 중 어느 한쪽으로 평가된다.

단축 평가

||와 && 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 변환한다. 이를 단축 평가(short-circuit evaluation)이라 하며, 표현식을 평가하는 도중에 평가가 확정된 경우 나머지 평가 연산을 생략하는 것을 말한다. 즉
||:좌항을 true로 변환할 수 있는 경우 좌항을 반환하고, 그렇지 않다면 우항을 반환한다.
&&: 좌항을 true로 변환할 수 있는 경우 우항을 반환하고, 그렇지 않다면 좌항을 반환한다.

문자열 연산자

연결 연산자 +는 두 문자열 값을 연결하고, 두 문자열이 합쳐진 새로운 문자열을 반환한다.
ex) console.log('my' + 'string'); // -> 'mystring'
할당 연산자 += 또한 문자열 연산자로 사용 가능하다.

var mystring = 'alpha';
mystring += 'bet';
console.log(mystring); // -> 'alphabet'

조건(삼항)연산자

자바스크립트에서 3개의 항을 사용하는 유일한 연산자이며, 표현식은 다음과 같다.
조건식 ? 조건식이 true일때 반환할 값 : 조건식이 false일때 반환할 값
조건식은 불리언 값으로 평가되며, 불리언 타입이 아닐 시 암묵적 타입 변환된다.
if else문과 비슷하게 사용 가능하나, 조건 연산자 표현식은 값으로 사용 가능하다. 예를 들면

var x = 10;
var result = x % 2 ? '홀수' : '짝수';
console.log(result); // -> '짝수'

쉼표 연산자

,는 두 피연산자를 평가하고, 마지막 피연산자의 값을 반환한다. 주로 for 반복문 안에서 각각의 시간에 복수의 변수들을 갱신하기 위해서 사용한다.

그 외의 연산자

delete

delete연산자는 객체, 프로퍼티 또는 배열의 특정한 위치에 있는 객체를 삭제하는 연산자이다. 만약 delete연산자가 동작했다면, 목표로 한 속성이나 원소를 undefined로 설정한다. 또한 연산이 수행 가능하다면 true를, 불가능하다면 false를 반환한다.

typeof

typeof연산자는 피연산자의 데이터 타입을 문자열로 반환한다.
typeof연산자는 7가지 문자열 'string', 'number', 'boolean', 'undefined', 'symbol', 'object', 'function' 중 하나를 반환하며, 'null'은 반환하지 않는다.

  • 만약 typeof연산자로 null을 연산한다면 object로 반환된다. 이것은 버그이나, 기존 코드에 영향이 갈 수 있어 수정되지 않는다. 따라서 값이 null인지 확인할 때는typeof연산자가 아닌 ===을 사용하도록 한다.
  • 선언하지 않은 식별자를 typeof로 연산한다면 ReferenceError가 발생하지 않고 undefined를 반환한다.

?.

?.는 ES11에서 추가된 옵셔널 체이싱(optional chaining) 연산자로써, 좌항의 피연산자가 null 또는 undefined일 경우 undefined를 반환하고, 그렇지 않으면 우항의 property를 참조한다.
이전에는 변수가 null 또는 undefined인지 확인하기 위해 && 연산자를 사용했는데, false로 암묵적 타입 변환되는 0이나 ' '(빈공간)이 객체로 사용되는 경우가 있어 불편을 겪었다. 이를 우회하기 위해 ?.를 사용하면 false로 변환되는 값이라도 null 또는 undefined가 아니라면 property 참조가 가능하게 되었다.
이전 코드

var elem = ' ';
var length = elem&&elem.length; // 문자열의 길이 참조
console.log(length) // ' ', 문자열의 길이 참조 불가

?.를 사용한 코드

var str = ' ';
var length = str?.length;
console.log(length) // 0

??

??는 ES11에서 ?.와 함께 추가된 'null 병합 연산자'로써, 좌항의 피연산자가 null 또는 undefined라면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. ?? 연산자는 변수에 기본값을 설정할 때 유용하다.
이전에는 변수에 기본값을 설정할 때 || 연산자의 단축 평가를 사용하였으나, 이 경우 좌항의 피연산자가 false로 설정되는 값(0, false, null, 0)일 경우 우항의 피연산자를 반환하기 때문에 예기치 않은 동작이 발생할 수 있다. null 병합 연산자를 사용한다면 예기치 않은 동작을 피할 수 있다.
이전 코드

var foo = ' ' || 'default string';
console.log(foo) // -> 'default string', 예기치 않은 동작

바뀐 코드

var foo = ' ' ?? 'default string';
console.log(foo) // -> ' '

new

new연산자는 함수 호출 시 사용하면 해당 함수를 생성자 함수로 동작하게 한다.

그룹 연산자

그룹 연산자는 소괄호('()')로 피연산자를 감싸며, 자신의 피연산자인 표현식을 가장 먼저 평가하도록 한다. 따라서 연산자의 우선순위를 조절할 수 있고 연산자 우선순위가 가장 높다.

확산 연산자

배열에서 ...을 사용해서 배열의 나머지 값들을 받아오거나 확장시킬 수 있는 연산자이다. 또한 배열 안에 있는 값들을 매개변수에 사용할 수 있다.

let arr = [1,2,3,4,5];
let arr2 = [...arr]; // -> arr2의 값은 1,2,3,4,5

함수에서의 매개변수 활용

let arr = [1, 2, 3, 4, 5];
function sum(a, b, c, d, e){
  return a + b + c + d + e;
};
sum(...arr); // 15
  • 확산연산자를 사용한 변수나 매개변수는 마지막에 위치해야만 하며, 그렇지 않으면 에러가 난다.

연산자 우선순위

연산자는 여러 개의 연산자로 이뤄진 문이 실행될 때 실행되는 순서가 있다. 연산자 우선순위는 다음과 같다.

(출처:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)

표현식

표현식이란 값으로 평가되는 구문이다. 표현식과 표현식이 평가된 값은 동치(equivalent)이다. 즉 값이 위치할 수 있는 자리에 표현식도 위치할 수 있다(조건 연산자).
몇몇 중요한 표현식 키워드가 있는데, this키워드는 현재 위치한 객체를 참조하는데 사용한다. 점(.) 또는 괄호([])로 접근 가능하다.
super키워드는 개체의 부모에 함수를 호출할 수 있다.

출처

profile
sdtana
귀차니즘 탈출 시도중
이전 포스트

JavaScript 공부 2주차

다음 포스트

JavaScript 공부 4주차

0개의 댓글

관련 채용 정보