chasing_pavement
모던 자바스크립트 딥다이브 7장 - 11장 본문
글을 보시는 분들이 계신다면 노션 내용을 이전 중이라서
줄바꿈이나 표식이 어색하게 되어 있는 곳이 아직 있다는 점 유의해주시면 감사하겠습니다ㅎㅎ
목차
7장 연산자
8장 제어문
9장 타입 변환과 단축 평가
10장 객체 리터럴
11장 원시 값과 객체의 비교
7장 연산자
단항 산술 연산자
var x = 5,result;
//선할당 후증가
result = x++;
console.log(result,x); //5 6
//선증가 후할당
result = ++x;
console.log(result,x); //7 7
숫자 타입이 아닌 피연산자에
+연산자를 사용하면 숫자 타입으로 변환하여 반환함
var x = '1';
//문자열을 숫자로 타입 변환
console.log(+x); //1
//불리언 값을 숫자로 타입 변환
x = true;
console.log(+x); //1
x = false;
console.log(+x); //0
//문자열은 숫자 타입으로 변환할 수 X.
x = "Hello";
console.log(+x); //NaN
-연산자는 피연산자의 부호를 반전한 값을 반환
-(-10); //10
-'10'; //-10
-true; //-1
-'Hello'; //NaN
문자열 연결 연산자
암묵적 타입 변환(타입 강제 변환) : 숫자 타입으로 강제 변환한 후 연산을 수행
'1'+2 ; //'12'
1+true; //2
1+false; //1
1+undefined; //NaN
5 * '10'; //50
비교 연산자
== 값이 같은지?
=== 타입과 값이 같은지?
! = 값이 다른지?
! == 타입과 값이 다른지?
5 === 5; //true
5 ==='5'; //false
//유일하게 자기 자신과 일치하지 않는 값 NaN(Not a Number)
NaN === NaN //false
Number.isNaN(NaN); //true
Number.isNaN(1+undefined); //true
//양의 0, 음의 0 비교하면 true 반환
0 ===-0; //true
0 ==-0; //true
//object.is 메소드를 사용하면 더 정확한 비교 결과를 알 수 있다
-0 === +0; //true
Object.is(-0,+0); //false
NaN === NaN; //false
Object.is(NaN,NaN); //true
아래는 지양하는 패턴이기에 참고만 하기!
'0'== ''; //false
0==''; //true
0 =='0'; //true
false == 'false'; //false
false == '0'; //true
false == null; //false
false == undefined; //true
삼항 조건 연산자
//조건식? 조건식이 true일 때 반환값 : false일 때 반환값
var result = score>=60? 'pass':'fail';
논리 연산자
|| (논리합)OR
&& (논리곱)AND
! (부정)NOT
부정 연산자는 언제나 불리언 값을 반환
만약, 피연산자가 불리언 값이 아니면 암묵적 타입 변환
!0; //true
!'Hello'; //false
지수 연산자
2**2; //4
2**0 //1
Math.pow(2,2); //4
Math.pow(2,0) //1
//음수는 괄호로 묶어줘야 함
-5 ** 2 error
(-5)**2 //25
8장 제어문
블록문은 0개 이상의 문을 중괄호{}로 묶은 것
블록문은 종료를 의미하는 자체 종결성을 갖기 때문에 블록문 끝에는 세미콜론을 붙이지 않는다!
**if,else문**
var result ;
if(x%2){
result ='홀수';
}
else{
result = '짝수';
}
**삼항 조건 연산자**
var result = x%2? '홀수' : '짝수';
Switch문
switch(x) {
case 'value1': // if (x == 'value1')
break;
case 'value2': // if (x == 'value2')
;break;
default:
break;
}
do-while문
do안의 코드를 먼저 한번 실행하고 while 조건에 따라 추가로 실행된다.
var count = 0;
//count가 3보다 작을 때까지 계속 반복 실행한다.
do{
console.log(count); //0 1 2
count++;
}while(count < 3);
break문
for,while,do…while 등 반복문에서 탈출하기 위해 사용된다.
**레이블문, 반복문, switch문 등의 코드 블록 외에 break문을 사용하게 되면 Error가 발생한다.
var count = 0;
while(true){
console.log(count);
count++;
if(count ==3) break;
} //0 1 2
continue문
반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실제 흐름을 이동시킨다.
for(a = 1; a <= 10; a++){
if(a == 7){
continue;
}
...
}
9장 타입 변환과 단축 평가
1. 암묵적 타입 변환
개발자 의도와 상관없이 코드의 문맥을 고려해 암묵적으로 변환한 것
문자열 타입으로 변환
`1 +1 = ${1 + 1}` //"1 + 1 = 2"
0 + '' // "0"
1 + '' // "1"
-1 + '' // "-1"
true + '' //"true"
false + '' //"false"
숫자 타입으로 변환
1-'1' //0
1 * '10' //10
숫자 타입으로 변환할 수 없는 경우 -> NaN
1/'one'; //NaN
문자열 타입
+'' //0
+'0'; //0
+'1'; //1
+'string'; //NaN
불리언 타입
+true; //1
+false; //0
null 타입
+null //0
불리언 타입으로 변환
자바스크립트에서는 불리언 타입이 아닌 값을 Truthy값 또는 Falsy 값으로 구분한다.
if ('') console.log('1'); falsy값
if (true) console.log('2'); truthy값
if (0) console.log('3'); falsy값
if ('str') console.log('4'); truthy값
if (null) console.log('5'); falsy값
//2 4 출력
==========================================
//false로 평가되는 Falsy 값
false undefined null 0,-0 NaN ''(빈 문자열)
2. 명시적 타입 변환
개발자 의도에 따라 명시적으로 타입을 변경한 것
문자열 타입으로 변환
1번째 방법-String()
String(1); "1"
String(NaN); "NaN"
String(true); //"true"
String(false); //"false"
2번째 방법-toString()
(1).toString(); //"1"
(NaN).toString(); //"NaN"
(true).toString(); //"true"
(false).toString(); //"false"
3번째 방법-문자열 연결 연산자 사용하기
1+''; //"1"
NaN+''; //"NaN"
true+''; //"true"
false+''; //"false"
숫자 타입으로 변환
1번째 방법-Number()
Number('1'); //1
Number(true); //1
Number(false); //0
2번째 방법-parseInt()
parseInt('1'); //1
parseFloat('10.53'); //10.53
3번째 방법- +산술 연산자 사용
+'0'; //0
+'10.53'; //10.53
+true //1
+false //0
4번째 방법- *산술 연산자 사용
'0'*1; //0
'10.53'*1; //10.53
true*1 //1
false*1 //0
불리언 타입으로 변환
1번째 방법-Boolean 생성자 함수
Boolean(1); //true
Boolean(''); //false
Boolean('false'); //true
2번째 방법- !부정 논리연산자 두번 사용하기
!!'x'; //true
!!''; //false
!!'false'; //true
10장 객체 리터럴
객체란?
자바스크립트는 객체 기반 프로그래밍 언어
자바스크립트의 거의 모든 구성요소가 객체이다
원시 타입은 하나의 값만 나타내는 반면, 객체 타입은 다양한 타입의 값을 구성한 복합적인 구조
원시 타입 객체 타입
| 값 | 하나의 값(원시 값) | 다양한 값 |
| 변경여부 | 불가능 | 가능 |
var counter={
num:0, //프로퍼티 : 객체의 상태를 나타내는 값
//프로퍼티가 함수일 경우
increase: function (){ //메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작
this.num++;
}
}
객체 생성, 프로퍼티
객체 리터럴을 사용하여 객체를 생성하는 방법이 있다. {}
var person = {
name: 'Lee', //프로퍼티 키는 name, 프로퍼티 값은 Lee
name:'Kim' //중복 선언하면 나중 선언한 프로퍼티가 덮어쓴다
'name': 'Lee' (x)
last-name: 'Lee' (x)
'': '' //빈 문자열도 키로 사용할 수 있지만 키로서 의미가 없으므로 권장 X
sayHello:function(){
console.log(`Hello : My name is ${this.name}`);
}
}
*코드 중괄호는 코드 블록을 의지하지 않는다.
객체 동적 생성
var obj = {};
var key = 'hello';
obj[key] = 'world';
프로퍼티 키는 암묵적 타입 변환을 통해서도 문자열이 된다
var foo = {
0:1,
1:2,
2:3
};
console.log(foo); //{0:1,2:3,2:3}
프로퍼티 접근
마침표 표기법(.)
대괄호 표기법([…])
var person = {
name: 'Lee'
};
console.log(person.name);
console.log(person['name']); //꼭 작은 따옴표로 감싸야 함
console.log(person.age); //undefined
프로퍼티 동적생성,삭제
var person = {
name: 'Lee'
};
person.age = 20; //age 프로퍼티가 존재하지 않을 땐 동적으로 생성되고 값 할당됨
console.log(person); //{name:"Lee",age:20}
delete person.age; //삭제됨
11장 원시 값과 객체의 비교
원시값을 변수에 할당하면 변수에는 실제 값이 저장된다.
객체를 변수에 할당하면 변수에는 참조 값이 저장된다.
“원시 값은 변경 불가” 라는 말은 원시 값 자체를 변경할 수 없다는 것일 뿐, 변수 값을 변경할 수 없다는 건 아님.
원시 값을 저장하려면 확보해야 하는 메모리 공간의 크기를 결정하는데 공간의 크기는 몇 개의 문자로 이루어졌는지에 따라 달라짐.
var str = 'Hello'; //str이 Hello를 가리키다가
str = 'world'; //world를 가리키게 되는데 Hello도 아직 메모리에 존재함
문자열은 배열과 유사하게 인텍스를 사용하여 각 문자에 접근할 수 있지만
원시 값이므로 변겨알 수는 없음
var str = 'string';
str[0] = 'S'; //에러가 발생하진 않음
console.log(str); //string
객체
객체는 프로퍼티 객체가 정해져 있지 않고 동적으로 추가, 삭제 될 수 있음
값에 의한 전달
pass by value : 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다.
⇒ 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되는 것
(전달된 메모리 주소를 통해 메모리 공간에 접근하면 값 참조 가능)
var score = 80;
var copy = score;
console.log(score); //80
console.log(copy); //80
score = 100;
console.log(score); //100
console.log(copy); //? 80
참조에 의한 전달
pass by reference : 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다.
두 개의 식별자가 하나의 객체를 공유하는 것
var person = {
name:'Lee'
};
var copy = person; //참조 값 복사(=얕은 복사)
위 두 가지의 전달은 식별자가 기억하는 메모리 공간에 저장되어 있는 값을 복사해서 전달한다는 면에서 같다.
변수에 저장되어 있는 값이 원시 값인지, 참조 값인지의 차이만 O.
(포인터가 없기 때문에 C언어의 참조에 의한 전달과는 다름)
'Javascript' 카테고리의 다른 글
| 모던 자바스크립트 딥다이브 13-14장 (3) | 2024.11.30 |
|---|---|
| 모던 자바스크립트 딥다이브 12장 (1) | 2024.10.25 |
| 모던 자바스크립트 딥다이브 1장 - 6장 (1) | 2024.10.25 |
