TILJavascript

javascript-study-04

TIL, Web, coding, javascript

JavaScriptBanner

JavaScript Study 04

  • 용어
  • 변수 명명
  • 데이터 타입의 정의
  • 데이터 타입의 종류
    • 숫자 타입
    • 문자열 타입
    • 불리언 타입
    • undefined 타입
    • null 타입
  • 동적 타이밍
  • 연산자
    • 이항 산술 연산자
    • 단항 산술 연산자
    • 문자열 연결 연산자
    • 할당 연산자
    • 비교 연산자
    • 삼항 조건 연산자
    • 논리 조건 연산자
    • 그룹 연산자
    • typeof 연산자
    • 지수 연산자


용어 - ( 러버덕 )

  • 네이밍 케이스
  • 데이터 타입
  • 동적 타이핑

변수명명

변수의 이름을 지정할 때에는 항상 고민하고 신중해야만한다.

식별자 이름 : 숫자 , 문자 , 특수기호(_ , $)

  • 규칙1 : 맨 앞자리 숫자 불가능
  • 규칙2 : 예약어는 쓸 수 없다.(var , let, const , function …)
  • 규칙3 : 대소문자를 구별한다.
  • 규칙4 : 단어와 단어의 사이는 특정기법을 이용한다.(카멜케이스같은)
  • 규칙5 : 변수 이름이 전체다 대문자라면 상수다.

주석은 최대한 적게 쓰도록, 변수명을 제대로 적어야만 한다.

특정기법

  1. 카멜케이스 : 변수 / 함수

    1
    var firstName;

  2. 스네이크케이스 : javascript 에서 잘 사용하지 않는다.

    1
    var first_name;

  3. 파스칼 케이스 : 생성자 함수, 클래스 이름

    1
    var FirstName;

  4. 헝가리언 케이스

    1
    2
    var strFirstName;   			// type + identifier
    var $elem = $('.myClass') // jQuery

데이터 타입의 정의

값의 종류

  • 데이터 타입을 알아야 메모리 공간을 확보가 가능하다. (타입마다 확보할 메모리공간이 다르다.)
  • 데이터를 참조할 때 한번에 읽어 들여야 할 메모리 공간의 크기 를 알 수 있다.
  • 값을 어떻게 해석하는지 알 수 있다.

값을 만들어내는 방법

  • 값 : 리터럴 표기법은 값을 만들어내는 가장 기본적인 방법이다.
  • 표현식 : 평가되어 하나의 값을 만들어낸다.

표현식

값

더 이상 평가할 수 없는 최소 표현식(토큰)

자신을 평가시 자신이 나온다면 그것은 값 이다. ( ex : 30을 평가하면 30이다. )

리터럴 표기법에 의하여 만들어진다.

표현식에 의하여 만들어진다.


평가

표현식 등의 결과를 새로운 값으로 반환한다.


표현식

하나의 값으로 평가될 수 있는 문.

평가되어 하나의 값을 표현하는 방법. (리터럴, 식별자(변수,함수), 연산자, 함수 호출등의 조합)

하나 이상의 리터럴, 하나 이상의 표현식 , 연상자등으로 구성된 문.

식별자도 결국 표현식이다.

1
2
3
var a = 10;
var b = a; 
// a라는 식별자(표현식)가 평가되어 10이라는 값을 반환하였고 b는 10이라는 값을 가리킨다.


리터럴

변수나 상수를 나타내는 값 자체;

소스 코드 안에서 직접 만들어낸 고정된 값.

리터럴 자체는 표현식이지만, 연산이 들어간 표현식은 리터럴이 될 수 없다.( 10 + 20 )


Symbol

심볼은 주로 이름의 충돌 위험이 없는 객체의 유일한 프로퍼티 키(property key)를 만들기 위해 사용한다.

(추후 다시 공부)


데이터 타입의 종류

원시 타입 ( primitive ) - 6가지의 데이터 타입 : 숫자 ,문자열 ,boolean , null, undefined, Symbol

​ boolean : 평가 결과가 true 또는 false를 반환하는 데이터타입

​ null : 변수에 값이 없다는것을 의도적으로 나타냄. (의도적 부재)

​ undefined : 변수를 선언하고 할당하지 않을 경우. 암묵적으로 javascript엔진에 의하여 초기화되는 값.

객체 타입 : 객체, 함수, 배열


숫자타입

C나 Java의 경우, 정수와 실수를 구분하여 int, long, float, double 등과 같은 다양한 숫자 타입이 존재한다.

하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다.

숫자 타입은 추가적으로 3가지 특별한 값들도 표현할 수 있다.

  • Infinity : 양의 무한대

  • -Infinity : 음의 무한대

  • NaN : 산술 연산 불가(not-a-number)

    1
    2
    3
    4
    // 숫자 타입의 3가지 특별한 값
    console.log(10 / 0);       // Infinity
    console.log(10 / -0);      // -Infinity
    console.log(1 * 'String'); // NaN - NaN대소문자 주의 ( nan,NAN 등등 다 안됨. )

문자열 타입

텍스트 데이터를 나타내는데 사용한다.

작은 따옴표(‘’), 큰 따옴표(“”) 또는 백틱(``) 안에 텍스트를 넣어 생성한다.

가장 일반적인 표기법은 작은 따옴표를 사용하는 것이다.

++ 추가

​ : 자바스크립트에서는 개행, 백스페이스 등을 나타낼수있는 이스케이스프 시퀀스를 지원한다.

이스케이프 시퀀스 의미
\0 Null
\b 백스페이스
\f 새로운 페이지
\n 개행(LF, Line Feed)
\r 캐리지 리턴(CR, Carriage Return)
\t 탭(수평)
\v 탭(수직)
\’ 작은 따옴표
\” 큰 따옴표
\ 백슬래시

예를 들어, 줄바꿈과 들여쓰기가 적용된 HTML 문자열은 아래와 같이 이스케이프 시퀀스를 사용하여 작성한다.

근데 개행등의 불편함을 막기 위해스 ES6부터는 백틱( ` ) 이 사용이 가능하다.

1
2
3
4
5
6
7
8
9
10
11
// ES5
var template = '<ul class="nav-items">\n';
template += '\t<li><a href="#home">Home</a></li>\n';
template += '\t<li><a href="#about">About</a></li>\n';
template += '</ul>';

// ES6 - 백틱
const template = `<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

문자열 인터폴레이션

​ 리터럴 문자열 연산을 더 쉽게 하기 위한 ES6의 새로운 기능.

​ ${ } 는 백틱 안에서만 사용이 가능하다.

1
2
3
4
5
6
7
var first = 'Ung-mo';
var last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// ES6: String Interpolation 문자열 인터폴레이션
console.log(`My name is ${first} ${last}.`);

불리언 타입

불리언(boolean) 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.


undefined 타입

선언 이후 명시적으로 값을 할당하지 않은 변수는 자바스크립트 엔진의 암묵적 초기화에 의해 undefined 값을 가진다.

선언은 되었지만 아직 값을 할당하지 않은 변수에 접근하면 undefined가 반환된다.

선언 과 정의

자바스크립트의 선언, 식별자가 생성되었지만 값이 아직 할당되지 않은 상태

자바스크립트의 정의, 식별자가 생성되었고 값까지 할당되어 있는 상태를 의미한다.

1
2
3
4
5
6
// 변수 선언. 내부적으로 undefined로 정의된다.
var foo;
// 변수 선언과 정의
var bar = 1;
// 함수 정의. 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
function baz {}

null 타입

null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재 Intentional absence)할 때 사용한다.

++추가 : 자바스크립트에서는 null값을 사용하는 것보다, 변수의 생명주기에 대해서 이해하고 사용하는 것이 더 바람직하고 유용하다.


Symbol 타입 / 객체 타입 추후 다시 공부


동적 타이핑

정적 타입 언어 : 변수 자체에 데이터 타입을 사전에 선언한다. (int num, float num, char c 등등)

동적 타입 언어 : 변수에 데이터 타입을 알리지않는다. 대신 var / let / const등과 같이 키워드로 변수를 선언함만을 알린다.
대신, 동적타입 언어는 변수가 아닌 값에 의해 타입이 정해진다.


정적 타입 언어 동적 타입 언어
장점 엄격한 규칙으로 인해 버그 발생률을 줄인다. 유연하다. 사용하기 편리하다.
단점 규칙이 엄격하다. 다루기 불편하다. 코드가 길어질수록 점점 변수에 해당되는 값을 알기가 힘들어진다.

자바스크립트는 동적 타입 언어이다. 동적 타입 언어는 정적처럼 변수에 타입을 지정하지 않기 때문에 버그 발생률을 높이는 치명적인 단점을 가지고 있기에 이를 해결하기 위해 TypeScript가 나타났다.


문

; 으로 끝나면 모두 문 이다.

하나 이상의 표현식과 키워드의 조합.

표현식 및 문
  • 변수에 할당할 수 있는 문 : 표현식인 문
  • 변수에 할달할 수 없는 문 : 표현식이 아닌 문

표현식의 역할은 값을 생성하는 것

문의 역할은 표현식으로 생성한 값을 사용해 자바스크립트 엔진에게 명령을 내리는 것


세미콜론 자동 삽입 기능 ( ASI : automati semicolon insertion )

자바스크립트 엔진에는 소스 코드를 해석할 때, 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI, automatic semicolon insertion)이 있다.

하지만, 왠만해서는 세미콜론을 사용하도록 한다.


연산자

이항 산술 연산자

조건 : 2개의 피연산자 필요.

이항 산술 연산자 의미 부수 효과
+ 덧셈 ✕
- 뺄셈 ✕
* 곱셈 ✕
/ 나눗셈 ✕
% 나머지 ✕

단항 산술 연산자

조건 : 1개의 연산자 필요.

단항 산술 연산자 의미 부수 효과
++ 증가 ○
– 감소 ○
+ 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다. ✕
- 양수를 음수로 음수를 양수로 반전한 값을 반환한다. ✕

문자열 연결 연산자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 문자열 연결 연산자
'1' + 2; // -> '12'
1 + '2'; // -> '12'

// 산술 연산자
1 + 2; // -> 3

// true는 1로 타입 변환된다.
1 + true; // -> 2

// false는 0으로 타입 변환된다.
1 + false; // -> 1

// null는 0으로 타입 변환된다.
1 + null; // -> 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined;    // -> NaN
1 + undefined; // -> NaN

할당 연산자

우항의 피연산자의 결과가 좌항에있는 변수에 할당된다.

할당 연산자 사례 동일 표현 부수 효과
= x = 5 x = 5 ○
+= x += 5 x = x + 5 ○
-= x -= 5 x = x - 5 ○
*= x *= 5 x = x * 5 ○
/= x /= 5 x = x / 5 ○
%= x %= 5 x = x % 5 ○

비교 연산자

비교하는 엄격성의 정도가 다르다. 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다.

조건 : 피연산자 2개

비교 연산자 의미 사례 설명 부수 효과
== 동등 비교 x == y x와 y의 값이 같음 ✕
=== 일치 비교 x === y x와 y의 값과 타입이 같음 ✕
!= 부동등 비교 x != y x와 y의 값이 다름 ✕
!== 불일치 비교 x !== y x와 y의 값과 타입이 다름 ✕

왠만하면 === 을 사용할것.

1
2
3
4
5
6
7
// 일치 비교
5 === 5; // -> true

// 암묵적 타입 변환을 하지 않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
5 === '5'; // -> false
5 == '5' // -> true

예외) NaN은 자신과 비교하면 false가 나온다.

1
2
// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // -> false

삼항 조건 연산자

조건식 ? 조건식이 true일때 반환할 값 : 조건식이 false일때 반환할 값

if문을 한줄로 표현이 가능할 때 자주사용한다.

삼항 조건 연산자 if 문
var x = 2;
var result = x % 2 ? ‘홀수’ : ‘짝수’;
console.log(result); // 짝수		 var x = 2;
if(x % 2){
var result = “홀수”
}
else{
var result = “짝수”
}

x( 2 ) 를 나눈 값의 나머지가 0인데 어째서 결과가 짝수인가?

  • x % 2 = 0이다.
  • 조건에서 0은 false를 의미한다.

논리 연산자

논리 연산자 의미 부수 효과
|| 논리합(OR) ✕
&& 논리곱(AND) ✕
! 부정(NOT) ✕ 
1
2
3
// 암묵적 타입 변환
!0;       // -> true
!'Hello'; // -> false

1
'Cat' && 'Dog'; // -> 'Dog' - 단축평가

단축평가란? ‘Cat’은 true이고 그 뒤에 나와 있는 결과 값을 통해서 다이렉트로 값을 반환한다.


그룹 연산자

​ 우선 순위를 강제로 조절하고자 할 때 사용한다.

1
2
3
4
10 * 2 + 3; // -> 23

// 그룹 연산자를 사용하여 우선 순위 조절
10 * (2 + 3); // -> 50 +보다 *가 높다.

typeof 연산자

1
2
3
4
5
6
7
8
9
10
11
12
typeof ''              // -> "string"
typeof 1               // -> "number"
typeof NaN             // -> "number"
typeof true            // -> "boolean"
typeof undefined       // -> "undefined"
typeof Symbol()        // -> "symbol"
typeof null            // -> "object"
typeof []              // -> "object"
typeof {}              // -> "object"
typeof new Date()      // -> "object"
typeof /test/gi        // -> "object"
typeof function () {}  // -> "function"

null 버그 : null의 type을 확인하고 싶다면 ===을 사용할 것.

undefined: 선언하지 변수에 대하여 typeof 를 찍어보면 undefined를 반환한다.


지수 연산자

지수연산자 ( ES7 ) Math.pow 함수( ES6 이하 )
5 ** 2; // -> 25
5 ** 2.5; // -> 55.90169943749474
5 ** 0; // -> 1
5 ** -2; // -> 0.04		 Math.pow(5, 2); // -> 25
Math.pow(5, 2.5); // -> 55.90169943749474
Math.pow(5, 0); // -> 1
Math.pow(5, -2); // -> 0.04

음수를 지수화 할 때는 반드시 ( ) 를 쳐야만 한다.

1
2
3
-5 ** 2;
// -> SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence
(-5) ** 2; // -> 25

1
2
3
4
5
6
// 지수 연산자는 할당 연산자와 같이 사용이 가능하다.
var num = 5;
num **= 2; // -> 25

// 지수 연산자는 이항 연산자보다 우선순위가 높다.
2 * 5 ** 2; // -> 50

Share