[JavaScript] 바닐라 JS로 크롬 앱 만들기 (2) - argument, function, return, typeof, parseInt, isNaN, condition, operator

2021.09.24 > JS #2.7~#2.16 수강
2021.10.19 > 복습
2021.10.22 > 정리

#2.7~#2.10 - Functions

특정 코드를 캡슐화해서 계속 울궈먹을 수 있다.
내부에서 외부로 실행된다.

argument

• function을 실행하는동안 "어떤정보"를 function에 보낼 수 있는 방법
• 복수도 가능
  
  

function

외부에서 data보내기

functionName("argument1", "argument2");

내부에서 data받기

function functionName(variableName1, variableName2) {};

여기서 포인트는, 내부 function의 variableName(변수명)은 무엇이 되든 상관없다.
단지, 외부 function의 argument가 복수일 경우, 변수의 순서만 유의하자.
그리고 내부 function의 variableName은 오직 내부에서만 존재한다.

example(예제)

function functionName(nameOfPerson) {
    console.log("Hello, this is " + nameOfPerson)
}

functionName("India");
functionName("Dal");
functionName("May");

결과창

#2.11~#2.12 - Returns

외부-->내부-->외부 : function() 함수가 외부와 소통하는 방법
외부에서 받은 data값을 가지고 내부에서 외부로 결과값을 도출하자.

작성법

function functionName(variableName) {
return variableName};

const result = (argument);

외부 function의 argument를 꼭 변수로 설정해주자.
단순히 내부 function에서 console.log 로 하는 것과는 아래와 같은 차이가 있다.

• console창에서만 값을 확인 할 수 있던 것과는 달리, 결과값을 화면에 출력가능
• 단, 한 번 return을 해버리면 해당 function은 끝이 난다.
  
  

example(예제)

function C(a, b) {
    return a + b
};

const D = C(1, 2);

console.log(D);

• const D 의 function 을 본다
• C 의 1, 2 값을 그대로 function C 의 a, b 값에 대입한다.
• 즉, a+b = 1+2 = 3 이며, 해당 결과값이 return 을 통해 도출된다.
• 즉, C(1, 2) = 3 이며, const D = 3 이다.
• console 창에서 해당 결과값을 보고 싶다면, 마지막 줄 코드를 꼭 빼먹지 말자.

결과창

#2.13~#2.16 - Conditionals(조건문)

if(=true) 인지 else(=false) 인지 알려줌
뭔가를 확인해야할 때 사용할 수 있다.
else 는 필수가 아닌 선택이다.

typeof ~

variable앞에 붙여서 variable의 type을 확인할 때 사용

parseInt()

• variable의 type을 변경해주는 function
• string 을 number 로 변환한다.
  "5" --> 5
  
  

isNaN() = is not a number

• boolean(true or false) 값을 보여주는 function
• true 일 경우, 숫자가 아닌 스트링이다.
• false 일 경우, 숫자다.
  
  

condition

if & else

• condition 은 boolean(true or false) 값을 보여주는 function 이어야 한다.
• true 면, if 에 해당하는 값이 나타난다.
• false 면, else 에 해당하는 값이 나타난다.

if(condition){
    /// condition === true
} else {
    // condition === false
}

else if

조건이 하나보다 많을때 활용

operator(연산자)

• && (and) --> 조건값 안에 모든 조건들이 true 여야함
• || (or) --> 조건값 둘 중 하나만 true 면 됨
• === (일치) --> 같다는 뜻
• == --> data type(string or number)이 확실할경우는 이걸로 써주자...
• !== (불일치) --> 같지 않다는 뜻
• % --> 나누기
  
  

example(예제)

관련URL https://webzz.tistory.com/62

---