[JS] 연산자 알아보기

연산자

데이터 처리를 하는데에 있어 연산자는 매우 중요한 역할을 합니다. 특히 문자열 처리하는 부분은 대부분의 프로그램에서 꼭 필요하니 잘 이해해야 합니다.

문자열 제어 연산자

+ 연산자를 사용하여 문자열을 합칩니다.

모두 문자열일 때

"kim" + "junhyoung"; // "kimjunhyoung"
"19" + "93"; // "1993"

문자열로 연결합니다.

하나만 문자열일 때

19 + "93"; // "1993";
10 + {}; // "10[Object object]"

다른 피연산자의 타입을 문자열로 바꾼 후에 연결합니다.

String 객체 메서드

문자열을 처리하기 위한 객체로써 문자열을 생성하기 위해 String 생성자를 사용하여 생성합니다.

var hello = new String("안녕");

이처럼 원시 값을 객체로 변환하는 행위를 래핑(wrapping)한다고 합니다.


그런데 문자열 변수를 선언하고 메서드를 사용할 수 있었죠?(예를들면 length, substring 등) 객체가 아니면 프로퍼티를 사용할 수 없다고 알고있었는데 어떤 이유로 사용할 수 있는걸까요?

var company = "hell";

var howLong = company.length; // 4

위 howLong 변수를 실행하면 아래와 같은 현상이 일어납니다.

var companyObj = new String(howLong); // String 객체를 생성합니다.
var howLong = companyObj.length; // 생성한 객체의 프로퍼티를 가져와 메서드를 실행합니다.

먼저 companyObj에 String 객체를 생성하는데 이는 위에서 설명드렸던 래핑 현상으로서 이 객체는 래퍼 객체라고 합니다.

이 래퍼 객체는 생성 후 곧바로 메모리에서 삭제되게 됩니다. 그리고 우리는 만들어진 String 객체의 프로퍼티를 이용하여 메서드를 사용할 수 있게 됩니다.

눈치 채신 분도 계시겠지만 문자열 뿐만 아니라 숫자는 Number, 논리는 Boolean 객체로 변환됩니다. 주의할 점은 null과 undefined는 래퍼 객체가 없다는 것입니다!

String 객체의 메서드 종류

문자열 메서드의 종류는 매우 많지만 가장 흔하고 자주 사용하는 메서드 위주로 간단하게 정리하였습니다.

var name = "junjang";

substring

name.substring(2, 4); // nj : 2번째 문자부터 4번째 문자 이전의 문자열

slice

name.slice(2, 4); // nj : 2번째 문자부터 4번째 문자 이전의 문자열
name.slice(-3); // ang : 끝에서 부터 마지막 문자 세 개

indexOf

name.indexOf("j"); // 0 : 문자 j가 처음 나오는 위치
name.indexOf("j", 2); // 3 : 2번쨰 이후 문자 j가 처음 나오는 위치

lastIndexOf

name.lastIndexOf("j"); // 3 : 문자 j가 마지막으로 나오는 위치

split

name.split("j"); // ["", "un", "ang"] : j로 문자열을 나눔

replace

name.replace("g", "G"); // "junjanG" : g를 G로 바꿈

includes

name.includes("an"); // true : "an"이 포함되어 있는지를 뜻하는 논리값

관계 연산자

관계 연산자는 두 개의 피연산자를 비교한 결과 논리값으로 반환합니다. 주로 조건, 반복문에서 사용합니다.

• == : 값이 같음
• != : 값이 다름
• === : 값과 타입이 같음
• !=== : 값과 타입이 다름
• < : 작음
• > : 큼
• <= : 같거나 작음
• >= : 같거나 큼

여기서 주의해야할 점은 ==, ===입니다. 이 둘은 큰 차이가 없는 것 같지만 아주 매우 엄청 큰 차이를 가지고 있습니다. 이어서 살펴보겠습니다.

동일(==) 연산자

동일(==) 연산자는 좌변과 우변의 피연산자가 같은지 판별하게 되는데, 내부적으로 피연산자의 타입을 변환한 후 느슨하게 비교합니다.

좌우 피연산자의 타입이 같을 때

var first = [1, 2, 3];
var second = [1, 2, 3];
var third = first;

console.log(first == second); // false
console.log(first == third); // true

객체를 담은 변수를 비교할 경우에는 객체의 참조를 담고 있기 때문에 같은 객체를 가리키고 있는지의 판별입니다. 즉, first와 second는 다른 객체를 참조하고 있으며 메모리의 위치가 다르고, first와 third는 같은 객체를 참조하고 있습니다.

좌우 피연산자의 타입이 다를 때

undefined == null; // true : 두 값은 같은 것으로 친다.
100 == "100"; // true : 내부적으로 타입을 바꿔 느슨하게 비교
true == 1; // true : true값은 1, "1"로 동일 연산비교합니다.
false == 0; // true : false값은 0, "0"으로 동일 연산비교합니다.

일치(===) 연산자

일치(===) 연산자는 피연산자를 평가한 후 타입을 변환하지 않고 두 값을 엄격하게비교합니다.

null === undefined; // false
1 === "1"; // false
true === 1; // false
false === 0; // false

논리 연산자

논리 연산자는 보다 복잡한 논리를 정의합니다.

• && : a와 b가 모두 true면 true
• || : a와 b 중 하나라도 true면 true
• ! : a가 true면 false, false면 true

var x = 5;
var y = 10;

x > 0 && y > x; // true : x와 y가 모두 참
x > 0 || y < x; // true : x와 y 중 하나만 참

단락 평가

&& 연산자와 || 연산자는 Java나 C같이 논리값을 반환하지 않고 마지막에 평가한 피연산자의 값을 반환합니다.

논리곱(&&) 연산자

a를 평가한 값이 false면 b의 값에 관계없이 b를 평가하지 않고 false를 반환하는 것이 아닌 a의 값을 반환합니다. 만약 a가 true라면 b의 값을 반환합니다.

그래서 객체의 프로퍼티를 사용할 때나 null을 체크하기 위해 자주 사용됩니다.

var check = null;
check && check.name; // null : check가 false로 평가되어 check의 값을 반환, 우변은 평가하지 않음
check = { name: "junjang", age: 28 };
check && check.name; // "junjang" : check가 true로 평가되어 check.name을 반환함

여기서 단락 평가를 하지 않았다면 check.name이 없기 때문에 에러가 발생하였겠죠? 하지만 단락 평가를 했기 때문에 check.name을 평가하지 않기 때문에 에러가 발생하지 않습니다.

논리합(||) 연산자

a를 평가한 값이 true면 b의 값에 상관없이 b를 평가하지 않고 true를 반환하는 것이 아닌 a의 값을 반환합니다. 만약 a가 false라면 b의 값을 반환합니다.

그래서 여러 개의 값 후보 중 null 또는 undefined가 아닌 값을 선택하고자 할 때 유용합니다.

var time = thisTime || lastTime || new Date();
// thisTime이 정해져 있지 않다면 lastTime으로, lastTime도 정해져 있지 않다면 new Date()를 사용합니다.

이처럼 값이 null 혹은 undefined일 경우를 체크할 때 유용합니다. 그리고 함수에서 인수의 초기값을 설정할 때 유용합니다.

function insertParam(x) {
  x = x || 10;
}
insertParam(); // x = 10
insertParam(100); // x = 100

위 함수처럼 인수를 안넣을 경우 x가 undefined로 들어와 false로 평가되어 10이 들어가게 됩니다. 하지만 인수를 넣을 경우 true로 평가되어 넣은 인수값이 들어갑니다.

기타 연산

typeof 연산자

typeof 연산자는 단항 연산자이며 피연산자의 데이터 타입을 뜻하는 문자열을 반환합니다.

var name = "junjang";
console.log(typeof name); // string

위처럼 name 변수에 어떤 타입이 들어가있는지 확인할 수 있습니다.

조건(삼항) 연산자

조건 연산자는 삼항 연산자라고 주로 말합니다. 참과 거짓에 따라 값을 선택합니다.

function checkParity(value) {
  var isParity = value % 2 == 0 ? "짝수" : "홀수";
  return isParity;
}
checkParity(2); // 짝수
checkParity(9); // 홀수

isParity 변수의 계산식(첫 번째 피연산자)이 true면 두 번째 피연산자의 값을 가져가고 false라면 세 번째 피연산자의 값을 가져갑니다.