변수 선언과 대입연산자, 자료형

이번 글에서는 변수 선언과 대입연산자, 그리고 자료형에 대해 간단하게 알아보고자 한다.

---

012345

---

변수선언

변수선언자

var	존재만 알고 사용하지 않는다.(hoisting 참고)
let	한번 선언한 변수에 대해 변경이 가능하다
const	한번 선언한 변수에 대해 변경이 불가능하다

---

대입연산자

=	좌측에는 대입할 변수를, 우측에는 대입할 값을 작성하여 변수에 값을 입력한다.
+=, variable++	좌측에 선언된 변수를 입력하고 우측에 값을 작성하여 더한다.
-=, varialble--	좌측에 선언된 변수를 입력하고 우측에 값을 작성하여 뺀다.

---

비교연산자

===	===의 양쪽에 위치한 것이 값과 자료형이 같다면 true, 하나라도 다르다면 false를 반환한다.
!==	!==의 양쪽에 위치한 것이 값과 자료형 하나라도 다르면 true, 완전히 같다면 false를 반환한다.
> , <	수학에서의 비교 기호와 똑같다. 초과 미만을 구분한다. 반환값은 true, false
>= , <=	=기호가 붙어 양쪽이 같은 경우까지 포함한다. 반환값은 true, false
==	===와 같은 기능을 하나 사용하지 않는 것을 권장한다. 이는 자동 형 변환을 한다.
!=	!==와 같은 기능을 하나 사용하지 않는 것을 권장한다. 이는 자동 형 변환을 한다.

===와 !==의 예

==의 자동 형변환

---

자료형

Boolean	원시자료형, true혹은 false로만 표현한다.
String	원시자료형, 문자형, ' ' , " "로 감싸 표현한다.
Number	원시자료형, 숫자, 그냥 숫자만 써서 표현한다. 숫자를 따옴표로 감쌀 시 String값이 된다.
undefined	원시자료형, 값이 할당되지 않은 변수의 값이다.
null	원시자료형, 어떤 값이 비어있다고 사용자가 의도적으로 표현할 때 사용한다.
Object(객체)	{ 키 : 밸류} 형태로 값을 저장하며, 밸류에는 모든 자료형의 값을 담을 수 있다.

typeof(null)은 object로 출력되는데, 이는 에외처리되지 않은 버그였지만, 수정 시 모든 웹 사이트에 영향을 끼칠 수 있어 수정하지 않고 있다.

 

객체의 키에 접근하는 방식은 두가지가 있다.

첫번쨰로 객체명.키 혹은 객체명[키]가 있는데 키 값에 띄어쓰기나 특수문자가 있는 경우 객체명[키]만 접근이 가능하다.

 

객체 구조 분해

const obj = {name : 'Jeon', age : 25, tech : 'react'}
const {name, age, tech} = obj
console.log(name)	//'Jeon'
console.log(age)	//25
console.log(tech)	//'react'
console.log(hair)	//undefined:obj에는 'hair'프로퍼티가 존재하지 않습니다.

위와 같이 객체 구조를 분해해 속성값을 따로 출력할 수 있다.

 

배열 : [value1, value2, value3]의 형태로 표현하고, value에는 모든 자료형을 입력할 수 있다.

배열의 index : value값에 접근 가능하게 하는 식별자이다. 최소값은 0으로 시작한다.

 

배열 구조 분해

 

const arr = ['Nodejs', 'React', 'Spring']
const [backend, frontend] = arr
console.log(backend)	//'Nodejs'
console.log(frontend)	//'React'
//배열을 분해할 때 변수 이름을 마음대로 선언할 수 있고,
//배열의 순서대로 할당된다. 배열구조분해로 선언된 변수를 제외한 나머지(위의 Spring)은 할당되지 않는다.

 

 

NaN : Not a Number의 줄임말이며, 숫자가 아닌 값을 숫자로 변환하는 경우 NaN으로 반환된다.

NaN은 다른 모든 값, 다른 모든 NaN과 비교해도 같지 않은 것으로 보인다.

NaN의 판별은 isNaN()이나 Number.isNaN()으로 판별이 가능하다.

isNaN()은 현재값이 NaN이거나 숫자로 변환 했을경우 NaN일때 true를 반환한다.

Number.isNaN()은 현재값이 NaN일때만 true를 반환한다.

 

함수 : 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용한다.

함수 사용예시

//익명함수
function getMyname() {
	return '함수 반환 값'
}
console.log(getMyname())	// '함수 반환 값' 출력

//선언함수
const variable = function () {
	return '함수 반환 값'
}
console.log(variable())	//'함수 반환 값' 출력

function getmyname(myname) {
	return myname
}
console.log(getmyname('인자 넣기'))	//'인자 넣기' 출력

 

불리언 연산 : truthy값은 true로, falsy값은 false로 연산된다.

falsy값 : 빈문자열 '', 숫자 0, 불리언 false, NaN, null, undefined

truthy값 : falsy가 아닌 모든 것. 배열과 객체는 항상 truthy이다.

 

조건문 : if문 안의 조건이 충족할 때 특정 구문을 실행하기 위해 사용한다.

 

논리연산자 &&, ||, !

 

&& : 연산자 양쪽 값 모두가 true일때 true를 반환한다. 조건을 여러개 사용하는 chaining을 하기도 하며

        일반적으로 조건문에 쓰인다.

true && true	//true
'StringValue' && 0	//0이 false이므로 false

true&&'Stringvalue'&&[]&&{}&&undefinde	//undefined
false&&'String'&&[]&&{}&&undefined	//false

//즉 &&chaining 연산문의 앞의 값이 모두 true일 경우 맨 뒤의 값이 출력된다.

const c1 = false
const c2 = null
const c3 = 'Jeon'
const name = con1 || con2 || con3
console.log(name)	// 'Jeon'

//즉 ||연산자를 사용할 때 가장 먼저오는  truthy한 값이 name에 저장된다.

 

|| : 양쪽 값 중 하나라도 true면 true를 출력한다. 마찬가지로 chaining이 가능하고 if조건문에 자주 쓰인다.

 

! : true, false값을 반대로 바꾼다.

!''	//true
!0	//true
!false	//true
!NaN	//true
!null	//true
!undefined	//true

 

반복문 : 특정 구문을 반복할 때 사용한다.

for (초기화구문; 조건문; 증감문) { 
	명령문
}

위와 같이 작성된다.

순서는 초기화 -> 조건문 비교 -> 조건 true시 명령문 -> 증감문 -> 조건문 비교 -> ... -> 조건이 false일떄 중단 반복문 끝,

 

break : 조거에 상관없이 반복문을 중단한다.

for (let i =0; i < 5; i++) {
	if (i===2) break;
    console.log(i)
}
// 0
// 1

 

continue : 조건에 상관없이 해당 명령을 중단하고 다음 단계인 증감문을 실행한다.

for (let i = 0; i < 5; i++) {
	if(i===2) continue
	console.log(i)
}
//0
//1
//3
//4

 

for of 문 : Array와 Map과 같은 반복 가능한 객체의 요소를 하나씩 반복해 준다.(object는 반복 가능 객체가 아니다.)

for (변수선언문 of 반복가능객체) {
	명령문
}

 

for in 문 : for of와 유사하지만 선언한 변수에 값이 아닌 key가 들어간다.

                객체를 사용하려면 key값을 for in문으로 뽑고 객체[키]로 밸류값을 추출 가능하다.

---

연습문제

1) 변수 선언시 값을 할당하지 않으면 어떻게 되나요?

=> undefined가 값에 할당된다.

 

2) 선언되지 않은 변수를 참조하면 어떻게 되나요?

=> defined되지 않았다는 에러가 발생한다.

 

3) 배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는?

=> filter()함수이다.

배열.filter(배열 => 배열.length < 6)	//길이가 6미만인 속성만 추출해 배열한다.