FASTCAMPUS ST-FE 3기
Part 3. JavaScript Essentials - Ch2. JS 시작하기
Javascript
ECMAScript 즉, 최신의 표준화된 스크립트로 작업한다.
어떠한 라이브러리나 프레임워크를 사용하지않은 순수 js를
vanilla javascript라고도 부른다.
01. 데이터 타입 확인
typeof
뒤에 오는 데이터의 타입을 출력한다.
데이터 타입의 종류에는
string / number / boolean / undefined / null 이 있다.
typeof '문자열' //string
typeof 숫자 //number
typeof true //boolean
typeof undefined //undefined
typeof null //object
typeof {} //object
typeof [] //objecttypeof의 경우 null, 객체, 배열 모두 object로 반환해준다.
때문에 좀 더 정확히 타입을 판별하기 위해
💡 타입을 판별해주는 함수를 만들어보자.
functoin getType(data){ return Object.prototype.toString.call(data); } console.log(getType(123)); //[object Number] console.log(getType(false)); //[object boolean] //[object]로 출력되는 것 자르기 functoin getType(data){ return Object.prototype.toString.call(data).slice(8, -1); } console.log(getType(123)); //Number console.log(getType(false)); //boolean
02. 산술, 할당 연산자
2.1 산술 연산자
Arithemic operator
사칙연산과 동일.
+ 덧셈
- 뺄셈
* 곱셉
/ 나눗셈
% 나머지
2.2 할당 연산자
= 좌항에 우항의 값을 대입시킨다.
let a = 2;
//a = a + 1;
a += 1;
console.log(a); //3a에 2를 대입한 뒤 +1의 산술을 실행하고
결과 값을 a에 다시 할당한다.
03. 비교, 논리 연산자
논리값(boolean)으로 결과값을 가진다.
3.1 비교 연산자
Comparion operator
=== 완전일치연산자 좌항과 우항의 값과 데이터형식이 같다.
!== 완전불일치연산자 좌항과 우항의 값과 데이터형식이 다르다.
== 동등연산자 좌항과 우항의 값이 같다.
!= 부동등연산자 좌항과 우항의 값이 다르다.
<,>, <=, >= 부등호연산자. 값의 크기로 비교.
💡 값을 비교해주는 함수를 만들어보자.
function isEqual (x,y){ return x == y; } console.log(isEqual(1,1)) //true console.log(isEqual(2,'2')) //false
3.2 논리 연산자
Logical operator
&& (and, 그리고) 피연산자의 값이 모두 true여야 true
|| (or, 또는) 피연산자의 값 중 하나만 true여도 true
! (not, 반대) 피연산자의 값을 부정
04. 삼항 연산자
Ternary operator
조건식 ? '참' : '거짓':을 기준으로,
조건식이 true이면 앞에 위치한 값을,
조건식이 false면 뒤에 위치한 값을 반환한다.
조건문에 따라 실행 블록을 결정할 때,
if문을 사용할 수 있지만 연산자의 형태로 간편하게 사용할 수 있다.
삼항연산자와 if문은 서로 대체 할 수 있다.
05. 조건문
5.1 if else문
If statement
if(조건문1){
참일 때 실행문
}else if(조건문2){
조건문1에 대해서는 false
조건문2에 대해서는 true 일 때 실행
}else{
조건문1,2에 대해 모두 false 일 때 실행
}💡 if문을 삼항연산자로 변환해보자.
//if문 var x = 2; var result; if(x % 2) result = '홀수'; else result = '짝수'; console.log(kind); //짝수 //삼항연산자로 변환 var x = 2; //0은 false로 취급된다. var reusult = x % 2 ? '홀수' : '짝수' ; console.log(result); //짝수
5.2 switch문
switch statement
특정한 데이터를 변수에 담아 전달하고
해당 데이터가 case에 해당되는 경우 실행시킨다.
주의해야할 점은 break를 걸지않으면 끝까지
모두 실행하는 fall through 현상이 발생될 수 있다.
switch(변수){
case 0 :
실행문;
break;
case 2 :
실행문;
break;
case 4 :
실행문;
break;
default :
모두 해당되지않을 때의 실행문;
}어떠한 값으로 딱 떨어지는 변수값을 조건으로 갖을 때에는
if문보다 switch문의 가독성이 더 좋을 수 있다.
07. 반복문 for
for statement
for (시작조건; 종료조건; 변화조건){
실행문;
}💡 li요소를 반복적으로 생성해서 추가해주기
const ulEl = document.querySelector('ul'); for(let i=0; i<3; i+=1){ const li = document.createElement('li'); //li요소를 만들어 변수에 담기 li.textContent = `list-${i+1}`; //li태그 안에 글자 삽입. 보간법으로 변수 참조 ulEl.appendChild(li); //ulEl안에 만들어둔 li요소들을 추가 }
세개정도
li를 생성하고, li 태그 안의 글자는 li-순번을 넣어서
ul요소안에 삽입해라
💡위의 예제에 짝수번째의 요소를 누르면 내용 console출력해주기
const ulEl = document.querySelector('ul'); for(let i=0; i<3; i+=1){ const li = document.createElement('li'); //li요소를 만들어 변수에 담기 li.textContent = `list-${i+1}`; //li태그 안에 글자 삽입. 보간법으로 변수 참조 if( (i+1) % 2 === 0 ){ li.addEventListener('click',function(){ console.log(li.textContent); }) } ulEl.appendChild(li); //ulEl안에 만들어둔 li요소들을 추가 }
08. 변수 유효범위
variable scope
변수가 유효하게 동작할 수 있는 특정 범위
블록레벨의 let, const
function scope(){
if(true){
const a = 123;
console.log(a); //123
}
}같은 코드 블록안에서 변수의 선언과 참조가 이뤄졌기에
값을 올바르게 참조하지만,
function scope(){
if(true){
const a = 123;
}
console.log(a); //undefined
}코드블록을 나와 참조된 경우 값을 불러오지못한다.
하지만 var의 경우 함수레벨의 유효범위를 갖는다.
함수레벨의 var
function scope(){
if(true){
var a = 123;
}
console.log(a); //123
}때문에 {}코드블록을 나와서도 값을 유효하게 참조한다.
이 때문에 의도하지않은 곳에서 변수가 남아있을 수 있고,
이는 메모리 누수로 이어질 수 있다.
때문에 일반적으로는 var보다 let, const을 사용하는 것이 좀 더 관리에 효과적이다.
09. 형 변환
Type conversion
데이터의 타입을 변경해주는 것.
Truthy (참 같은 값)
true, {}, [] , 1, 2 'false', -12, '3.14'...
한마디로, 존재한다고 보는 경우 1로 치환, truthy가 된다.
'false'는 falsy일 것 같지만, 문자데이터 안에서 특정 값을 갖기에
존재가 있는 1의 의미를 갖는다. 때문에 truthy로 반환되는 것.
Falsy (거짓 같은 값)
false, '', null, undefined, 0, -0, NaN
한마디로, 비어있다고 보는 경우는 0으로 치환, falsy가 된다.
