1214 / 자바스크립트 데이터 타입과 함수

-자바스크립트 데이터타입
-기본형 : 넘버 스트링 불리언 널 언디파인드 / es2015심볼  es2020 빅인트
-참조형 :  오브젝트
es2015심볼   - 유일한 값을 만들 때
es2020 빅인트 - 엄청 큰 숫자를 다룰 때

코드 내에서 유일한 값을 가진 변수 이름을 만들 때 사용

심볼값을 담게 된 user라는 이름의 변수 어떤 값과 비교해도 true가 될 수 없는 고유한 변수가 된다. 

 

빅인트는 자바스크립트에서 아주 큰 정수를 표현하기 위해 등장한 데이터 타입

자바스크립트의 숫자형 값에는 9000조 정도의 정수 표현의 한계가 존재한다

Bigint 타입의 값은 일반 정수 마지막에 알파벳 n을 붙이거나 Bigint라는 함수를 사용

 

정수를 표현하기 위한 데이터 타입이기 때문에 소수에는 사용 x

소수형태의 결과가 리턴되는 연산은 소수점 아랫부분은 버려지고 정수형태로 리턴

Bigint 타입끼리만 연산, 서로 다른 타입은 명시적으로 타입을 변환해야한다

 

saa

 

flasy값
- flase null underfined nan 0 ''

truthy값
나머지값들 / [] / {}

빈 배열과 빈 객체는 트루값

자바스크립트에서 && 연산자는 왼쪽 값이 truthy면 오른쪽값을 리턴 / 왼쪽값이 falsy면 그대로 왼쪽값을 리턴

|| 연산자는 왼쪽 값이   truthy면 왼쪽값을 리턴 / 왼쪽값이  falsy면 오른쪽 값을 리턴

 

|| 연산자에서 value 값을 넣지 않으면 underfined 가 되니까 따라서 print() 리턴값은 오른쪽 'code'출력

-> underfined = falsy 값이기 때문  

print('java') 리턴값은 string 은 truthy니까 value에 'java'를 할당해주면 value = 'java'가 되서 왼쪽값 'java'출력

 

and 와 or 연산자를 연속으로 사용하는 경우에는 and 연산자가 우선순위가 높다

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Operator_precedence

연산자 우선순위 - JavaScript | MDN

---

null  병합 연산자는 물음표 두개 ??를 이용해서 null 혹은 underfined 값을 가려내는 연산자이다

연산자 왼편의 값이 null이나 underfined면 연산자 오른쪽 값이 리턴 /

연산자 왼편의 값이 null이나 underfined가 아니라면 왼쪽 값 리턴

|| 연산자와의 동작하는 방식은 비슷하지만차이는

null병합 연산자는 왼쪽값이 null이나 underfined인지 확인하고

|| 연산자는 왼쪽값이 falsy값인지 확인하는것

 

---

변수와 스코프

var / let / const

var =  거의 안씀

-> 변수를 만들기도 전에 사용 가능했

let = 값의 재할당이 필요할때

const = 재할당이 필요하지 않을때

변수를 만들기도 전에 출력하면 에러 발생이 아니라 underfined가 출력

중복선언이 가능해서 많은 코드들을 var로 사용하면 위에서 사용하던 변수들은 사라진다

var키워드는 변수의 스코프가 함수단위로 구분 (전역변수와 지역변수)

함수를 기준으로 스코프를 구분하기 때문에 함수 안에서 선언한변수는 함수 안에서만 유효하다 

함수를 제외한 조건문이나 반복문 에서 새로운 변수를 만들어도 모두 전역변수로 평가된다 / 고유하게 사용할 수 있는 지역변수가 없다

let 과 const 는 변수 이름 중복 선언 불가(SyntaxError 발생)

변수 선언 전에 사용 불가(ReferenceError 발생)

값을 재할당 할 수 없다. 

중괄호가 사용된 부분을 기준으로 변수의 유효범위를 구분;(코드블럭)

코드 블럭으로만 구분 되어도 스코프를 구분

 

---

함수 표현식

함수 선언을 값처럼 사용하는 방식

선언을 하기 전 함수에 접근할 수 없다.

할당 된 변수에 따라 스코프가 정해진다.

함수 표현식은 선언 이후에 호출해 가독성 면에서 코드의 흐름을 쉽게 파악할수 있고 

변수의 스코프도 활용할수 있다는 장점이 있다

const test = function(){
  console.log('testA')
};
test();

또는
const test = document.querySelector('#test')
test.addEventListener('click', function(){
console.log('test text');
}); // 함수 선언식

 

함수 선언식

함수 선언방식은 선언을 하기 전 함수 호출 가능

함수 선언은 var처럼 함수 스코프를 가진다

함수 선언식은 변수 선언과 함수 선언 부분을 명확하게 구분가능

함수를 호출할때도 자유로운 위치에서 함수 호출 가능하다는 장점

 

function test(){
 console.log('text')
 }
 test();
 // 함수 선언식

---

재귀함수 / 콜백함수 / 고차함수

자바스크립트에서 함수는 객체타입

---

파라미터

함수를 호출할 때 함수 바깥에서 안쪽으로 다양한 값들을 전달받고자 할때

파라미터를 호출할때 argument 를 주지 않는다면 underfined값이 나온다;

파라미터에 할당연산자를 통해서 기본값을 주면 argument 를 전달하지 않아도 기본값을 가지고 활용

기본값이 필요한 파라미터는 가급적 오른쪽으로 작성

 

argument 가 파라미터로 전달될 때는 파라미터는 함수를 호출할때 작성한 순서 그대로 전달

두번째 argument 가 생략이 되서 underfined로 전달

---

argument

 

함수를 호출할 때 파라미터로 전달하는 값; / 대부분 파라미터의 수만큼 argument 를 작성

 

argument 갯수에 따라 유연하게 동작하는 함수

 

arguments라는 객체가 있다; 배열과 비슷한 모습을 하지만 배열의 메소드는 사용할 수 없는 유사배열이다.
유사배열 유사배

그렇지만 length/ 인덱싱/ for of문 사용 가능

---

Rest Parameter

배열이기 때문에 배열의 메소드를 자유롭게 사용 가능

함수에 전달된 인수들의 목록을 배열로 전달 받는

...3개를 사용해서 파라미터값에 작성

Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터이어야 한다

 

---

ArrowFunction

기존의함수 선언 방식을 간결하게 만들어줌 / function 대신에 => 로 사용한다

const test = function(study){
	return study*2
}

// 화살표 함수 사용하면
const test = studdy => {
	return study*2
}
//파라미터가 하나인 ArrowFunction은 파라미터의 소괄호를 생략할 수 있다.

// 또는 더 간결하게
const test = study => study*2
//내부의 동작 부분이 return 하나로 이루어져 있으면 중괄호와 함께 리턴 키워드도 생략 가능하다

const test = (a,b) =>{
	return a+b
}

const test = () => {
return {name : front}
}
//파라미터가 두개 이상이거나 없는 경우에는 소괄호를 넣어줘야한다..

// 콜백 함수로 활용
myBtn.addEventListener('click', () => {
  console.log('click');
});

---

this

객체의 메소드를 만들 때 주로 사용

윈도우 객체가 this의 기본값 

객체의 메소드를 정의하기 위한 함수 안에선 메소드를 호출한 객체를 가리킨다.

 

 

외부에서 여러 객체의 공통적인 메소드를 만들 때 뿐만 아니라 객체 내부에서 메소드를 만들 때도 메소드가 속해있는 객체의 프로퍼티가 필요한 상황에서도 활용

화살표 함수에서 this 값은 일반 함수처럼 호출한 대상에 따라 상대적으로 변하지 않고 화살표 함수가 선언되기 직전에 유효한 ths 값과 똑같은 값을 가지고서 동작, 

https://poiemaweb.com/js-this

this | PoiemaWeb

-다시 읽어봐야함-

 

 

 

다음에 찾아볼거 

-> apply / call / bind/ 유사배열 / 렉시컬 스코프 / new 연산