[JavaScript] 변수, 자료형, 연산자 + 기본 함수

so8san·2022년 9월 28일

JAVASCRIPT

목록 보기
1/8

변수와 상수 

let variable = 1; 
console.log(variable) // 1

variable = 2;
console.log(variable) // 2 

let variable = 2;
console.log(variable) // error

// let으로 생성된 변수 variable은 언제든지 변경할 수 있습니다. 
// 단, 같은 변수를 두번 선언할 수는 없습니다.
// **함수형 프로그래밍 언어에서는 값을 변경할 수 없습니다.
// 변수 명명 규칙에는 문자,숫자,$_만 들어갈 수 있으며, 첫 글자는 숫자가 될 수 없습니다.

const constant = 1;
console.log(constant) // 1

constant = 2;
console.log(constant) // error

// const로 생성된 상수 constant는 값을 변경할 수 없습니다. 
// 상수명을 대문자로 하는 경우가 있는데 이유는 기억하기 힘든 값을 변수에 할당해 별칭처럼 사용하는 관습에 있습니다.

자료형 + 형 변환 

// 숫자타입 
const numberType = 1 ; //number
const numberType = "type" + 1 ; // NaN *문자나 다른 타입이 함께할 경우 숫자가 아님을 나타냅니다.
const numberType = 1 / 0 // Infinity *무한한 값, 무한대를 나타냅니다. 어느 숫자나 0을 나누면 얻을 수 있으며 자체로도 참조 가능합니다.


// BigInt타입 **자주 쓰이지는 않습니다 표준으로 채택된 지 얼마 안 된 자료형이며, 길이에 무관하게 정수를 나타낼 수 있습니다.
const bigInt = 1234567890123456789012345678901234567890n; // 끝에 'n'이 붙으면 BigInt형 자료입니다.


// 문자열 **백틱 안에 ${...}안에 넣어주면 변수,연산 등이 가능하며, 문자열로 반환됩니다.
const stringType = "string" ; // string
const stringType = 'string' ; // string
const stringType = `string ${1+1+1}`; // string


// 불린형
const booleanType = true ; // boolean
const booleanType = false ; // boolean
const num = 1;
const booleanType = result > 5 ; // result : false === boolean 


// `null`값
const nullType = null; // null
console.log(nullType111) // null  ** JS에서 활용되는 null은 `존재하지 않는 값`, `비어 있는 값`, `알 수 없는 값` 일때 쓰입니다.


// `undefined`값
const _undefined ;
console.log(_undefined) // undefined ** 값이 할당되지 않은 상태를 나타냅니다.


// 객체(object) , 심볼(symbol) **따로 정리

// + typeof 연산자
const type = 1 ;
console.log(typeof type) // number **이처럼 변수의 타입을 빠르게 알아내고자 할때 쓰이는 연산자 입니다.  


// + 형변환
let type = true ; // boolean 
typeChange = String(type); // string
typeChange = Number(type); // number 

// 숫자형은 받은 값에 따라 변환했을 시 값이 다릅니다.
/* 
	undefined : NaN
	null : 0
	boolean : 1(true) or 0(false)
	string : 처음과 끝 공백을 제거하고 남아있는 문자열이 없다면 0, 있다면 문자열에서 숫자를 읽습니다, 실패하면 이 됩니다. 
*/

// boolean형 변환은 boolean(value)로 이루어 집니다. 
/*
	숫자0, 빈 문자열, null, undefined, NaN과 같이 비어져있다 느껴지는 것들은 전부 false가 됩니다 외에는 true가 됩니다.
	** 문자열 0 는 일부 언어에서 false로 취급됩니다, 하지만 JS에서는 true입니다. "비어있지 않기 때문에"
*/

연산자

// 기본 연산자
const add = 1 + 1 // 2 더하기
const subtract = 1 - 1 // 0 빼기 
const multiply = 2 * 2 // 4 곱하기
const divide = 8 / 2 // 4 나누기
const modulus = 8 % 3 // 2 나머지
const power = 4 ** 2 // 16 거듭제곱

// 비교 연산자 ** 다른 연산과 마찬가지로 값을 반환하지만 boolean형으로 반환됩니다. false냐 true냐를 얻기위해 비교연산을 합니다.
console.log(1 == 1) // true
console.log(1 == 2) // false
console.log(1 != 2) // true
console.log(1 > 2) // false
console.log(1 < 2) // true
console.log(1 <= 2) // true
console.log(1 >= 2) // false

console.log('g'<'b') // flase ** 문자열은 알파벳순서 혹은 숫자순서 순서가 높은 순서일 수록 크다라고 여겨집니다.
console.log('b'<'g') // true ** 정확히는 사전순이 아니라 유니코드 순입니다. 대문자 < 소문자 기억.

console.log('1' > 2) // false ** 비교하고자 하는 형이 다른경우 숫자열로 변환 후 비교를 진행합니다. 
// *형변환 참조 true는 1, flase는 0, string은 공백을 제거하고 문자열이 없으면 0, 숫자가 남는다면 숫자를 읽고 둘 다 아니면 NaN
// NaN과 숫자를 비교하게되면 false를 반환합니다.

//논리 연산자
console.log(true || false) // true ||는 첫번째 true값을 찾으면 바로 true를 반환합니다.
console.log(false || true) // true
console.log(false || false) // false ** true가 없으면 그대로 false를 반환합니다.

console.log(true && false) // false &&은 전부가 true에 부합해야만 true를 반환합니다.
console.log(true && true) // true

let value = true; 
console.log(!value) // false ! 논리 연산자는 반환된 true와 false를 역으로 반환합니다. 
console.log(value) // true

console.log(!!'1') // true  !를 두번 쓰면 boolean형으로 형변환을 해줍니다.

기본 함수

// 기본함수 ** 기본함수는 function + 함수이름 + (매개변수) { 구조 } 으로 구성된다.
function name(parameter,parameter2){
	return parameter + paremeter2; 
	// 함수를 호출할 때 인수값(Argument)으로 값을 넣어주면 그 값을 인자값(parameter) 으로 받아와서 활용한다.
}

name(1,2); // 3 **(1,2)는 인수값(Argument)을 넣어 호출한 모습이다.

🧠 생각

함수 부분에 매개변수가 함수를 호출할 때 인수로 전달 된 값을 내부에서 활용할 수 있다는 건 알겠지만,
호출시에 인수값을 넣어주지 않았는데 event매개변수를 작성하여 활용하는 걸 본 적이 있는데 어떤 방식으로 동작하는건지 원리를 이해해볼 필요가 있을 것 같다.

profile
늘 쌓아가는 중입니다.

0개의 댓글