[JS]원시 타입, 참조 타입

badassong·2022년 10월 20일

JS

목록 보기

8/31

오늘은 짧은 시간 동안 비교적 많은 걸 머릿속에 넣어야 해서 머리가 초큼 아팠다,,ㅎㅎ
localhost, 원시 타입, 참조 타입 등을 배우면서 디데이 카운터를 만들어 보고 있는데, 오늘 배웠던 것들 중 원시 타입과 참조 타입의 개념이 좀 헷갈려서 보충공부를 했다.

1. new Date()

자바스크립트에서의 날짜 데이터는 객체로 관리가 된다.

new Date("2022-10-20")

이렇게 특정 날짜의 데이터를 받아올 수 있다.

시간을 자정으로 설정

let time = new Date(new Date().setHours(0, 0, 0, 0));//이전 자정(즉, 당일)

//let time = new Date(new Date().setHours(24, 0, 0, 0)); 이후 자정
//let time = new Date(new Date().setHours(12, 0, 0, 0)); 정오

2. localhost

라이브 서버를 사용해서 페이지를 열면 주소창에 localhost라는 문자가 나온다.
이 localhost는 사용자의 컴퓨터 자체를 가리키는 ip 주소, 127.0.0.1과 같은 주소를 의미한다.

localhost === 127.0.0.7

localhost:5500
여기서 5500을 port라고 지칭하는데, localhost는 수많은 문을 가지고 있지만 우리가 열어주기 전에는 전부 닫혀 있다. 5500이라는 port는 라이브 서버가 우리의 localhost로 접근할 수 있도록 열어둔 5500이라는 번호를 가진 문인 것이다.

3. 원시 타입과 참조 타입

자바스크립트의 데이터 타입은 크게 원시 타입(Primitive type)과 참조 타입(reference type)으로 구분할 수 있다. 원시 타입과 참조 타입은 크게 세 가지 측면에서 다르다.

원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 참조 타입의 값, 즉 객체는 변경 가능한 값이다.

원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.

원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.

자바스크립트에서의 원시 타입 : String, Number, Boolean, Bigint, undefined, Symbol, null

자바스크립트에서의 참조(객체) 타입 : 위의 7종류를 제외한 나머지 모든 것

원시 타입 예제

let score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
let copy = score;

console.log(score, copy);  // 80 80
console.log(score === copy);  // true

// score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
// 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.
score = 100;

console.log(score, copy);  // 100 80
console.log(score === copy);  // false

이 예제에서 score 변수와 copy 변수의 값 80은 다른 메모리 공간에 저장된 별개의 값이다!!
따라서 score 변수의 값을 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는 것이다!!

참조 타입 예제01

let person = {
   name: 'Lee'
};

// 참조 값을 복사(얕은 복사). copy와 person은 동일한 참조 값을 갖는다.
let copy = person;

// copy와 person은 동일한 객체를 참조한다.
console.log(copy === person);  // true

// copy를 통해 객체를 변경한다.
copy.name = 'Kim';

// person을 통해 객체를 변경한다.
person.address = 'Seoul';

// copy와 person은 동일한 객체를 가리킨다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고받는다.
console.log(person);  // {name: "Kim", address: "Seoul"}
console.log(copy);  // {name: "Kim", address: "Seoul"}

참조 타입 예제02

let person1 = {
   name: 'Lee'
};

let person2 = {
   name: 'Lee'
};

console.log(person1 === person2)  // false
console.log(person1.name === person2.name)  // true

person1 변수와 person2 변수가 가리키는 객체는 비록 내용은 같지만 다른 메모리에 저장된 별개의 객체다. 따라서 첫번째 콘솔값은 false가 되고, person1.name과 person2.name은 값으로 평가될 수 있는 표현식이다. 두 표현식 모두 원시 값 'Lee'로 평가되기 때문에 두번째 콘솔값은 true가 된다.

4. 조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드의 실행을 결정한다.

if…else문

if문은 특정 조건이 참일 때 명령문을 실행하며, 거짓일 경우에는 else문을 실행하게 된다.

if( 조건1 ) { 
	// 조건1이 참이면 실행
} else if( 조건2 ) {
	// 조건1은 거짓, 조건2는 참이면 실행
} else {
	// 모두 거짓이면 실행
}

논리 연산자

&& (and 연산자) : 양쪽에 위치한 조건을 모두 만족한 경우 true

|| (or 연산자) : 양쪽 중 하나라도 만족한 경우 true

! (not 연산자) : boolean의 값을 반전 시켜주는 논리 연산자. (true값이었던건 false로, false값이었던건 true로.)**