JavaScript Fundamentals - javascript.info (3)

***다음 글의 내용은 javascript.info 사이트의 내용을 공부하며 작성한 내용입니다.

 

JavaScript Fundamentals 2.7 ~ 2.11

---

    2.7 형변환    

- 자동 형 변환과, 명시적 형 변환.

연산자, 함수는 대부분 자동적으로 전달받은 값을 적절한 자료형으로 변환해 준다. (자동 형변환)

하지만 때로는 병시적으로 특정 타입으로 형변환 시켜야 할 때도 있다. (명시적 형변환)

 

문자형으로 변환

String(문자열로변환할값)

 

 

숫자형으로 변환 

Number(숫자로변환할 값)

 

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	문자열의 앞뒤 공백 제거 후 남은 문자열에서 숫자를 읽어 값 리턴. 단, 공백 제거 후 아무것도 안남으면 0, 숫자로만 이뤄진 문자열이 아닌 경우 NaN.

 

불린형으로 변환

Boolean(불린으로변환할 값)

- 0, 빈 문자열, null, undefined, NaN, 즉 빈 값들은 => false

- 그 외의 값 => true로 변환됨. (문자열 "0"은 숫자 0이 아니므로 true. " " 같은 공백도 true.)

---

    2.8 기본 연산자와 수학    

단항 연산자 (예: -x)

이항 연산자 (예: y - x)

피연산자 : 위 예제의 x, y 즉, 연산을 수행하게 되는 대상.

수학 연산자 : +, -, *, /, %(나머지 연산자), ** (거듭제곱 연산자)

 

'+' 문자열 연결

: 피연산자중 하나만 문자열이어도 다른 피연산자들을 문자열로 자동 변환하여 병합한다.

alert(2 + 2 + '1' ); // '221'이 아니라 '41'이 출력됩니다.

=> 연산은 왼쪽에서 오른쪽으로 진행. 문자열을 만나기 전까지는 숫자로 계산, 문자열을 만난 후부터 문자열로 자동변환되어 연산 진행.

 

'+' 단항연산자, 숫자형 변환

+를 단항연산자로 사용가능. 숫자가 아닌 피연산자에 '+'단항연산자를 앞에 붙일 경우 숫자형으로 변환 된다.

즉, Number()를 사용한 명시적 형변환과 동일한 역할을 함.

+true //1
+"" //0

이를 활용하면 다음과 같은 예가 가능하다. 

let apples = "2";
let oranges = "3";

// 이항 덧셈 연산자가 적용되기 전에, 두 피연산자는 숫자형으로 변화합니다.
alert( +apples + +oranges ); // 5

// `Number(...)`를 사용해서 같은 동작을 하는 코드를 작성할 수 있지만, 더 기네요.
// alert( Number(apples) + Number(oranges) ); // 5

 

연산자 우선순위 (Operator precedence)

다음 링크의 테이블 참고.

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

Operator precedence - JavaScript | MDN

 

할당 연산자 '='

값을 할당할 때 쓰임.

 

할당 연산자 체이닝

let a, b, c;
a = b = c = 2 + 2;

위와 같이 한 번에 여러 변수를 연결하여 값을 할당할 수도 있다.

이 경우 가장 오른쪽부터 할당이 이뤄진다. 하지만 연산자 체이닝 방식보다 다음의 방식을 권장.

c = 2 + 2;
b = c;
a = c;

 

복합 할당 연산자

+=, -=, *=, /=, %/ 등. 

 

let n = 2;
n *= 3 + 5; // 16  (*=의 우측이 먼저 평가되므로, n *= 8과 동일.)

 

증가 / 감소 연산자

증가 연산자 increment : ++

감소 연산자 decrement : --

*** 증가, 감소 연산자는 변수에만 사용가능. 숫자에 바로 사용하면 에러 발생.

*** 피연산자 앞에 올 수도, 뒤에 올 수도 있으며, 앞에 올경우 증가/감소 후에 실행, 뒤에 올 경우 실행 후 증가/감소.

 

비트 연산자

&(And), |(OR), ^(XOR), ~(NOT), <<(왼쪽 1칸 쉬프트), >>(오른쪽 1칸 쉬프트), >>> (ZERO-FILL RIGHT SHIFT, 부호 없는 오른쪽 쉬프트)

 

쉼표 연산자

여러 동작을 하나의 줄에서 처리하는 경우 사용하지만, 가독성이 좋지 않으므로 진짜 필요한 경우만 사용할 것.

각각의 표현식이 모두 실행되지만, 결과는 맨 마지막 표현식의 것만 반환됨. 우선순위가 낮아 아래 예제의 경우 괄호가 없으면 뒤의 연산이 무시되어 버림.

let a = (1 + 2, 3 + 4); //7 반환
let a = 1+2, 3+4 //쉼표 앞의 것만 실행되고 나머지 무시되어 3반환.

---

    2.9 비교 연산자    

비교 연산자 : >, <, >=, <=, ==,!= 

불린 형 반환

예) let result = 5 > 4; // true 반환

문자열 비교

사전순으로 문자열 비교. 알파벳 기준 뒤의 문자가 앞쪽보다 크다고 판단하여 비교함. (즉, B가 A보다 크다.)

=> 이 문자열 비교는 단어의 각 문자하나하나를 비교하며, 결과적으로는 문자가 아닌 유니코드 순서를 따져 크기를 비교하는 것!

다른 형을 가진 값 간의 비교

== : 비교 값이 다르면 자바스크립트는 숫자형으로 피연산자를 변환 후 비교

일치 연산자 (Strict Equality Operator)

=== : '==' 보다 엄격한 비교 연산자. 자료형 동일 여부까지 검사함.

( not equal을 비교하는 '!= '의 엄격 버전은 '!==' )

null이나 undefined와 비교하기

null == undefined //true

null === undefined //false, 값 자료형이 다르므로.

null vs 0

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

'==' 피연산자가 undefined, null일 때 형변환 X

비교연산자는 null을 0으로 반환 후 비교.

undefined 비교 불가

undefined는 NaN으로 변환됨. 

※ '===' 제외, 다른 비교 연산자의 피연산자에 undefined, null오지 않게 주의

※ undefined, null이 될 가능성이 있는 변수가 <, >, <=, >= 의 피연산자가 되지 않게 주의. 만약 변수가 undefined, null이 될 가능성이 있다면 따로 처리하는 코드 추가할 것.

 

---

    2.10 if와 '?'를 사용한 조건 처리    

조건에 따라 다른 행동을 취해야 할 때. if문 또는 조건부 연산자 '?'사용.

If 연산자

let year = prompt('ECMAScript-2015 명세는 몇 년도에 출판되었을까요?', '');

if (year < 2015) {
  alert( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  alert( '숫자를 좀 더 내려보세요.' );
} else {
  alert( '정답입니다!' );
}

조건부 연산자 '?'

let result = condition ? value1 : value2;

다중 '?'

let age = prompt('나이를 입력해주세요.', 18);

let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

alert( message );

example

let message;

if (login == '직원') {
  message = '안녕하세요.';
} else if (login == '임원') {
  message = '환영합니다.';
} else if (login == '') {
  message = '로그인이 필요합니다.';
} else {
  message = '';
}

if문을? 조건부 연산자로 변경 시 (동작 동일) =>

let message = (login == '직원') ? '안녕하세요.' :
  (login == '임원') ? '환영합니다.' :
  (login == '') ? '로그인이 필요합니다.' :
  '';

---

    2.11 논리 연산자    

||(OR), &&(AND),!(NOT)

 

|| : 하나만 true여도 true이므로, 만약 조건식이 여러 개 연결되어있는 경우 처음 만난 true값을 리턴.

&& : 모두 true 이면 마지막 값 리턴, false가 있으면 첫 번째 falsy값 리턴.

! : ! true == false, !false == true.

 

예)

alert( null || 2 || undefined ); //2
alert( alert(1) || 2 || alert(3) ); //alert메서드가 undefined를 반환하기 때문에, 2 비교후 2리턴

&&(and)와 ||(OR) 중 &&(and)가 우선순위가 더 높다.