콜스택과 메모리힙
오브젝트형의 특징을 이해하려면 자바스크립트 내부의 메모리 구조 이해가 선행
- 자바스크립트의 엔진은 콜스택과 메모리힙으로 구성
- 콜스택은 원시형의 데이터가 저장되는 메모리
- 메모리힙은 오브젝트형에서 사용하는 참조형 메모리(new 연산자를 통해 만들어지는 객체의 주소값을 참조)
- 필요할 때 할당되는 메모리이므로 동적 메모리라고도 함.
원시형과 오브젝트형의 값 저장 구조
원시형 값 저장 구조
var msg = 100;
콜스택, 메모리 힙의 데이터 저장 구조
원시 타입 데이터
- 변수 a에는 10이 저장된 콜스택 메모리의 주소값이 저장
- 변수 식별자 a자체는 콜스택 상의 실행 컨택스트~~~
오브젝트형 값 저장 구조
var msg = {name: '불꽃 남자'};
오브젝트형 예제 코드
var msg = {
name: '불꽃 남자',
comment: '포기를 모르는 남자',
age: 19
}; // msg라는 객체 생성
var arr = []; // arr이라고 하는 빈 배열 생성
arr.push(msg); // arr이라고 하는 빈 배열에 위에 생성한 객체 데이터 삽입(추가);
console.log(arr);
// [{name: '불꽃 남자', comment: '포기를 모르는 남자', age: 19}]
msg.name = '행복한 여자';
console.log(msg); // {name: '행복한 여자', comment: '포기를 모르는 남자', age: 19}와 같이 객체를 생성하고, 객체 데이터를 배열에 삽입할 수 있으며 .name과 같은 직접접근자를 이용해서 해당 값에 접근하여 데이터값을 변경할 수도 있다.
위 코드를 상세하게 풀어서 보면
var msg = new Object();
msg = {
name: '불꽃 남자',
comment: '포기를 모르는 남자',
age: 19
};
var arr = new Array();
arr.push(msg);
console.log(arr);로 해석할 수 있다.
즉, 자바스크립트의 모든 변수는 사실 new 연산자를 이용하여 생성한 "객체"인 것인데, 간결한 사용을 위해 new 연산자를 생략하고 표현한다.
연산자
: 가장 기본적인 산술연산자로 더하기/빼기/곱하기/나누기/나머지/거듭제곱 연산자 등이 있다.
산술 연산자
| 연산자 | 연산자명 | 내용 | 예시 |
|---|---|---|---|
| + | 더하기 연산자 | 두 개의 피연산자를 더한 값 | 5 + 3 = 8 |
| - | 빼기 연산자 | 두 개의 피연산자를 뺀 값 | 5 - 3 = 2 |
| * | 곱하기 연산자 | 두 개의 피연산자를 곱한 값 | 5 x 3 = 15 |
| / | 나누기 연산자 | 두 개의 피연산자를 나눈 몫 | 5 / 3 = 1 |
| % | 나머지 연산자 | 두 개의 피연산자를 나눈 나머지 | 5 % 3 = 2 |
| ** | 제곱 연산자 | 왼쪽 피연산자에 오른쪽 피연산자의 값만큼 곱한 값 | 5 x 5 x 5 = 125 |
연산자 종류
- 피연산자: 연산을 수행하는 대상 ex) x + 3 ( +: 연산자, x, 3: 피연산자)
- 단항 연산자: 피연산자가 1개인 연산자 ex) + 3 ( + : 단항 연산자)
- 이항 연산자: 피연산자가 2개인 연산자 ex) x + 3 ( + : 이항 연산자)
단항 연산자 예시
+ '1' : 문자열 앞에 +와 같은 단항 연산자가 붙으면 숫자형으로 타입캐스팅이 적용된다.
단, 문자열의 내용이 숫자가 아닌 경우에는 적용되지 않는다.
console.log(+'1' + 1); // 2
console.log(+'1024' + 1); // 1025
console.log(+true); // 1
console.log(+false); // 0여기서 재미있는 점은 문자형 + 숫자형의 경우에는 숫자형을 문자형으로 타입캐스팅하여 문자형 + 문자형으로 연산을 실행하지만, +를 제외한 다른 연산자들은 '숫자형'으로 타입캐스팅을 적용한다는 점이다.
console.log('10' - 2); // 8
console.log('10' / 2); // 5
console.log('10' * 2); // 20
/* 추가로 아래와 같이 문자열 - 문자열의 경우에도 내용이 숫자인 경우에는 숫자형으로 타입캐스팅 후 연산을 실행한다.
(단, +의 경우에는 '문자열'이 포함되어 있다면 문자열로 타입캐스팅하여 연산실행) */
console.log('10' - '2'); // 8할당(대입) 연산자
- 기본 할당 연산자는 '=' 표기
- 연산자의 오른쪽 값을 왼쪽으로 대입하는 역할
console.log('2' == 2); // true
console.log('2' === 2); // false
console.log('A' < 'B'); // true
console.log('ABC' < 'ABD'); // true삼항연산자
(조건문) ? true : false;논리연산자
주어진 논리식을 판단하여 참과 거짓을 반환
- ||(OR): OR의 의미로, a와 b 둘 중 한개만 true면 전체 true값 반환
- &&(AND): AND의 의미로, a&&b의 경우 a와 b 모두 true여야 전체 true값 반환
- !(NOT): 대상의 부정 의미로, a 값이 true인 경우 !a는 false를 반환
console.log(true&&true); // true
console.log(true&&false); // false
console.log(false&&false); // false삼항 연산자와 논리연산자를 혼합해서 로그인 성공 여부 확인
var id = "javascriptuser";
var pw = "1111";
var result = (id == 'javascriptuser' && pw == '1111') ? "로그인 성공" : "로그인 실패";
console.log(result); // pw='1111' 이면 로그인 성공, pw='111'이면 로그인 실패위 코드는 id와 pw가 모두 true일 때만, "로그인 성공"이라는 true값을 반환하고, 둘 중 하나라도 false라면 "로그인 실패"가 반환되는 &&(AND) 논리 연산자와 삼항 연산자를 결합한 코드이다.
nullish 병합 연산자
그런데 위 코드를 포함하여 모든 객체 타입의 코드는 유효성을 위해 반드시 NULL 체크가 필요하다.
변수에 NULL값이 포함되어 있으면 코드에 오류가 발생하기 때문에 변수의 유효성 체크는 필수적이다.
따라서, 위 코드에 앞서 id값에 null이나 undefiend의 존재여부를 체크하는 유효성(valid) 체크가 필수적이다.
var result = (id !== null && id !== undefined) ? '아이디가 입력되었습니다' : '아이디가 입력되지 않았습니다';이렇게 id에 null이나 undefined 값이 포함되어 있는지를 체크하는 것이다. 그런데 매번 이렇게 코드를 길게 쓰기는 가독성도 떨어지고 너무 불필요하다. 따라서 이 때 사용하는 것이 Nullish 병합 연산자이다.
var result = (id ?? null) ? '아이디가 입력되었습니다' : '아이디가 입력되지 않았습니다';위 코드를 해석 하면 "id가 null도 아니고 undefined도 아니면 id는 유효하다."라는 의미이다.
즉, id에 어떠한 값이 입력되어 있으면 해당 id는 유효하며 null이나 undefined값이 아니라는 것을 의미하고 그 외에는 모두 null값이라는 것이다.
이렇게 "??"로 축약해서 사용하는 것을 NULLISH 병합 연산자라고 한다.
