[JavaScript] JavaScript 기본, 자료형

코드 구조

문(statement) 

• syntax structure, command 의미
• 코드엔 원하는 만큼 문을 작성 가능 
• 가독성을 높이기 위해 서로 다른 줄에 작성

세미클론(semicolon)

• 서로 다른 문은 세미클론으로 구분하지만 생략 가능
• 줄 바꿈이 있으면 암시적 세미클론으로 해석 : 세미클론 자동 삽입 됨
• 세미클론 자동 삽입이 작동하지 않는 상황 도 있음 : 대괄호 앞에서는 줄바꿈을 세미클론으로 해석하지 않음

alert('에러 발생!') //세미클론을 붙이지 않으면 다음 문장 에러발생
[1,3].forEach(alert)

주석(comment)

• //
  • 한 줄짜리 주석
  • 이 주석을 만나면 그 줄은 다 주석처리
  • 단축키 Ctrl + / (Mac : Cmd + /)
• /* */ 
  • 여러 줄 주석
  • /*를 만나면 */ 만나기 전까지 주석처리
  • 중첩 주석은 지원 안함
  • 단축키 Ctrl + Shift + / (Mac : cmd + Option + /)

 

엄격 모드

기존의 기능을 변경하지 않으면서 새로운 기능이 추가되면서 발전해온 자바스크립트

창시자들의 했던 실수, 불완전한 결정이 영원히 박제 됨

ECMAScript5(ES5) 2009년 등장하면서 새로운 기능 추가되고 기존 기능 중 일부 변경 => 하휘 호환성 문제 발생

호환성 문제 해결하기 위해 기본 모드에선 활성화 안됨

use strict 라는 지시자 사용 할 경우만 엄격 모드(strict mode) 활성화 됨

use strict

• 스크립트 최상단에 "use strict"가 있으면 "모던한"방식으로 동작
• 함수 본문 맨 앞에 올 경우 해당 함수만 엄격 모드로 실행 됨
• 엄격 모드가 적용되면 취소 할 수 없음
• 브라우저 콘솔에서 사용 할 경우 'use strict'; 기입 후 줄바꾸고 테스트하려는 코드 입력

'use strict'; <Shift+Enter를 눌러 줄 바꿈 함>
//  ...테스트하려는 코드 입력
<Enter를 눌러 실행>


(function() {
  'use strict';

  // ...테스트하려는 코드...
})()

• 코드를 클래스와 모듈을 사용해 구성하면 'use strict'를 생략 가능

 

자바스크립트 자료형(원시타입 자료형)

자바스크립트는 동적 타입 언어로 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든 바꿀 수 있다.

자료형(DataType)에는 원시타입(Number, String, Boolean, Null, Undefined)과 객체타입(Object-Array, Function, RegexExp)으로 나눠 볼 수 있다.

 

숫자형(Number type)

종류

• 정수(10진수, 8진수, 16진수) 및 부동소수점 숫자(실수) : 25, -456, 052, 0x54, 123.00, -1.23e3​ 등
• 양의 무한대 : Infinity
• 음의 무한대 : -Infinity
• 숫자 연산 실패(Not of Number) : NaN

특징

• 사칙연산 비롯해 다양한 연산 가능

 

문자열(String type)

• 따옴표로 묶인 일련의 문자
• "큰 따옴표는 큰 따옴표로 끝낸다" '작은 따옴표는 작은 따옴표로 끝낸다'
• + 연산자를 사용 할 수 있음(숫자와 달리 "1"+"1"="11")

템플릿 리터럴 문법(ES6~)

• ``(백틱)을 이용하여 사용
• `${변수명} 하면 변수명의 값이 나옴` 으로 사용 가능(기존 : 변수명 + "하면 변수명의 값이 나옴")

JS의 문자열 관련 내장객체들('javascript string' 검색)

• .length : 글 자수를 알려주는 내장객체
• .toUpperCase() : 소문자로 쓴 알파벳을 대문자로 바꿔주는 내장객체
• .indexOf('찾고싶은 문자') : 찾고싶은 문자열이 몇 번째 글자에서 시작하는지 알려주는 내장객체
• .trim() : 첫 글자 시작전에 공백과 마지막 글자 이후에 공백을 자동으로 삭제 해주는 내장객체

 

논리형 : 불리언(Boolean Type)

• 참(true), 거짓(false)을 값으로 가지고 두개를 합쳐서 불리언이라고 부른다.
• 상태를 나타낼 때 사용하고, 비교연산자를 통해서 결과 값으로 참과 거짓을 갖는다.

비교연산자 사용법

• 좌항 === 우항 : 좌항과 우항이 같으면 true, 틀리면 false.
• (=== : 엄격한 동등 연산자로 값과 데이터타입도 같아야 한다. / == : 동등연산자로 데이터타입이 다르더라도 값이 같아야 한다.)
• 좌항 < 우항 : 우항이 좌항보다 크면 true, 크지않으면 false. 
• (웹브라우저에 <,>(꺽쇠)를 직접 쓰고 싶으면  &lt;와 &gt;로 표시해줘야한다)

    <h3>1 === 1</h3>
    <script>
      document.write(1===1);        // 결과 값 true
    </script>                     

    <h3>1&lt;1<h3>                                    
    <script>                    
      document.write(1<1);            // 결과 값 false  
    </script>    
    
    <h3>1 === '1'</h3>
    <script>
      document.write(1==='1');        // 결과 값 false
    </script>                     

    <h3>1 == '1'</h3>                                 
    <script>                    
      document.write(1=='1');            // 결과 값 true  
    </script>

 

널타입(Null Type)

• 아무것도 없다는 뜻 null
• 프로그래머가 직접 아무것도 없다는 뜻을 할당

 

언디파인드(Undefined Type)

• 정의되지 않다는 뜻
• 변수 선언 후 아무 값도 할당되지 않았을 때 자동으로 들어가는 값

 

자바스크립트 형 변환(Type Casting)

• 어떤 값의 타입을 다른 타입을 변경하는 것을 말함
  • Number Type ==형변환==> String Type

1. 묵시적 형 변환(암묵적 형변환) : 개발자가 직접 설정하지 않아도 JS엔진이 형 반환 하는 것을 말함
2. 명시적 형 변환 : 개발자가 직접 함수 등을 이용해 형 변환을 일으킴

// 1. 묵시적 형 변환 : JS 엔진이 알아서 형 변환 하는것
let num = 10;
let str = "20";

const result = num + str; // num이라는 변수형이 숫자형이 문자형으로 묵시적 형 변환이 이뤄남
console.log(result);

// 2. 명시적 형 변환 : 프로그래머가 내장함수 이용해서 직접 형 변환을 명시
// 문자열 -> 숫자
let str1 = "11"; 
let strToNum1 = Number(str1); 
console.log(11+strToNum1); // 22

let str2 = "22개";
let strToNum2 = parseInt(str2); // 문자열에 문자가 섞여있을 경우
console.log(22+strToNum2); // 33

// 숫자 -> 문자열
let num1 = "30";
let numToStr1 = String(num1);
console.log("20"+numToStr1); // 2030

 

원시타입 VS 객체타입

원시타입과 객체타입은 값이 저장되거나 복사되는 과정이 서로 다름

원시타입

• Number, String, Boolean, Null, Undefined
• 값 자체로 변수에 저장되고 복사 된다
• 불변값 : 메모리 공간에 저장된 원본 메모리 값이 수정되지 않음

let p1 = 1;
let p2 = p1; // p1에 저장 된 값을 복사

p2 = 2; // p1에 저장된 값과 상관 없이 p2에 값이 2로 새로 저장

 

 

객체타입

• Object - Array, Function, RegexExp
• 참조값을 통해 변수에 저장되고 복사 된다(얇은 복사)
• 가변값 : 메모리 공간에 저장된 메모리 값이 수정됨

let o1 = {name:"luna"}; // o1에는 참조값(주소값)이 저장됨
let o2 = o1; // o1이 참조값(주소값)이 저장됨

o2.name = "alex";  // 원본 데이터가 수정되어 o1, o2의 name 값이 변경됨

주의사항

1. 의도치 않게 값이 수정될 수 있다
   • 객체의 참조 값을 복사해서 사용 할 경우 원복 객체가 수정될 수 있는 위험이 있고, 의도치 않게 수정될 경우 side effect를 일으킬 수 있음
   • spread 연산자(...)등을 이용해서 새로운 객체에 내부 프로퍼티만 복사해오는 방식으로 복사해서 사용(깊은 복사), 원본 객체가 수정될 일이 없어 비교적 안전함
2. 객체간의 비교는 기본적으로 참조값을 기준으로 이루어진다
   • 서로 다른 객체일 경우 참조값에 들어 있는 값이 같더라도 비교시 false 반환
   • 얇은복사일 경우 같은 참조값을 바라보고 있기 때문에 비교시 true 반환
   • 즉, 객체 비교시 얇은 비교가 이루어짐 : 참조값이 같으면 true, 다른 참조값이면 속성이 같더라도 false
   • 프로퍼티를 기준으로 비교하고 싶으면 깊은비교 : JSON.stringify(객체명) 내장함수 이용
3. 배열과 함수도 사실 객체이다
   • 객체에서 추가된 기능이 함수와 배열
     • 함수 : 호출, 선언... 추가
     • 배열 : 순차 저장, 순회 ... 추가
   • 배열과 함수도 객체에 존재하는 프로퍼티와 메서드를 가지고 있음

// 1. 의도치 않게 값이 수정될 수 있다 - 깊은 복사를 통해 내부 프로퍼티만 복사
// 얇은 복사(Shallow Copy)
let sc1 = { name: "luna" };
let sc2 = sc1;

sc2.name = "alex";
console.log(sc1.name, sc2.name);

// 깊은 복사(Deep Copy)
let dc1 = { name: "luna" };
let dc2 = { ...dc1 };

dc2.name = "alex";
console.log(dc1.name, dc2.name);

// 2. 객체간의 비교는 기본적으로 참조값을 기준으로 이루어진다
let o1 = { name: "gurumi" };
let o2 = o1;
let o3 = { ...o1 };

// 얇은 비교
console.log(o1 === o2);
console.log(o1 === o3);
// 깊은 비교
console.log(JSON.stringify(o1) === JSON.stringify(o3));