[javascript] 공부 1일차

1.변수의 자동 초기화

js에서는 변수를

선언할 때에 직접 초기화 해 주지 않더라도 자동으로 초기화가 되어진다. 따라서 직접 초기화를 하지 않더라도 변수값을 참조할때에 나오는 쓰레기값이 없어 해당 위험으로 부터 안전하다.

var score;
console.log(score);

---

2. 변수 호이스팅

변수를 선언하기 이전에 미리 사용하고 나중에 해당 변수를 선언한다 하더라도, 변수 선언이 코드의 선두로 끌어 올려진듯 실행되는 것을 변수 호이스팅이라고 한다.

변수 호이스팅의 이유는 변수 선언 소스코드가 런타임이 아니라 그 이전단계에 먼저 실행이 되기 때문이다.

즉, 변수선언은 소스코드의 어느위치에 있던지 상관없이 가장 먼저 실행되기 때문에 위치가 중요하지 않다.

 

하지만 이와 별개로 변수 값 할당은 런타임시점에서 재할당되는것이기 때문에 선언하는 위치에 따라 바뀐다.

console.log(score);

var score=80;

console.log(score);

---

3. 세미콜론 자동 삽입 기능

자바스크립트는 세미콜론(;)을 붙이지 않더라도 세미콜론 자동 삽입 기능(ASI)이 암묵적으로 수행되기 때문에 붙이지 않아도 동작한다. 하지만 세미콜론을 붙이지 않아 발생하는 코드 이해오류가 종종 발생한다.

function test(){
	return 
    {}
}

해당 코드는 개발자의 예측대로 실행되지 않을 수도 있다. 

개발자는 return; {} 로 생각하고 작성한 코드를, ASI는 return {};로 인식하고 읽어들이기 때문이다. 

따라서 필자는 자바스크립트가 ASI를 지원하고 있다고 하더라도,

왠만한 경우에는 그냥 세미콜론을 사용하는 것이 좋다고 생각된다. 

 

---

 

4.대소문자를 구별함

javascript는 대소문자를 구별하기 때문에 알맞게 적어주지 않으면 오류가 발생한다.

var x=nan;

해당 변수에 NaN(산술 연산 불가,not-a-number)대신 nan을 대입하면 

ReferenceError: nan is not defined 오류가 발생한다.

 

---

 

5.문자열을 원시 타입으로 표현함

자바스크립트의 문자열은 원시 타입으로 설정되어, 한번 선언이 된 이후에 변경이 불가능하다.

var x='first sentence';
console.log(x);
x='second sentence'
console.log(x);

해당 코드를 실행시키면 앞서 말한대로 변경이 불가능하여 처음 x의 값이 출력될것이라고 생각할 것이다. 

하지만 실행하여 보면

값이 수정되어 있는것을 볼 수 있다. 그렇다면 변경불가라는 내용은 무슨의미인가?

메모리 영역에서 생각해보아야한다. 처음에 x에 주어진 'first sentence'라는 값이 메모리에 할당되어 x에 주어졌다. 이후에 주어지는 'second sentence'는 'first sentence'의 메모리에 그 내용이 바뀌어 다시 저장되는 것이 아니라 또 다른 새로운 메모리 공간에 할당되어 그 주소를 가르키도록 바뀌는 것이다. 

 

---

 

6.템플릿 리터럴

템플릿 리터럴은 새로운 문자열 표기법이다. 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등의 문자열 처리기능을 제공하고, 런타임에서는 일반 문자열로 변환되어 처리한다.

다른 문자열들이 작은따옴표(' ')와 큰따옴표(" ")를 사용하는 것과 달리 템플릿 리터럴은 백틱(` ` 숫자1 옆에 위치한 기호) 을 사용한다.

var x='일반 문자열은 줄바꿈을 사용하기 위해선 \n이스케이프 시퀀스를 사용 '

var y= `백틱 기호는
멀티라인을 지원하므로 
여러줄 작성이 가능하다`

템플릿 리터럴을 사용하는 이유는, html코드를 작성때에 태그들을 삽입해 코드를 작성하기 위해서 문자열은

var s='<ul>\n\t<li><a href="/">home</a></li>\n</ul>'; 

과 같이 한줄에 불편하게 사용해야 하지만, 템플릿 리터럴의 경우에는

var s=`<ul>
	<li><a href="/">home</a></li>
</ul>`;

이와 같이 편리하게 작성할 수 있기 때문이다.

 

---

7. 문자열의 표현식 삽입

 

문자열에 표현식을 삽입하기 위해서는 언제나 ${}로 표현식을 감싸서 사용해야 한다. 이후 표현식은 문자열로 타입이 강제로 변환되어 삽입된다. 표현식 삽입은 언제나 템플릿 리터럴에서만 사용하여야 한다. 문자열은 해당 표현식을 단순 문자열로 취급하기 때문이다.

console.log(`1+2=${1+2}`);

 

 

---

 

8.심볼(symbol) 타입

 

심볼은 다른값과 중복되지 않는 유일무이한 값이다. 주로 이름이 충돌할 위험이 없는 객체의 유일무이한 프로퍼티 키를 만들기 위해서 사용한다.

심볼값은 Symbol함수 호출을 통해서 생성된다. 생성된 심볼값은 외부에 노출되지 않고 중복되지 않는다.

var key= Symbol('key');
console.log(key);

var obj={};

obj[key]='value';
console.log(obj[key]);

 

---

9. 타입변환

 

•  암묵적 타입 변환(타입 강제 변환)

// 문자열 타입으로 변환
var num=10;
var str=x+' ';
' '+10;

//숫자 타입으로 변환
1-'2'; //-1
5*'10';	//50
5/'five'	//NaN

// boolean 타입으로 변환
//false, undefined, null, 0, -0, NaN,'' 이외에는 모두 참으로 여김

• 명시적 타입 변환(의도적인 변환)

/* 
	문자열로 변환하는 방법
*/
//String(자료형) 방법
String(1);
String(Infinity);
String(true);

// .toString() 방법 
(1).toString();
(true).toString();

// 문자열 연결연산자 활용
1+'';
true+'';

/*
	숫자 자료형으로 변환
*/
//Number 생성자 함수 사용
Number('0');
Number('10.345');
Number(true);

//parseInt(), parseFloat()사용
parseInt('1');
parseFloat('10.5');

// 단항 산술 연산자 활용
+'0';
+'-5';
+true;

// * 산술연산자  활용
'0' * 5;	//0
'-1' * 3	//-3
true * 50;  //50

 

---

10. 단축 평가

 

논리합(||), 논리곱(&&)의 평가 결과는 boolean 값이 아닐 수 있다.

'cat'&&'dog'

이 코드는 논리곱을 사용하였기 때문에, cat은 true로 평가되기 때문에 두번째 표현식도 확인하고 true false를 나눈다.  dog도 true로 평가되었기 때문에 Dog를 반환하게 된다.

논리합도 같은 논리로 작동한다.

'cat'||'dog'

이 코드의 경우도 cat부터 판단하는데, cat이 참이기 때문에 코드가 더이상 분석되지 않고 cat을 반환한다.

이처럼 논리연산의 결과를 결정하는 피연산자를 타입 변환없이 반환하는 것을 단축평가라고 한다.

한마디로, 평가도중 결과가 나온경우 나머지를 생략하고 해당 피연산자를 반환하는 것을 의미한다.

 

●단축 평가의 if  대체방법

하나의 조건이 참으로 평가되는 경우에는 논리곱을 사용하여 나타낼 수 있다.

아래의 코드의 if와 논리연산의 역할과 결과는 모두 같다.

var check='true';
var message='';

if(check) message='성공';

message=done && '성공';

반대로 하나의 조건이 거짓일 경우에는 논리합으로 나타낼 수 있다.

var check='false'
var message='';

message=check || '성공';

 

●변수가 null, undefined가 아닌지 확인하고 프로퍼티 참조할 떄

객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null이나 undefined일 경우에 참조하면 타입에러가 난다.

var test=null;
var value=test.value;

 위처럼 실행하면 TypeError가 발생한다. 단축 평가를 사용하면 이를 방지할 수 있다.

var test=null;

var value = test && test.value;

 

●함수 매개변수 기본값 설정

함수를 인수를 전달하지 않고 호출하게 되면 undefined가 할당된다. 이를 방지하기 위해 단축 평가를 사용하여 매개변수의 초기값을 수정하면 에러를 방지할 수 있다.

function setDefault(str){
	str=str || '';
    return str.length;
}

 

---

 

11.옵셔널 체이닝 연산자

 

옵셔널 체이닝 연산자( ?. ) 는 좌항의 피연산자가 null이나 undefined일 경우에는 undefined를 반환하고, 아닐경우에는 우항의 프로퍼티 참조를 이어간다.

var test='';

var length = test ?. test.length;