기본개요, 데이터 타입과 연산자

신영진·2022년 12월 30일
JavaScript
0

자바스크립트의 거의 모든 것은 객체이다. (기본 데이터 타입을 제외 한 나머지)

함수도 객체이다(일반적인 객체보다 더 많은 기능을 가진 객체) => 일급객체(first class object)

  • 모든 객체는 숨겨진 링크인 프로토타입을 가진다.

  • 자신만의 독특한 과정으로 실행 컨텍스트를 만들고 그 안에서 실행이 이루어진다.

  • 클래스를 지원하진 않지만 객체지향 프로그래밍이 가능하다.

  • 함수형 프로그래밍이 가능하다

⚠️ 유연한 언어를 특성으로 가지며 이 때문에 디버깅이 어려울 수 있다.

⚠️ 최상위 레벨의 객체들이 모두 전역 객체 안에 존재 하기 때문에 이름 충돌의 위험성이 있다

느슨한 타입 체크 언어인 자바스크립트 변수 선언 할 때 var, let, const 세가지 키워드로 값을 할당함

var는 ES6에서 let 과 const가 나오기 전까지 변수를 선언하는 유일한 방법이였다

var

  • var로 선언된 변수는 값이 변경되면 기존에 선언된 변수의 값을 덮어쓰는 형식이다.

  • 전역스코프가 아닌 특정 함수 내에서 var로 선언한 변수는 함수 스코프를 가진다.

let과 const

  • var와 달리 재선언 불가능 → 예상치 못하게 기존 변수 값이 바뀌는 것을 방지함

  • 함수스코프가 아닌 블록스코프를 가진다. 둘러싼 블록 안에서만 해당 변수에 접근 가능함

  • const는 값의 변경이 불가능. 변하지 않는 값을 선언할 때 사용

원시타입

number, string, boolean, null, undefined, Symbol, BigInt

  • 숫자

    • 다른 언어의 경우 다양한 숫자 타입이 존재하지만 Javascript의 경우 number 하나만 존재한다.
    • Javascript에서는 모든 숫자를 64비트 부동 소수점 형태로 저장하기 때문 (C의 double타입과 비슷한 형태)
    • ⚠️ 나눗셈을 할때 주의 → 정수 부분만 구할 경우 Math.floor() 사용
    • NaN(Not a Number) : 읽기 전용 속성. 숫자로 변환할 수 없는 값을 변환하려고 하거나 산술 연산의 결과가 숫자가 아닐때 반환됨
    • Number.isNaN()

  • 문자열

    • ' 나 “ 또는 ` 를 사용
    • char 타입은 존재하지 않는다
    • ⚠️ 한 번 정의 된 문자열은 변하지 않는다 >> 아직도 그런가요?
    • 문자열 안에 따옴표를 사용해야할 때는 \ (백슬래시) 로 이스케이프 처리하여 사용한다
    • 문자 병합
const ex1 =  'hello' + 'javascript';
//또는
const name = 'javascript';
const ex2 = `hello ${name}` ; //템플릿 리터럴
  • null & undefined
    • 값이 비어있음을 뜻함
    • null vs. undefined
      • undefined 는 타입이자 값이다
      • null의 타입은 object이다 → null 은 개발자가 명시적으로 값이 비어있음을 나타낼때 사용

  • Symbol

    • 데이터의 유일함을 나타낼때 사용
    • 생성된 심볼은 다른 어떤 심볼과 일치하지 않는다
    • symbol은 원시 타입이기 때문에 new 라는 키워드를 사용해 생성하지 않는다

  • BigInt

    • 정수 뒤에 n을 붙이거나 BigInt()함수를 호출해 사용한다
    • 정수범위를 벗어나는 숫자를 연산해도 안전하게 연산 가능
    • ⚠️ 숫자 타입이나 Math객체의 메서드와 함께 사용해 연산 할 수 없다

참조타입(객체 타입)

기본 타입을 제외한 모든 값 (배열, 함수, 정규표현식 등)

key : value 형태

기본타입은 하나의 값만 가지는 반면 참조타입은 여러개의 property를 포함

property는 기본타입 또는 다른 객체를 가리킬 수 있고 함수 또한 포함 할 수 있다.

객체 생성

1. Object() 생성자

var foo = new Object();

foo.name = 'foo';
foo.age = 30;
  • 생성자 함수를 이용하여 빈 객체 생성 후 property추가

2. 객체 리터럴 방식

  • { } 를 이용하여 객체 생성

  • { } 안에 key(property name) : value(property value) 형식으로 property추가

  • property이름은 문자열 또는 숫자

  • property값은 어떤 표현식이든 가능, 값이 함수 일 경우 메서드라고 부름

var foo = {
  name : 'foo',
  age : 30
}

3. 생성자 함수

  • 형식이 정해져있지 않음

  • 일반 함수와 구분하기 위해 생성자 함수이름은 첫 글자를 대문자로 표기하는 것을 권장

function Vehicle(type) {
  this.type = type;
}

const car = new Vehicle('Car');

Property 읽기/쓰기/갱신/삭제

  • [ ] 이용 → foo['name']

  • . 이용 → foo.name

⭐ [ ] 만 가능한 경우 : property이름이 표현식이거나 예약어일때

출력:
for in 문 사용

var prop;
for (prop in foo){
  console.log(foo[prop])
};

삭제: 

delete foo.name;

delete는 객체의 property는 삭제가 가능하나 객체 자체는 삭제 불가능

특성:

참조타입이라고 부르는 이유?
-> 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리 되기 때문

var objA = {val : 40};
var objB = objA;

  • objB의 val값을 바꾸면 objA의 val값도 같이 바뀐다.

  • objB가 가리키고 있는 참조값이 objA가 가리키는 값과 같기 때문이다.

비교 (==)
property값이 아닌 참조값을 비교하는 동등 연산자

호출방식

값에 의한 호출 (Call by value) vs. 참조에 의한 호출 (Call by reference)

  • 기본타입 호출방식 : 값에 의한 호출
    • 함수에 기본 타입의 값을 인자로 넘길때 복사된 값이 전달되므로 함수내부에서 매개변수로 값을 변경해도 기존 값이 변경되지 않음.
  • 참조타입 호출방식 : 참조에 의한 호출
    • 참조타입의 객체를 전달 할 때에는 property값이 복사되어 전달되지 않는다.
    • 참조값 그대로 전달되기 때문에 함수 내부에서 실제 객체의 값을 변경 가능.

배열

생성

1. Array() 생성자

const arr = new Array();

  • 생성자 함수 안에 인자가 1개이고 숫자일 경우 배열의 길이를 뜻함 → 숫자만큼 길이의 빈 배열 생성

  • 그 외에는 배열의 요소를 뜻함

2. 배열 리터럴

[ ] 사용

⭐ 배열에도 property추가 가능 → 하지만 배열 길이에 영향 X , 권장 X

희소배열

  • 배열이 연속적이지 않고 중간에 빈 배열

  • 배열 내장 메서드 사용시 빈 원소는 무시

  • 빈원소는 undefined가 아닌 empty로 표시됨

특수한 경우가 아니라면 권장 X

배열조작

배열원본데이터를 직접 수정하는 메서드 vs. 기존 데이터를 기반으로 새로운 배열을 생성하는 메서드

수정:

  • shift(): 첫번째 원소 삭제 후 삭제된 원소 값 반환

  • unshift() : 첫번째 인덱스에 원소 추가 후 배열의 새로운 길이 반환 (원소 여러개 추가 가능 ex. arr.shift(1, 4))

  • push(): unshift와 비슷하지만 첫번째 인덱스가 아닌 마지막에 추가

  • pop(): 마지막 원소 삭제 후 반환

  • splice(): 원소 추가,교체,삭제시 사용 ( splice(start, end, item) start : splice 시작, end : splice 끝나는 위치, item :삭제위치에 추가할 원소)

생성:

  • concat() : 인자로 받은 값을 기존 배열에 합쳐 새로운 배열을 생성하여 반환
  • slice() : 특정 범위 내 원소를 복사하여 반환 → uses shallow copy

map():

배열의 모든 원소를 인자로 받은 함수의 특정한 형식으로 변경하여 새로운 배열의 생성하여 반환

const arr = [1,2,3];
cons newArr = arr.map(x => x + 1);

forEach():

인자로 받은 함수를 배열의 모든 원소를 대상으로 실행

const forEach = arr.forEach(x => console.log(x));

filter():

인자로 받은 함수의 테스트를 통과하는 원소들로 새로운 배열 생성 후 반환

const filter = arr.filter(x => x !== 1);
//filter값 = [2,3]

배열의 요소를 삭제할 때 delete 연산자를 사용한다. → 요소가 삭제되고 undefined가 할당 된다. 고로 length는 변하지 않는다.

요소를 완전히 삭제 할땐 splice를 사용한다.

유사배열객체

일반 객체를 배열처럼 사용 할 수 있음

양의 정수인 length property를 가진 객체 ( 가장 대표적으로 arguments)

⚠️ 유사배열객체는 property를 배열처럼 인덱스로 접근 가능하지만 배열 내장 메서드를 사용 할 수 없다.

⭐ 배열 내장 메서드를 사용하기 위해서는 apply() 또는 call() 과 결합하여 사용해야한다

연산자

Truthy and Falsy 값

falsy값 ex)

  • false
  • null
  • undefined
  • NaN
  • '' (빈 문자열)
  • 0
  • 0n
    Falsy값을 갖는 모든 값을 제외한 나머지 값들은 다 Truthy 값을 가짐

이중 부정 연산자 ( !! )

기존 값을 boolean으로 변환 할 때 사용

동등연산자 (==) vs. 일치연산자 (===)

동등연산자 : 암시적 강제 변환이 가능함. 피연산자의 타입이 다른경우 타입변환 후 비교.

→ 타입이 달라도 같은 값을 반환 할 수 있다면 동등하다고 판단


일치연산자: 암시적 강제변환 허용X

→ 피연산자들의 타입과 값 모두가 같아야 동등하다고 판단

profile
신영진
자라나는 새싹🌱
이전 포스트

[Java] input값 받는 2가지 방법

다음 포스트

타입변환과 함수

0개의 댓글