[공부 필기] JavaScript 문법 공부 10일차

※ 필자는 초초초보자입니다.

※ 틀린 내용에 대한 피드백은 언제든지 환영합니다.

 

 

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/type-conversions

형 변환

 

---

✅ 형변환

- 객체의 형변환은 뒤에서 배운다.

 

- 문자형으로 변환 : 가장 대표적인 예는 alert(value)이다. 이때, value는 문자열로 변환된다.

   ► value에 들어오는 값이 숫자형, 불린형 등 문자형이 아닌 다른 타입이어도 문자열로 변환된다.

 

- 숫자형으로 변환 : 수학과 관련된 함수와 표현식에서 자동으로 일어나는 형변환이다.

   ► 아래의 코드를 보면 어떤 상황에서 숫자형으로 자동 형변환이 일어나는지 알 수 있다.

console.log("2" + "3.3"); //결과: 23.3
console.log("2" + "3"); // 결과: 23
console.log("10" / "3"); // 결과: 3.3333333333333335
console.log("10" % "3"); // 결과: 1

   ► Number를 사용하면 인자를 숫자형으로 명시적 형변환할 수 있다.

let str = "123"; //문자형
console.log(typeof str);

let num = Number(str); //숫자형
console.log(typeof num);

   ► 문자 기반 폼(form)을 통해 입력을 받는데, 이 입력 받은 값을 숫자처럼 이용해야 하는 경우

        숫자형으로 명시적 형변환이 필수이다.

   ► 숫자 이외의 글자를 숫자형으로 변환하려고 하면 결과는 NaN이 된다.

        # undefined를 숫자형으로 변환하면 결과는 NaN

        # null을 숫자형으로 변환하면 결과는 0

        # true를 숫자형으로 변환하면 결과는 1, false는 0

let str = "Hello World!";
console.log(str); // 결과: Hello World!

let num = Number(str);
console.log(num); // 결과: NaN

   ► 만약 문자열을 명시적 형변환할 때

        이 문자열이 "(공백)(숫자)(공백)"이라면, 공백은 제거되고 숫자만 형변환된다.

let str = "          1       ";
console.log(str); // 결과:           1       

let num = Number(str);
console.log(num); // 결과: 1

 

 

- 불린형으로 변환 : Boolean을 호출하면 불린형의 명시적 형변환이 된다.

   ► 다음의 값은 불린형으로 명시적 형변환을 할 때, false로 변환된다.

        1) 숫자 0 (문자열 "0" 아님, 문자열 "0"은 true로 변환됨)

        2) 빈 문자열

        3) null

        4) undefined

        5) NaN

   ► 이 외의 값은 true로 변환된다.

   ► 만약 문자열을 명시적 형변환할 때

        이 문자열이 "(공백)(문자열)(공백)"이라면, 공백은 제거되고 문자열만으로 형변환을 한다.

let str = "          1       ";
let booleanStr = Boolean(str);

console.log(booleanStr); // 결과 true
console.log(Boolean(0)); // 결과 false
console.log(Boolean()); // 결과 false
console.log(Boolean(null)); // 결과 false
console.log(Boolean(undefined)); // 결과 false
console.log(Boolean(NaN)); // 결과 false

 

---

공부하고 있는 자료 : modern JavaScript tutorial 

https://ko.javascript.info/operators

기본 연산자와 수학

 

✅ 기본 연산자 중 거듭제곱 연산자(**)

a ** b

- 위의 코드는 a를 b번 곱한다는 의미이다.

- 응용하면 제곱근도 구할 수 있다.

   예시 (4와 3의 제곱근 구하기)

console.log(4 ** (1/2));
console.log(3 ** (1/2));

 

✅ 이항 연산자 '+'와 문자열 연결

- 자바스크립트가 제공하는 특별한 연산자 기능이 있다.

- 덧셈 연산자

   ► 숫자를 더한 결과값 반환

   ►문자열 병합(연결)

console.log(1 + 2); // 3
console.log("1" + 2); // 12
console.log("일" + "이"); // 일이

- 피연산자 중 어느 하나가 문자열이면 다른 하나도 문자열로 변환된다.

   ► 연산은 왼쪽에서 오른쪽으로 순차적으로 진행된다.

   ► 숫자(2) + 숫자(3)의 결과는 더해져서 숫자형이 되고,

        숫자(5) + 문자('1')의 결과는 문자열로 치환되고 병합된다.

   ► 문자('1') + 숫자(3)의 결과가 문자열로 치환되고,

        문자열("13") + 숫자(2)의 결과도 문자열로 치환된다.

console.log(2 + 3 + '1'); // 51
console.log('1' + 3 + 2); // 132

- 이항 연산자 "-"와 "/"는 아래와 같이 숫자형으로 바뀐 후 연산이 진행된다.

console.log('6' / 2); // 3
console.log(6 / '2'); // 3
console.log('6' - 2 - '1'); // 3
console.log(6 - '2' - 1); // 3

 

- true와 false는 값이 더해지고 숫자형으로 변환된다.

"use strcit";

console.log(true + false); // 1
console.log(typeof(true + false)); // number
console.log(true - false); // 1
console.log(typeof(true - false)); // number

 

- null과 undefined은?

   ► null은 숫자형으로 변환 시 0이 된다.

   ► undefined는 숫자형으로 변환이 NaN이 된다.

- 줄바꿈, 탭키에 대한 아스키코드는?

console.log(null + 1); // 1
console.log(null - 1); // -1

console.log(undefined + 1); // NaN
console.log(undefined - 1); // NaN

console.log("  \t \n" + 2); //   (탭하고)   (줄바꾸고)2"
console.log("  \t \n" - 2); // -2

 

 

✅ 단항 연산자 '+'와 숫자형으로의 변환

- 덧셈 연산자는 단항 연산자로도 사용할 수 있다.

- 숫자에 단항 덧셈 연산자?

   ► 아무런 동작도 하지 않는다.

- 숫자가 아닌 타입에 단항 덧셈 연산자?

   ► 숫자형으로 변환

   ► Number (...)와 동일한 일을 한다.

console.log(+2); // 2
console.log(-2); // -2
console.log(+"3"); //3
console.log(+true); // 1
console.log(-'3'); // -3
console.log(-false); // -0

- typeof로 보면 모두 number로 출력되는 것을 알 수 있다.

 

- 아래와 같은 코드가 있다고 가정하자.

   ► (num1 * 10)은 숫자형으로 계산이 되고, 뒤에 이항 덧셈 연산자와 num2는 문자열로 연결이 된다.

let num1 = "2";
let num2 = "4";

console.log(num1 * 9 + num2); // 184

   ► 만약 num2를 숫자형으로 변환해서 덧셈을 하고 싶다면 단항 덧셈 연산자를 이용하면 된다.

let num1 = "2";
let num2 = "4";

console.log(num1 * 9 + +num2); // 22

 

✅ 연산자 우선순위

- 모든 우선순위를 기억할 필요는 없다.

- 우선순위가 높다(숫자가 더 크다)는 것은 더 먼저 적용된다는 것이다.

- 하지만 동일한 기호(+, -, /, % 등)의 단항 연산자는 이항 연산자보다 우선순위가 높다는 것을 주목해야한다.

   ► 우선순위 : 단항 연산자 > 이항 연산자

 

✅ 할당 연산자

- 할당 연산자(=)

- 우선순위는 3이다.

 

※ 할당 연산자를 포함한 대부분의 연산자들(+, -, =)은 값을 반환한다. 

때문에 이런 코드도 가능하다고 한다.

let a = 1;
let b = 2;

let c = 3 - (a = b + 1);

console.log(a);
console.log(c);

//코드 출처 : 모던 JavaScript https://ko.javascript.info/operators

 

✅ 할당 연산자 체이닝

- 아래와 같이 할당 연산자를 여러 개 연결할 수도 있다고 한다.

- 우선순위는 할당 연산자가 더 낮기 때문에 (2+2)의 결과가 a, b, c에 대입된다.

- a, b, c에 대입되는 것은 우측에서 부터 순차적으로 할당된다.

"use strcit";

let a, b, c;

a = b = c = 2 + 2;

console.log(a); // 4
console.log(b); // 4
console.log(c); // 4

 

✅ 복합 할당 연산자

- (+=) (-=) (*=) (/=) (%=)

 

✅ 증가.감소 연산자

++ / --

후위형 / 전위형

 

✅ 비트 연산자

- 인수를 32비트 정수로 변환하여 이진 연산을 수행한다.

- &

- |

- ^

- ~

- <<

- >>

- >>> : 부호없는 오른쪽 시프트

 

✅ 쉼표 연산자(,)

- 좀처럼 보기 힘들고 특이한 연산자이다.

- 코드를 짧게 쓰려는 의도로 가끔 사용된다고 한다.

- 쉼표 연산자는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다.

- 아래의 코드를 보자.

let a = (1 + 2, 3 + 4);

console.log(a); // 7

// 코드 출처 : 모던 JavaScript https://ko.javascript.info/operators

- 위의 코드에서 (1+2)와 (3+4)의 표현식은 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되기 때문에

   (1+2)는 버려지고, a의 값이 되는건 마지막 표현식(3+4)이다.

   ► 즉, 결과값은 7이 된다.

 

- 이 쉼표 연산자는 우선순위가 가장 낮기 때문에, 아래와 같이 사용할 수도 있다.

"use strcit";

let a = 3, b = 4, c = 5;

console.log(a); // 3
console.log(b); // 4
console.log(c); // 5

 

※ 결과값 주의

"4px" - 2; // NaN
7 / 0; // Infinity