211009_JS 기초문법(1)

(1) 변수와 상수

변수 - 변경 가능한 값을 저장하기 위한 기억 공간
키워드 : let

상수 - 변경 불가능한 값을 저장하기 위한 기억 공간, 값 재할당하면 에러가 난다 , 선언과 동시에 값을 초기화 해야한다

키워드 : const

선언 후 할당

let hi;
hi = "hello";

한 줄에 여러 변수 선언과 초기화

let name = "john", age = 13 , msg = 'hello';

상수는 보통 대문자로 표기

Const TESTCASE = 5;

호이스팅(Hosting)

• 코드에 선언된 변수 및 함수를 유효한 범위의 코드 상단으로 끌어 올리는 작업
• var 의 변수/함수 선언만 위로 올려지고 , 할당은 올려지지 않음
• let/const 변수 선언과 함수 표현식에는 호이스팅이 발생하지 않음
  그렇기 떄문에 let, conste 사용만을 권장

자료형

목적에 따라 특별한 성질이나 정해진 범주를 가지고 있는 데이터의 종류

typeof

• 자료형을 반환하는 연산자
• 연산자인 typeof x와 함수인 typeof(x)로 문법지원

console.log(typeof str);
console.log(typeof(str));

null

• 값이 비어있다는 의미로 표현되는 자료형
• 존재하지 않는 (nothing) , 비어있는(empty), 알수없는(unknown)
• 변수가 실제 비어있는지를 확인할 때 많이 사용

undefiend

• 값이 할당되어 있지 않은 상태를 나타낼 때 사용되는 자료형
• 변수 선언 후 초기화 하지 않는다면, undefined가 자동으로 할당

number

• 숫자형 정수, 부동소수점 숫자를 표현하는 자료형
• number와 관련된 연산은 사칙연산(+,-,*,/)가 대표적
• number에 일반적인 숫자 외에 infinity, -infinity, NaN(Not a Number)같은 특수 숫자 갑싱 표함
• 더 큰 정수를 다루고 싶다면 bigint 자료형 사용하기

ex) NaN의 대표적인 예

let num1 = 123.0;

console.log(num1/"hello"); //NAN

• 사칙연산에 대한 소수처리 하는 방법 toFixed

ex) 사용 방법
소수점 3자리만 출력

let num1 = 123.0;
let num2 = 123.456;
console.log(num1- num2).toFixed(3)); 

string

• 자바 스크립트에서 문자열은 3가지 종류의 따옴표로 표현 가능

• 큰 따옴표 : "hello"

• 작은 따옴표 : 'hello'

• 역 따옴표 (백틱, backtick):Hello 문자열 안에 변수를 넣을 수 있는 방법

let num = 3;
 let str_3 = `hello_${num}`;
console.log(str_1); // output:hello_3

객체타입 (object)

• 원시 자료형을 포함하거나 복잡한 개체를 표현할수있는 자료형

• () 혹은 ({}) 를 통해 생성

• Key : value 접근은 object.key 형태 표현
  배열 형태로 가능 user[name]

• 실제 변수에는 object가 있는 메모리 주소가 있는 것

• 

let user {
	name : "john",
    age : 27,
};

console.log(user); //{name: "john",age:27}

//삭제 

delete user.age;

// 추가 

user.weight : 50 ; 

객체 복사의 문제점

• object 값을 복사할 때는 대상 전체가 아닌 object 내 주소 값만 복사되는 문제 발생 (같은 주소 공간을 가르키게되고

• 가리키는 대상 전체를 복사하는 방법은 얕은복사, 깊은 복사를 통해 가능

• 객체를 다룰 때는 주소값을 가지고 있다는 것을 인지하자

• 객체 내 또 다른 객체가 있다면 복사되지 않음

얕은 복사 -1 : for 문 사용

let admin = {};

for(let key of user){
	admin[key]: user[key];
}

*얕은 복사 -2 : assign**

• 빈 객체에 user 객체를 머지해서 admin에 넣어줘라

let admin = Obeject.assign({},user);

얕은 복사 -3: 스프레드 연산자

• user내의 모든 필드값을 admin에 넣어라
  새로운 공간을 만들어서 user 값을 넣어주고 이 주소를 admin이 가지는 것이다

let admin = {...user};

깊은 복사 : json 객체를 이용한 깊은 복사, stringfy 는 객체를 문자열로 변환히는데 이때 원본 객체와의 참조가 끊김

let admin_json = JSON.parse(JSON.stringfy(user));

형변환

• 자바스크립트는 느슨한 타입언어 동적 타입 언어로 변수의 자료형을 명시적으로 선언할 필요가 없는 언어

• 연산자로인한 계산이나 변수에 전달되는 값은 자동으로 암묵적 형 변환 수행

• 강제적 형 변환을 위해서는 자료형 함수를 이용해 명시적 형 변환을 수행

console.log(string(123));// 123
console.log(string(NaA));// NaN

형변환 (Number)

• Number는 정수와 실수를 모두 포함하는 자료 형 변환이므로 , 정수 혹은 실수의 명시적 변환은 parse 함수 사용

• 정수변환 : parseInt(피연산자) , 실수변환:parseFloat(피연산자)

console.log(Number("")); // 0 
console.log(Number("hello"))//NaN
console.log(Number(undefined)); // NaN
console.log(Number(NaN))//  0

console.log(ParseINT(123.123)); // 123

형 변환(Boolean)

console.log(Boolean(NaN)); //false
console.log(Boolean(Null));//fale
console.log(Boolean(undefined));//false

산술대입 연산자

• 프로그램에서 데이터를 처리하여 결과를 산출할 목적으로 사용되는 문자

몫만 구하고 싶을 때 사용하는 연산자

console.log(parseInt(31/10)); //output : 3

나머지 연산자

console.log( 31%10); //output : 1 

거듭제곱 연산자

• 다른 언어에는 없지만 자바스크립트에만 존재하는 연산자

console.log(2 **3); // output: 8

문자열 연결도 산술 연산자로 가능

let str1= "hello";
let str2= "world";

let str3 = str1+ str2 ; 

console.log(str3); //output: helloworld 

복합 대입 연산자

• 산술 연산자로 피연산자를 계산해 결과값을 한번에 대입시켜주는 연산자

let num = 10;
let result_3,result_4, result_5;
result_3= reulst_4 = result_5= 31;

비교 연산자

• 좌향과 우향의 피연산자를 비교한 다음 결과값을 논리적 자료형으로 반환하는 연산자

• == 은 단순 값의 같음을 비교하는 동등 비교 (값에대한 케스팅 (형변환)이 이루어져서 된다

• === 는 자료형까지 같음을 판단하는 일치 비교 연산자 (캐스팅 안되고 비교됨)

console.log( false !=123  ) ;//output: true 123은 형변환되면 true
console.log( 5==='5'); //output: false
console.log( 5!=='5'); // output:true

Scope

• 변수 혹은 상수에 접근할 수 있는 범위

• 모듈/ 함수 내 코드에서 동일한 변수 사용시 간섭을 줄이는 용도로 사용

• scope는 Global scope와 Local Scope의 타입으로 구분

  Global scope : 전역에 선언되어 어디에서도 접근 가능
  Local Scope : 특정 지역에 선언되어 , 해당 지역 내에서만 접근 가능