JavaScript 기초

변수 (variable)

변수 : 변할 수 있는 무언가 (데이터)
식별자 (identifier) : 데이터를 식별하는데 사용하는 이름 (변수명)

변수 선언

var : 업데이트 가능 / 재선언 가능 / 함수 내 선언 시 함수 내에서, 외부 선언 시 전역 변수

재선언이 가능하다는 점 때문에 if문 밖에서 선언 후 if문 내에서 재선언 시 if문의 변수를 if문 밖에서 사용할 수 있다는 문제가 있다.

let : 업데이트 가능 / 재선언 불가능 / 중괄호 내에서 존재
const (상수) : 업데이트 불가능 / 재선언 불가능 / 중괄호 내에서 존재

선언과 동시에 초기화 되어야 한다.
객체 내의 변수의 업데이트는 가능하다. (computer.keyboard = "new keyboard")

const name = "Mike";
const name2 = `My name is ${name}`; // `은 다른 변수를 읽어올 때 사용

호이스팅

https://www.freecodecamp.org/korean/news/var-let-constyi-caijeomeun/

• 변수나 함수를 상단으로 끌어올리는 것

    console.log (greeter);
    var greeter = "say hello"

자바스크립트는 다음과 같이 해석하기 때문에:

    var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

var 변수는 범위 내에서 맨 위로 올려지고, 값은 undefined(정의되지 않음)으로 초기화됩니다.

변수 타입

typeof() : 변수 체크

에러 메시지

NaN : Not a Number, 숫자가 아닌 변수에 숫자 연산을 시도할 경우

변수의 복사

• 기본형 데이터 : 불변값

• 참조형 데이터 : 가변값

• 기본형 데이터와 참조형 데이터 모두 같은 데이터를 가진 주소값을 복사해온다.

• 기본형 데이터의 경우 복사 후 값을 변경하면 두 데이터의 값이 달라진다.

• 참조형 데이터의 경우 복사 후 값을 변경하면 원본의 값도 함께 변경된다.

var a = 10;
var b = a;

var obj1= { c: 10, d : 'abc'};
var obj2 = obj2;

var b = 15; // a = 10, b = 15
var obj2.c = 20; // obj1.c = 20, obj2.c = 20

// 복사본에 새로운 객체를 할당 시 복사본이 가리키는 메모리 주소가 달라지므로 값이 변경된다.
var obj2 = {c = 20, d : 'abc'}; // obj1.c = 10, obj2.c = 20

undefined / null

undefined

사용자가 직접 부여하거나, 사용자가 값을 부여할 만한 상황인데도 부여하지 않으면 자바스크립트 엔진이 부여
1. var a; 이후 값이 부여되지 않은 변수
2. 객체 내부의 존재하지 않는 프로퍼티 (user에 없는 변수인 price 변수)
3. return문이 없거나 호출되지 않는 함수의 실행 결과

• 1의 경우에서 배열의 경우 [empty x 배열의 크기] 가 출력된다.
  undefined를 n개 부여할 경우에만 undefined 배열로 출력된다. 배열 순환의 경우에도 배열의 특정 요소가 아예 비어있는 경우는 아무런 처리를 하지 않지만,
  사용자가undefined를 부여한 경우 하나의 값으로 동작하여 배열 순회의 대상이 된다. 대신 비어있는 요소를 출력하거나 할 때는 undefined가 출력되므로, 사용자가 부여한 값과의 혼돈을 막기 위해서는 직접 부여할 경우 null을 사용하는 것을 권장한다.
  

null

typeof(null)은 object로 출력되는 자바스크립트 자체 오류가 있다.
또한 null이 부여된 변수는 == (동등 연산자) 연산 시 undifined와 동일하다고 출력된다.
=== (일치 연산자)를 사용해야 null과 undifined의 구분이 가능하다.

반복문

array.forEach(element => {
	console.log("오늘의 메뉴는 " + element);
});

값을 하나씩 꺼내서 element로 처리한다.

불변 객체

위에서 서술한대로 참조형 데이터 (객체)의 경우 복사본에게 새로운 객체를 할당하지 않으면 복사본의 값을 변경할 때 원본의 값도 함께 변경된다.

이를 막기 위한 방법이 있다.

1. 복사본에 새로운 객체를 할당

위에서 서술한 방법이다. 이러한 하드코딩을 할 경우 객체가 늘어날 경우 입력해야 할 값이 늘어난다.

2. 얕은 복사 함수 선언

얕은 복사 : 바로 아래 단계의 값만 복사

// 복사본에 새로운 변수를 일일히 선언해주는 함수를 정의
var copyObject = function (target){
  	var result = {};
  	for (var prop in target){
    	result[prop] = target[prop]; 
    }
	return result;
}

// 외부에서 호출
var user2 = copyObject(user);
user2.name = 'Jung';

모두가 이 함수를 사용하면 좋겠지만, 그렇지 않을 경우 불변성이 깨진다.
또한, 참조형 객체가 중첩될 경우 내부의 참조형 객체는 기존 데이터를 그대로 참조하게 되어 불변성이 깨진다.

var user = {
  	name = "Ella",
  // 중첩된 참조형 객체
  	urls : {
  		protfolio : 'http://~~',
		blog : 'http://velog.io/~~'
	}
}

3. 깊은 복사

target이 object일 경우 copyObject 함수를 재귀 호출하여 완전히 복사하는 방법을 사용한다.

3-1. json을 사용한 깊은 복사

객체를 JSON 문법으로 표현된 문자열로 전환했다가 다시 JSON 객체로 변경한다.

• 메서드 / 숨겨진 프로퍼티 등은 모두 무시한다는 단점이 있다.
• httpRequest로 받은 데이터를 저장한 객체를 복사할 때 등 사용하기 좋다.

var copyOnjectViaJSON = function (target){
  	return JSON.parse(JSON.stringify(target));
};