[ 자바스크립트 기본 ] 자료형, 배열, 함수

김수연·2022년 9월 17일
0
post-thumbnail

📌 값

자바스크립트는 느슨한 언어, 동적 언어이다. 변수 타입을 미리 선언한 필요가없댜.

var foo = 32; // number
var foo = 'bar'; // string
var foo = true;  // boolean

원시값 (primitive value)

객체가 아니면서 메서드도 가지지 않는 데이터 :
string, number, bigint, boolean, undefined, symbol, 그리고 null

console.log(typeof undefined);
console.log(typeof true);
console.log(typeof 'string');
console.log(typeof 123);
console.log(typeof 9007199254740992n);
console.log(typeof null);

참조값 (reference value)

a value that indirectly accesses data to retrieve a variable or a record in a computer's memory or other storage device.
간접적으로 변수나 저장된 값을 얻기위해 메모리 혹은 다른 장치의 데이터에 접근하는 값

const object = {};
const array = [];
function func() {};

undefined & null

둘은 falsy value로 비슷하게 작동 하지만 전혀 다른 의미
undefined는 예상치 못하게 비어있는 경우
null은 일부로 비어있음을 명시적으로 저장한 경우

if(undefined){
    console.log('hi'); // 출력 안됨
}

if(null){
    console.log('hi'); // 출력 안됨
}


let variable; // 선언하고 값 저장 안함
const initValue = null // null을 저장


console.log(variable); // undefined	

타입 변환

+ 암시적

const result1 = 1 + '입니다'; // 1입니다.
const result2 = '11' + 11; // 1111
const result3 = '2' * '2'; // 4

console.log(typeof result2); // string
console.log(typeof result3); // number

result2, result3은 문자열이 포함된 산술연산을 했지만 결과는 다르게 나왔다.

+ 명시적

const result1 = String(1) + ' 입니다'; // 1 입니다.
const result2 = Number('11') + 11; // 22

따라서 암시적 방법 말고 명시적 방법으로 타입 변환 후 연산 하는 것이 좋다.


📌 불리언 (Boolean)

Boolean(), !!

console.log(Boolean('STRING')); // true
console.log(!!'STRING'); // true

논리 연산자

OR || 하나라도 true면 true
AND && 하나라도 false면 false
NOT ! 현재 값의 반대

console.log(false || false || true); // true
console.log(true && true && false); // false
console.log(!true); // false

비교 연산자

느슨한 검사 : ==
엄격한 검사 : ===

console.log('0'== 0); // true
console.log('0'=== 0); // false

Truthy

참과 같은 값: 거짓 같은 값으로 정의된 값이 아니면 모두 참으로 평가됨
|| 연산자를 이용해서 truthy 찾아내기 : 왼쪽에서 오른쪽으로 넘어가며 값을 평가하고 false면 다음 값 평가, true인 경우 평가를 멈춘다.

const judge = false || 0 || 123;

console.log(judge); // 123 

Falsy

거짓 같은 값: false, -0, 0, NaN, undefined, '' 등
&& 연산자를 이용해서 falsy 찾아내기: 왼쪽에서 오른쪽으로 넘어가며 값을 평가, true면 다음 값 평가하다가 false인 경우 평가를 멈춘다.

const judge = 132 && 'hi' && {} && undefined && [];

console.log(judge); // undefined

📌 숫자

let num = 123;

let num_2 = new Number(123);

console.log(typeof num); // number
console.log(typeof num_2); // object

number는 원시값이지만 객체로 만들어 선언이 가능하지만
자료형이 object가 되고 선언도 복잡하니까 리터럴로 선언한다.

숫자로 변환

console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0
console.log(Number(false)); // 0
console.log(Number('')); // 0
console.log(Number('1234')); // 1234

if(Number('')){
    console.log('hi'); // 출력 안됨
}else if(Number('111')){
    console.log('hello'); // hello
}

console.log(+false); // 0

Number() : 숫자형으로 변환 가능, 0으로 변환 되거나 숫자로 변환되는데
숫자로 바꿀 수 없는 경우 NaN 이 출력됨

0으로 변환되면 falsy 값이 되어 if 문 등에서 실행이 되지 않는다

+는 값 앞에 붙어서 숫자형으로 변환해 주지만 명시적으로 해주는 것이 좋다.

NaN

숫자로 읽어낼 수 없는 경우
잘못된 계산 결과식
정의할 수 없는 결과식
문자열이 포함된 계산식 (덧셈 제외)

// 느슨한 검사 -> true
isNaN(undefined);
isNaN({});
isNaN('문자열');

// 엄격한 검사 -> false
Number.isNaN(undefined);
Number.isNaN({});
Number.isNaN('문자열');

isNaN()함수는 넘어오는 인자를 Number로 변환을 시도한다
이때 숫자로 바뀌지 않으면 NaN으로 평가되는데
Number.isNaN()은 형 변환을 시도하지 않는다.

📌 연산자

typeof

typeof undefined // undefined
typeof 13 // number
typeof 'hi' // string
typeof 9007199254740991n; // bigint
typeof true // boolean
typeof Symbol() // symbol
typeof function () {} // function
typeof [] // object
typeof {} // object
typeof null // object

값의 타입을 알 수 있는데 배열, 객체, null의 경우 object로 표시된다
이때 명확하게 어떤 생성자로 만들어 졌는지 확인 하는 방법은 instanceof를 사용한다.

instanceof

console.log({} instanceof Object); // true
console.log([] instanceof Array); // true;
console.log(function(){} instanceof Function) //true;

📌 배열

유사 배열 객체

function func() {
    arguments.push(6); // TypeError: arguments.push is not a function
}

func(1,2,3,4,5);

arguments에는 배열의 메서드 push()를 사용할 수 없다.

function func() {
    console.log(Array.isArray(arguments)); // false
}

func(1,2,3,4,5);

Array.isArray() 메서드를 이용해서 배열 여부를 판단하면 false가 출력된다.


📌 함수

// 함수 선언문 (declaration)
function func(){

}

// 함수 표현식 (expression) 
const func = function func(){

}

// 메서드: 객체 안에 속성 값으로 있는 함수
const obj = {
	prop: function () {},
}

// 생성자 함수: 특정 instance를 만들어 낼 수 있다.
function MyObj(){

}

// 화살표 함수 
const arrowFunc = () => {}
profile
길을 찾고 싶은 코린이 of 코린이

0개의 댓글