개발일지:)

🐥JS 언어특성 공부하기🐥

솧디_code 2022. 9. 23. 11:23

 

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

     

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

         동적타입 언어: 자료의 타입은 있지만 변수에 저장된 값이 언제든지 바뀜  숫자, 문자로  형태가 변형될 수 있다.

let num = 10;
num = 'hello';
console.log(num)

num을 10이란 숫자를 주었지만 num을 다시 'hello'라는 글자형태로 넣었을 때 값은 'hello'로 변경된다.

문자에서 숫자, 숫자에서 문자로의 변경이 간단하게 가능하다. 

 

[변수]

🌿var

var num = 10
var num = 30

console.log(num)

위 의 경우 num의 값이 '10,30'으로 출력이된다. var 변수의 중복선언이 가능하다. 협업시 서로 같은 변수값을 넣을경우에 모두다 출력된다.

그래서 잘 사용하지않음!

 

🌿let

let num = 10
let num = 30

console.log(num)

위 의 경우 마지막 선언문과 함께 잘못되었다고 오류가 뜬다. let 데이터를 밑에 데이터로 변경가능고 중복선언이 불가하다. 

let num = 20;
num = 30;

위 의 경우 30이 출력이 된다. num값이 마지막 입력한 값으로 변경되었다.

 

[상수]

🌿const

const num = 10
const num = 30

console.log(num)

위 의 경우에도 오류메세지와 함께 중복선언이 불가하다.

const num = 10;
const num1 = 10;
console.log(num)

 

위의 경우는 10의 출력값이 나온다. let처럼 중복선언은 불가하지만

변하지않는 상수로써 num, num1은 다른 값을 지닌다. 

 

 

🐳 JavaScript 형변환이란? 

🌿 0은 숫자이지만 '0'으로 [']을 붙여주면 문자로 인식된다. 

 

 

🐳 ==, ===

'0' === 0
false
0 === 0
true

0 == '0'
true
0 == 0
true

 

==은 자료형이 달라도 값이 둘다 0이기 때문에 true이다.

표면적인 모습만 맞아도 인식해도 맞는것

===은 정수형과 문자형까지도 둘 다 일치해야 true이다.

외적도 일치하고 내적으로 속성이 일치해야 함

그래서

typeof 10 === 'number'는 true가 나오는데 

자료형의 숫자의 속성과 일치하기에 true이다.

 

🐳 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

자동형변화의 경우 '10' == 10도 true로 인식되기에 만약 표면적인게 같아도 속성이 달라 오류가 날 수 있다.

이런경우에 ===을 사용해 외,내적 속성이 모두 일치하도록 사용한느것이 좋다고 판단된다.

 

또한 자바스크립트의 타입이 문자인지 숫자인지 불분명할수있기에  타입스크립트로 문자나, 숫자값이 어떤 값인지 정의를 해주어 

오류를 빨리파악하여 디버깅이 쉬워진다. 

 

타입스크립트 예시)

function sum(a: number, b: number) {
  return a+ b;
}
sum("x", "y") //Error

 

 

🐳 undefined와 null의 미세한 차이들을 비교해보세요.

 

둘 다 메모리가 할당되지않음은 똑같지만 차이가있음  

 

🌿 undefined : 변수의 값이 할당되기 전에 비워져있는데 비워진게 아니라 undefined이란 값으로 자동  할당 되어있다.

                       그래서 값이 할당이 되지않았다면 값을 출력했을때 'undefined'로 출력된다.

 

🌿 null: 명시적으로 변수공간이 비어있음을 의미할 때 사용한다. 즉 사용자가 임의로 이공간을 비워두었다를 표시함

 

//undefined
let num;
console.log(num) //undefined

//null
let num = null;
console.log(num)//null

 

 🐤 JavaScript 객체와 불변성이란 ?

🐳 기본형 데이터와 참조형 데이터

    ☑️자료형이란 값이 가질 수 있는 여러가지 유형을 구분한 개념   

원시타입 참조타입
숫자형(number) 배열(array)
문자열형(string) 객체(object)
논리형(boolean) 함수(function)
null  
undefined  
symbol  

 ▶️원시타입(기본자료형)

let number = 1; //숫자형(number)
let str ="abc"; /문자열형(string)
let bool =true; //flase or true 논리형(boolean)
let und = undfined; // undfined
let nul = null //null(object)
let symbol(); // symbol

console.log(typeof(1)); // 자료형을 나타냄, 출력값은 number, 자료의 형태를 나타내줌

 

▶️참조타입 자료형

let arry = [값,값,값]; //배열(objet) 배열에는 값만 존재함
let obj = {키:값};//객체(object)키와 값을 속성이라하기도함
let func = function(){}; //함수(function)

 

▶️array형 자료예시

//국어, 영어, 수학, 과학점수 
let score = [90,80,70,90]

console.log(score[0,1,2])//90,80,70이 출력됨

array는 점수만있고 어떤점수인지 주석이나 설명이없다면 알기가 어려움

 

▶️object형 자료예시

let student1 = {
   koreaScore:90,  //국어점수
   'englishScore':70,//영어점수, 문자열로 쓰는경우 띄어쓰기할수있음 다만 점연산자로는 쓸수없음
   '"mathScore":80,//수학점수
   scienceScore:60//과학점수
 };
 //대괄호 연산자
 console.log(student1["koreaScore"]);
 //.점 연산자
 console.log(student1.englishScore);

array보다 직관적이고 어떤값인지 바로 파악이 가능함

 

🐳 JavaScript 형변환

 

할당되는 값은 대부분 적절한 자료형으로 자동변환되는 것을 형변환이라 합니다. 

let str = "123";
alert(typeof str); // string

let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.

alert(typeof num); // number

예를 들어 숫자를 ""를 통해 문자로 입력했다면 문자입니다. 그래서 typeof는 문자입니다. 

이 숫자를  number()라는 메소드(명령어)를 이용해서 문자처리된거를  정수로 바꿔주는 것입니다. 

 

 

불린는 0아님 1이다.

펄시는 0,null,undefined,NaN,'',불리언false

          (보통 0이라 생각하면됨)

트루는 1이다.

펄시면(0)이면 실행안되고, 1(트루시)이면 실행되는것 

 

 

🐳 불변 객체를 만드는 방법

 원시타입의 값은 변경불가능한 값이다. 

 let으로 num값을 80을 주었다고치자, num의 값이 90으로 바뀌었다고해도 진짜 값이 바뀐게 아니라 마지막에 입력된 값을 보여주는 주소가 바뀐 것 뿐이다. 즉 재할당 된 원시값을 가르키고있는것 뿐이다. 

그러므로 원시타입의 값을 변경이 불가능하다.

 

참조변수는 불변객체를 만드는 것이 가능하다.

//참조변수는 변경가능한 값
var o1 ={name:'lee'};
	name = 'kim';

console.log(o1)//kim으로 출력됨

그러므로 이러한 점을 막기위해 객체를 불변하게 만들어야한다. 

이때 object.freeze 로 객체를 불변하게 만들어주면된다.

//object.freeze로 객체불변하게 만들기
var o1 = {name:'lee'};
object.freeze(o1)
	name = 'kim';

console.log(o1)//lee으로 출력됨

 

 

🐳 얕은 복사와 깊은 복사

 깊은복사 예시 코드

//깊은복사 원시변수
//얕은복사 참조(객체)변수
let num1 = 1;
let num2 = num1;//num에는 1이라는 값이 들어간다.완전 똑같은 값이 대입되는것이아님, 깊은복사
                //num2에 num1자체를 넣는다, 참조변수형

 num2 = 2;

console.log(num1,num2)//num1:1, num2:2 위에서부터 값을 읽어주는 것으로 깊은복사이다.
//num1: 2, num2 : 2 <=얕은복사 참조변수형인 경우에 얕은복사로 됨

위 의 코드의 경우 num1과 num2의 값은 1, 2로 출력된다.

왜냐하면 자바스크립트는 완전 똑같은 자체를 넣는 것이 아닌 값으로만 넣어주기때문이다.

그래서 num1 = num2는 완전히 같은 것이아닌 num1의 값만 넣어지는 것이다.

 

하지만 참조변수의 경우에는 얕은복사로 진행된다.

//깊은복사 원시변수
//얕은복사 참조(객체)변수
const score1 = {
  name:'korea'
  score:5
  };
  
  let scorecopy = socore1;
  scorecopy.score = 3;
   
  console.log(score1,scorecopy);//{name:'korea',score:3}{name:'korea',score:3}얕은복사
  
  //만약 깊은복사로 바꾸고싶다면
  let scorecopy = {...socore1};
  
  console.log(score1,scorecopy);//{name:'korea',score:5}{name:'korea',score:3}

만약 바꾸려는 정보가 너무 많아 깊은복사로 일일이 다 값으로 넣어준다면 로딩시간이 오래걸려 비효율적이다.

자체를 넣는다고 보면 간단하게 두개의 값을 같이 찍어주기만 되니 효율적이다.

 

하지만 깊은복사로 바꾸고싶다면 {...이름}을  이용해 깊은 복사로 변경할 수 있다.  

 

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

  • 스코프, 호이스팅, TDZ
  • 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
  • 여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.
  • 실행 컨텍스트와 콜 스택
  • 스코프 체인, 변수 은닉화
저작자표시 (새창열림)