Daye Blog

기술면접_JavaScript_04_05

기술면접_JavaScript_04_05


코딩의 기본 | Operator,Function

Contents

  1. Operator(type/if/for/loop)
  2. Function
  • 드림코딩 유투브 채널의 JavaScript 기초강의 내용을 바탕으로 정리하는 포스팅입니다.
  • 영상에서 언급되지 않은 내용이 포함되어 있음
  • Tutorial Video_04
  • Tutorial Video_05

:bell: Operator

Click to view operator types
//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로 출력
*/

Click to view if/ for/ loop operator
//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')
}


:bell: Function

Function이란?

  • 프로그램에서 필수적인 Building block
  • 여러번 재 사용이 가능한 SubProgram
  • 값을 계산하거나 특정 Task 수행

Function delcaration

  • 형식 :
    function name(param1, param2) {body... return;}
    • return이 작성되지 않은 경우 = return undefined
  • function은 가능한 한 가지의 기능만 하도록 작성
  • function name은 가능한 동사로 지정
//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

  • premitive parameter : passed by value
  • object parameter : passed by reference
  • default parameters : 사용자가 param을 입력하지 않았을 때, 대체값(added in ES6)
  • rest parameters : 배열형태(added in ES6)

참고자료

//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 : function에 이름을 지정하지 않은 것 (함수를 선언함과 동시에 변수에 할당)
  • named function : function에 이름을 지정한 것
//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 exprression대비 함수를 간결하게 만들어 줌
  • Arrow Fucntion은 anonymouse function임
//function expression을 통해 작성된 함수
const simplePrint = function() {
  console.log('simplePrint!')
};

//Arrow function을 통해 작성된 함수
const simplePrint = () => console.log('simplePrint!');
}

Appendix

  1. Early return, early exit
    조건이 맞지 않는 경우, 빠르게 return할 수 있도록 코드작성
//bad
function upgradeUser(user){
  if(user.point > 10){
    //upgrade logic
  }
}

//good
function upgradeUser(user){
  if(user.point > 10){
    return
  }
  //upgrade logic
}
기술면접_JavaScript_04_05
Prev post

React Native Study03_Navigation

Next post

기술면접_JavaScript_06

기술면접_JavaScript_04_05

Get in touch

Avenco comes with a built-in contact form.