JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

1) Javascrtipt의 자료형

자바스크립트에서 값은 문자열이나 숫자형에 속한다. 8가지의 자료형이 있는데 함께 알아보도록 하자.

1. 숫자형

숫자형은 정수 및 실수를 나타낸다.
뿐만 아니라 infinity, -infinity, NaN도 포함된다.
let a = 2
a = 1.5
a = -1/3

2. BigInt

자바스크립트에서는 2^53-1 보다 크거나 -(2^53-1)보다 작은 정수를 숫자형으로 나타낼 수 없다.
생긴지 얼마 안되었고 쓸 일이 거의 없지만 필요하면 찾아서 쓰도록하자.
다음과 같이 표현할 수 있다.
const bigInt = 1234567890123456789012345678901234567890n;

3. 문자형

자바스크립트에서는 문자열을 따옴표로 묶는다.
다음과 같이 문자열에 따옴표를 사용해야한다면 사용하지 않는 따옴표로 묶거나 역슬래쉬()를 활용하여 표현할 수 있다.
let str = "Hi"
let str2 = 'Hi'
let str3 = "I don't know who you are"
let str4 = 'I don\'t know who you are'

4. Boolean형

Boolean형은 true와 false 두 값만 존재한다. 어떤 조건이 참에 해당할 경우 true, 거짓에 해당하는 경우 false를 반환한다.

let A = 3>1
lf(A==true){
A = 5}
console.log(A) //5

5. 'null' 값

null 값은 어떤 자료형에도 속하지 않는 값이다. 자바스크립트에서 null은 존재하지 않는 값, 비어있는 값, 알수 없는 값을 나타낼 때 사용한다.

function solution(arr) {
let name1 = null + 1
let name2 = 'null' + 1

console.log(name1)          //1
console.log(name2)          //null1

}

6. 'undefined'값

undefined 역시 어떤 자료형에도 속하지 않는 값이다. 값이 할당되지 않은 상태를 나타낼 때 사용한다. 변수는 선언했더라도 값을 할당하지 않았다면 undefined가 자동 할당된다.

let name;

console.log(name) //undefined

7. 객체와 심볼

객체의 고유 식별자를 만들 때 사용한다.

8. typeof 연산자

typeof 연산자는 인수의 자료형을 반환한다. 변수의 자료형을 파악하기 위해 사용된다.

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object" (1)

typeof null // "object" (2)

typeof alert // "function" (3)

참고자료 : https://ko.javascript.info/types

2) 느슨한 타입(loosely typed)의 동적(dynamic) 언어

느슨한 타입이란 타입 없이 변수를 선언하는 것이다. 이와 상반되는 단어로 강력한 타입이 있는데 이는 변수를 선언 할 때 타입과 함께 선언해야한다. 동적언어는 정적언어와 상반되는 말로 컴파일 시에 타입을 결정하는 정적언어와 달리 런타임시에 자료형이 결정된다.
/ JavaScript Example (loose typing) /
var a = 13; // Number 선언
var b = "thirteen"; // String 선언

/ Java Example (strong typing) /
int a = 13; // int 선언
String b = "thirteen"; // String 선언
참고자료 : https://bestalign.github.io/dev/understanding-loose-typing-in-javascript/

자바스크립트의 느슨한 타입(Loose Typing) 이해하기

원문: http://blog.jeremymartin.name/2008/03/understanding-loose-typing-in.html JavaScript: The Right Way에는 부분적으로 번역되어있기 때문에 전문을 번역해보았다. 대략…

bestalign.github.io

3) Javascript 형변환

형변환은 말그대로 타입이 변환되는 성질을 말한다. 아래 예시처럼 자동으로 데이터타입을 변화시키는 것을 암시적 변환이라고한다.
9 + 9 + 9; //27
9 + 9 + '9'; //189
'9' + 9 + 9; //999
명시적 변환은 의도적으로 타입을 변화시키는 것을 일컫는 말이다.
let a = 9
let b = '9'

console.log(typeof(a)) //number
console.log(typeof(b)) //string

a = String(a)
b = parseInt(b)

console.log(typeof(a)) //string
console.log(typeof(b)) //number

4) '=='와 '==='의 차이

'=='은 두 변수의 값을 비교할 때에 쓰이는 반면 '==='은 두 변수의 값 뿐만 아니라 타입까지 비교할 때 쓰인다.

let a = 9
let b = '9'

console.log(a==b) //true
console.log(a===b) //false

5) 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 해결방안

느슨한 타입의 동적언어, 즉 자바스크립트의 문제점은 무엇일까?

코드가 복잡해질 수록 타입 에러를 찾기가 어렵다. 타입스크립트을 이용하여 일어날 수 있는 오류를 미연에 방지한다.

6) 자바스크립트 객체와 불변성

Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미한다.
Immutability은 함수형 프로그래밍의 핵심 원리이다.

불변 객체를 사용하면 복제나 비교를 위한 조작을 단순화 할 수 있고 성능 개선에도 도움이 된다.
하지만 객체가 변경 가능한 데이터를 많이 가지고 있는 경우 오히려 부적절한 경우가 있다.

ES6에서는 불변 데이터 패턴(immutable data pattern)을 쉽게 구현할 수 있는 새로운 기능이 추가되었다.

참고자료 : https://velog.io/@yunju/JavaScript-%EA%B0%9D%EC%B2%B4%EC%99%80-%EB%B6%88%EB%B3%80%EC%84%B1

얕은 복사와 깊은 복사에 대한 개념은 쉽게 설명하자면 이러하다. 깊은 복사의 경우 서로 독립된 객체이기 때문에 복사한 값을 변경하더라도 이전에 복사본은 변하지 않는다.

let arr1 = ['1','2','3']
let arr2 = arr1

arr1 = ['4','5','6']

console.log(arr1) //['4','5','6']
console.log(arr2) //['1','2','3']
하지만 얕은 복사의 경우 값을 변경하였을 때 함께 값이 변한다.

const arr1 = ['1','2','3']
const arr2 = arr1

arr1[0] = '4'

console.log(arr1) //['4','2','3']
console.log(arr2) //['4','2','3']

7) 호이스팅과 TDZ는 무엇일까?

https://www.youtube.com/watch?v=fETYLCU2YYc

호이스팅이 무엇일까?

호이스팅이란 코드가 실행되기전에 선언해둔 변수가 무엇인지 먼저 미리 조사를 하고 할당된 값을 초기화하는 과정이다.

console.log(a) //Reference error
let a = 1
console.log(a) //1
console.log(b) //undefined
var b = 3
console.log(b) //3
위의 코드처럼 var을 이용하여 변수를 선언하면 4번째 줄처럼 undefined이 출력되는 이상한 현상을 확인할 수 있다. 이 외에도 많은 var의 문제점을 개선하고자 ES6에서 let이 탄생했다고 한다. 다른 문제점을 알고 싶다면 위의 영상을 보길 추천한다. 그렇다면 let을 쓴다면 호이스팅이 되지않을까? 그렇지 않다. 호이스팅은 여전히 되지만 TDZ를 통해 선언문이 나오기 전까지 변수에 접근 할 수 없도록 하였다. 1~3 번째 줄에서 그 결과를 확인 할 수 있다.

스코프란 각 변수들이 허용된 영역을 말한다. for문, if문, while문에서 선언된 변수들은 그 안에서만 사용되며 밖으로 나올 수 없다. 즉 지역변수들은 변수가 선언된 스코프 내에서만 허용되며 전역변수들은 전 영역에서 허용된다.

실습과제
콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

let b = 1; //전역 변수b 선언

function hi () { //함수 선언문

const a = 1; //지역 변수a 선언

let b = 100; //지역 변수b 선언

b++;

console.log(a,b);

}

//console.log(a); //주석을 푼다면 레퍼런스 에러가 날 것이다.

console.log(b); //1

hi(); //1,101

console.log(b); //101
오류가 나지 않기 위에서 전역변수 a를 에러가 나는 console.log(a) 위에서 선언해준다.