자바스크립트 - 변수 선언

이정인·2022년 3월 1일

프론트엔드 기초지식

목록 보기

4/9

변수 선언

var, let, const를 이용해 선언

var a;
let b;
const c;
var a,b,c;
let num1= 1, num2= 2, num3= 3;

var

기존에 선언된 변수의 값을 덮어쓰며, 함수 스코프를 기준으로 동작한다.

var a = 1;
if(isSomething) {
	var a = 2;
}
console.log(a) // 2

다른 코드에 영향을 주거나 버그가 발생할 때 원인을 찾기 어려움

특정 함수 내에서 var로 선언한 변수는 함수 스코프를 가진다. (함수 안에서만 접근 가능) 하지만 블록을 종종 무시해 문제가 되기도 한다.

function foo() {
	for(var i=0;i<10;i+=1) {
	// ...
	}
	console.log(i) // 10; 
}
foo();

i 는 블록 내에서 선언되었지만 함수 스코프를 가지기 때문에 foo() 함수의 실행이 종료되기 전까지만 접근할 수 있다.

let, const

재선언을 허용하지 않으며, 블록 스코프(변수를 둘러싼 블록 안에서만 해당 변수에 접근 할 수 있다.)를 가진다.

예상치 못하게 기존 변수의 값이 바뀌는 위험 없이 안정적으로 변수를 사용할 수 있다.

function foo() {
	for(let i=0;i<10;i+=1) {
	// ...
		console.log(i)
	}
	console.log(i); // error
}
foo();

반복문이 수행될 때마다 지역 변수로서 새로 선언되어 반복문 내에서 안전하게 값을 사용할 수 있다.

let 은 대입한 값을 계속 수정할 수 있지만 const 는 한번 대입하면 다른 값 대입을 할 수 없고 초기화 시 값이 필요하다.

const a = 0;
a = 1; // error

let b = 0;
b = 1; // 1

const c; // error

객체와 타입

자바스크립트의 값은 원시 타입(Primitive Type)과 객체(참조형)으로 나뉜다.

원시 타입은 7가지가 있다.

number : 정수, 실수 구분 없음
string : 16비트 코드로 특수한 문자열은 실제 표현되는 문자열의 길이와 다를 수 있다.
boolean
null
undefined
Symbol
BigInt

원시 타입은 하나의 값만 가지며, 불변 데이터이기 때문에 연산을 해도 기존 값이 변경되지 않는다.

const result = 'hello' + 'javascript'

원시 타입을 제외한 나머지는 모두 객체다.

NaN

Not a Number. 숫자로 변환할 수 없는 값을 숫자로 변환하려고 하거나 산술 연산읜 결과가 숫자가 아니면 NaN 값이 반환됨

NaN은 자기 자신과도 동등하지 않으므로 isNaN을 사용하여 판별하는 것이 권장

const a = 3 - 'a';
console.log(a===a) //false
console.log(Number.isNaN(a)) // true

소수점 연산

자바스크립트는 부동 소수점의 배정밀도를 이용해 근삿값으로 소수점 연산을 수행한다. 배정밀도는 정확한 값을 표현할 수 없어 아래와 같은 문제가 발생한다.

0.1 + 0.2 === 0.3 //false

Number.EPSLION 을 사용해 해결할 수 있다.

null, undefined

null : 변수를 선언하고 빈 값을 할당한 상태 (값을 없음을 나타내는 타입)

undefined: 변수를 선언하고 값을 할당하지 않은 상태

let v;
funtion f() {}
console.log(v); // undefined
console.log(f()) // undefined

typeof null // 'object'
typeof undefined // 'undefined'
null === undefined // false
null == undefined // true
null === null // true
null == null // true
!null // true
isNaN(1 + null) // false
isNaN(1 + undefined) // true

객체

이름(키): 값 형태로 여러 값을 포함하는 컨테이너

컨테이너 내부의 값은 변경할 수 있다.

생성

Object 생성자 함수 사용

const obj = new Object();
//프로퍼티 생성
obj.id = 'id';
obj.name = 'name';

객체 리터럴
```
const obj = {
	id,
	name,
}
```
생성자 함수

특정한 형태의 객체를 생성하거나 상속 받고 싶을 때 생성자 함수를 사용한다.
```
function Vehicle(type) {
	this.type = type;
}
const car = new Vehicle('Car');
```

읽기

obj.name;
const prop = 'name';
obj[prop];

객체에 존재하지 않는 프로퍼티일 경우 undefined 값을 반환한다.

동적 프로퍼티 생성과 갱신

getter, setter

어떤 프로퍼티에 직접 접근 하는 게 아니라 동적인 계산이 필요하거나 프로퍼티 값이 변경될 때마다 별도의 처리 코드가 필요하다면 접근자 프로퍼티를 사용할 수 있다.

get/set 문법을 사용해 정의한다.

const obj = {
	myName: 'javascript',
	set name(name){
		if(name !== null) {
			this.myName = name;
		}
	},
	get name(){
		return this.myName;
	}
  set count(count) {
    if (count !== null && count > 0) {
      this.count = count;
    }
  }
}

Object.defineProperty()와 프로퍼티 속성

정적 메서드를 이용해 접근자 프로퍼티를 생성할 수도 있다. 직접 새로운 프로퍼티를 정의하거나 이미 존재하는 프로퍼티를 수정한 후 그 객체를 반환한다.

const obj = {myName: 'javscript'};

Object.defineProperty(obj, 'name', { 
	set(name) {
		if(name !== null) {
			this.myName = name;
		}
	},
	get() {
		return this.myName;
	}
});
  // 대상이 되는 객체,
  // 추가 또는 갱신하려는 프로퍼티 명이나 심볼,
  // 프로퍼티 서술자를 정의한 객체 (get, set 외에 다른 것도 있음)