기술면접_JavaScript_11_13
## 프론트엔드 개발자 입문(비동기처리) | Callback,Promise,Async,Await ### Contents 1...
//1. String concentration
console.log('my' + 'cat')
console.log('1' + 2)
console.log('elli\'s book')
console.log('elli\'s \n book')
console.log('elli\'s \t book')
//2. Numeric operator
console.log(5 % 2)
console.log(2 ** 3) //exponentiation
//3. Increment and decrement operator
let counter = 2;
const preIncrement = ++counter;
/*
preIncrement : counter에 +1후 preIncrement변수에 값 할당
postIncrement : postIncrement변수에 값 할당 후 counter에 +1
++, -- 동일
*/
//4. Assignment operators
let x = 3;
x += y; // x = x+y;
//5. comparison operators
console.log(10 < 6)
//6. Logical operators : || (or), && (and), ! (not)
const value1 = false;
const value2 = 4 < 2;
function check() {
for (let i = 0; i < 10; i++>)
{
console.log('wasting time');
}
return true;
}
console.log(`or : ${value1 || value2 || check()}`);
console.log(`or : ${value1 || value2 || check()}`);
/*
or
출력결과 : true
주의할 점 : or연산자는 첫 번째 조건이 true인 경우, 뒤에 조건은 더 보지 않고 tru출력. 따라서 check()처럼 비교적 연산량이 많은 조건은 뒤에 배치하는 것이 효율적임
and
출력결과 : false
주의할 점 : and연산자는 첫 번째 조건이 false인 경우, 뒤에 조건은 더 보지 않고 false출력.따라서 check()처럼 비교적 연산량이 많은 조건은 뒤에 배치하는 것이 효율적임
*/
//7. Eaulity
const stringFive = '5';
const numberFive = 5;
console.log(stringFive == numberFive)
console.log(stringFive +== numberFive)
/*
==
출력결과 : true
이유 : ==는 lose eqauplity로 type conversion을 통해 검사하기 때문에 stirng 5와 number 5가 같다는 결과출력
===
출력결과 : false
이유 : ===는 strict eaulity로 type conversion을 사용하기 않기 때문에 값과 type을 모두 확인
주의할 점 : 동일한 single item으로 이루어진 두 개의 object가 존재하더라도 서로 다른 메모리 주소를 참조하고 있기 때문에 obejct equlity는 false로 출력
*/
//1. if
const name = 'ellie';
if (name=='ellie'); {
console.log('Welcome, Ellie!');}
else if (name == 'coder') {
console.log('You are amazing coder');}
else {
console.log('unknown')}
//2. Teranry operator (if문을 보다 간단하게 사용)
console.log(name === 'ellie' ? 'yes':'no')
//true인 경우 왼쪽 값 출력 / false인 경우 오른쪽 값 출력
//3. Switch operator
const browser = 'IE';
switch (browser){
case 'IE' :
console.log('go away!');
break;
case 'Chrome' :
console.log('Chrome');
break;
case 'Firefox':
console.log('Firefox');
breakl
}
/*
switch문과 if문의 차이 :
if문은 if를 만날 때 마다 조건문을 만족하는지 확인하기 위해 메모리상에서 명령어를 읽어옴
switch문은 처음 입력값을 확인할 때에만 메모리상에서 명령어를 읽어옴
즉, 조건이 많은 경우에는 switch문을 사용하는 것이 if문 대비 cpu를 효율적으로 사용하게 함
*/
//4. while loop
//조건문이 맞는 경우에만 실행하고자 할 때 사용
let i = 3;
while (i > 0) {
console.log(`while: ${i}`)
i--;
}
//5. do while loop
//블럭 먼저 실행 후 조건이 맞는지 확인
let i = 3;
do {
console.log(`while: ${i}`)
i--;
} while (i > 0);
//6. for loop (begin; consition; step;)
for (i=3; i>0; i=i-2){
console.log('inline varable declaratoin')
}
Function이란?
Function delcaration
function name(param1, param2) {body... return;}
//function예시
function print(message){
console.log(`message : ${message}`)
}
print('Hello World!')
//동일한 function을 TypeScript로 작성(param or return type명시필요)
function log(message : string){
console.log(`message : ${message}`)
}
log('Hello World!')
Parameters
//1. object parameter에 function을 적용하였을 때, 출력과정
function changeName(obj) {
obj.name = 'coder';
}
const ellie = {
name : 'ellie',
age : '20'
}
changeName(ellie)
console.log(ellie)
/*
과정 :
1. name을 'coder'로 변경하는 function생성
2. ellie parameter생성
3. ellie는 object parameter이므로 메모리에는 single items(name,age)의 주소를 참조하는 reference가 저장됨
4. ellie parameter에 function적용
5. reference중 name의 데이터 값 변경
*/
//2. default parameters
//from = 'unknown' : 사용자가 from parameter값을 지정하지 않은 경우, 오류가 아닌 unkown대체출력
function showMessage(message, from = 'unkown'){
console.log(`${message} by ${from}`)
}
showMessage(Hi!);
//3. rest parameters
// ... : 배열형태의 parameter를 받음
function printAll(...all){
for (let i = 0; i < arg.length; i++) {
console.log(arg[i])
}
}
print All('dream', 'coding', 'ellie')
Function expression
//anonymous function
const print = function() {
console.log('print')
}
print();
//named function
const print = function print() {
console.log('print')
}
print();
Callback function
function randomQuiz(answer, printYes, printNo){
if (answer == 'Love you') {
printYes();
} else {
printNo();
}
const printYes = function() {
console.log('Yes!');
};
const printNo = function() {
console.log('No!');
};
/*
과정
1. 정답, 정답일 경우 실행할 함수, 정답이 아닐 경우 실행할 함수를 정의
2. randomQuiz function의 answer parameter로 Love you가 입력 될 경우, printYes함수출력
3. randomQuiz function의 answer parameter로 Love you가 입력되지 않을 경우, printNo함수출력
*/
Arrow Function
//function expression을 통해 작성된 함수
const simplePrint = function() {
console.log('simplePrint!')
};
//Arrow function을 통해 작성된 함수
const simplePrint = () => console.log('simplePrint!');
}
//bad
function upgradeUser(user){
if(user.point > 10){
//upgrade logic
}
}
//good
function upgradeUser(user){
if(user.point > 10){
return
}
//upgrade logic
}
Avenco comes with a built-in contact form.