ECMA스크립트(ECMAScript, 또는 ES)란, Ecmar International이 ECMA-262 기술 규격에 따라 정의하고 있는
표준화된 스크립트 프로그래밍 언어를 말한다. 자바스크립트를 표준화하기 위해 만들어졌다. 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다. ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다.
💡 우리는ES5와ES6만 제대로 알면 된다!
Javascript
ECMAScript 즉, 최신의 표준화된 스크립트로 작업한다. 어떠한 라이브러리나 프레임워크를 사용하지않은 순수 js를 vanilla javascript라고도 부른다.
📌 데이터 타입 확인 & 함수 모듈화
데이터 타입 확인
typeof 뒤에 오는 데이터의 타입을 출력한다. 데이터 타입의 종류에는 string / number / boolean / undefined / null 이 있다.
let a = 2;
//a = a + 1;
a += 1;
console.log(a); //3
a에 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
조건식 ? '참' : '거짓'
a ? 'true' : false
// a가 true 이면 앞의 값, false 이면 뒤의 값을 입력함
:을 기준으로, 조건식이true이면앞에 위치한 값을, 조건식이false면뒤에 위치한 값을 반환한다.
조건문에 따라 실행 블록을 결정할 때, if문을 사용할 수 있지만 연산자의 형태로 간편하게 사용할 수 있다. 삼항연산자와 if문은 서로 대체 할 수 있다.
05. 조건문 if & Switch
5.1 if else문
If statement
if(조건문1){
참일 때 실행문
}else if(조건문2){
조건문1에 대해서는 false
조건문2에 대해서는 true 일 때 실행
}else{
조건문1,2에 대해 모두 false 일 때 실행
}
-------------------------------------
const a = random()
if (a === 0) {
console.log('a is 0')
} else if (a === 2) {
console.log('a is 2')
} else if (a ===4) {
console.log('a is 4')
} else {
console.log('rest...')
}
💡 Math.floor() 소수점 이하는 전부 버림 Math.random : 랜덤 값을 변환 (0~1 사이)
💡if문을 삼항연산자로 변환해보자.
//if문
let x = 2;
let result;
if(x % 2) result = '홀수';
else result = '짝수';
console.log(kind); //짝수
//삼항연산자로 변환
let x = 2;
//0은 false로 취급된다.
let reusult = x % 2 ? '홀수' : '짝수' ;
console.log(result); //짝수
5.2 switch 문
switch statement 하나의 데이터가 무엇인지 딱 떨어지는 조건문을 작성할때는 , If문보다Switch문이 더 효율적임 Switch문의 (a)에 해당하는 값이case에 있을 경우, 그case를 실행함. (단,break문을 쓰지 않으면 이어서다 실행됨)
switch(변수){
case 0 :
실행문;
break;
case 2 :
실행문;
break;
case 4 :
실행문;
break;
default :
모두 해당되지않을 때의 실행문;
}
-------------------------------------------------------------------------------------
// 조건문 (Switch statement)
const a = random()
switch () {
case 0:
console.log('a is 0')
break
case 0:
console.log('a is 0')
break
case 0:
console.log('a is 0')
break
default:
console.log('rest...')
}
어떠한 값으로딱 떨어지는 변수값을 조건으로 갖을 때에는 if문보다 switch문의 가독성이 더 좋을 수 있다.
❗️ default === else 이다.
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로 반환되는 것.
