[JS/Node] 기초 - 변수, 타입, 함수, 조건문

잘 작동하는 소프트웨어를 만들기 위해서 목적에 맞는, 간결한 코드를 바르게 작성하기

변수 명명 규칙들

화살표 함수 - 참고 설명

변수 Variable

1. 프로그래밍(Programming) = 데이터 처리를 하는 것(Data processing)
2. 변수 : 보관함에 데이터를 편리하게 저장하고 꺼내쓰는 것. 이름이 붙은 값
3. 변수의 선언(declaration) : 보관함 확보, 선언은 한번만 가능

let 변수;

4. 값의 할당(assignment) : =가 "같다"라는 의미가 아니라 할당연산자, 보관함에 데이터 저장

num = num+1; 
// num에 num+1 값 할당

5. 선언, 할당 동시에

let name = 'kim';

6. 표현식(expression) : 변수와 연산을 이용한 식.

let pi =3.14;
let radius = 5;
let areaOfCircle = pi * radius * radius;

7. 변수 이름 : 공백사용 불가. 카멜케이스 표기법

console.log(~) : ~를 출력 

타입

1. 타입 : 변수에 할당할 수 있는 형태(숫자, 문자)
2. 원시 자료형 : 변수에 값(value)자체가 담김

   string(문자열), number(숫자), boolean(true/false), undefined(변수에 값이 없는 경우)

내용 참조 1

• Number
  숫자 표현, 산술 연산에 사용되는 데이터 타입.
  +, _, *, /의 산술연산이 가능하며 Math라는 내장객체를 이용하여 수학함수를 이용한 결과를 얻을 수도 있습니다.

  • Math.abs(), Math.ceil(), Math.round(), Math.floor(), Math.min(), Math.max(), Math.sqrt()
  • 거듭제곱 구하는 방법 3가지
    Math.pow(base: 밑, exponent: 지수), a*a, a**(지수)

• Not a Number :: NaN 과 isNan()
  문자열 -> 숫자형으로 데이터형태 변환시, 문자열이 숫자를 포함하지 않을경우 자바스크립트는 Not a Number의 약자인 NaN을 리턴.

• String
  문자열을 표현하는데 사용되는 데이터 타입이 바로 string입니다.

• undefined 와 Null(값 없음)

  • undefined는 변수가 참조하는 객체를 아직 지정하지 않았다. 선언 후 할당X
    • 값을 할당하지 않은 변수
    • 메서드와 선언에서 변수가 할당받지 않은 경우
    • 함수가 값을 return 하지 않았을 때
  • null은 변수가 참조한는 객체가 없다. 선언 후 할당O(객체값이 없다.)
    • 의도적으로 비어있다.
    • 해당 변수가 어떤 객체도 가리키고 있지 않다.

typeof undefined // undefined
typeof null      // object

• Boolean : true와 false값을 가지는 논리 데이터타입

Boolean(null);      //false
Boolean(undefined);      //false
Boolean(NaN);      //false
Boolean('');      //false
Boolean(0);      //false
Boolean(1);      //true
Boolean('false');      //true
Boolean('true');      //true
Boolean('reference');      //true

3. 참조 자료형 : 보관함의 주소(reference)가 담김

   배열[], 객체{}, 함수(function(){})

• 배열 : 같은 타입이 여러개 섞임. 순서가 있다.

let fruits = ['banana', 'apple', 'pineapple'];

• 객체 : 다른 타입이 여러개 섞임. 폼에서 보는 형태.

let person = { name: 'Steve', age: 32, isStudent:true };

4. 타입마다 다른 속성, 메소드 있음
5. typeof : 특정 값의 타입을 확인

typeof 3
"number"

typeof '3'
"string"

typeof true
"boolean"

함수 Function

1. 함수

• 논리적인 일련의 작업을 하는 기능의 단위. 코드의 묶음. 입력과 출력간의 매핑.
• 지시사항의 묶음.
• 변수에 다른 값을 대입하며 기능은 반복적 실행되는 일에 적용 가능.
• 함수는 항상 출력값을 반환하며 종결. return문 사용 안하면 결과는 undefined.
• 자바스크립트는, 자신을 둘러싼 외부 함수의 최상위 레벨에 한해 중첩 함수 사용 가능
  • 중첩 함수 특징
    : 중첩 함수는 자신을 둘러싼 외부 함수의 인수와 지역 변수에 접근이 가능 함
    : 자신을 둘러싼 외부 함수의 바깥에서는 중첩 함수를 참조할 수 없음

function getTriangleArea(base, height){
    let triangleArea = (base * height) / 2;
    return triangleArea;
}
console.log(getTriangleArea(2,4)) // 4 출력

function getTriangleArea(base, height){
    let triangleArea = (base * height) / 2;
}
console.log(getTriangleArea(2,4)) // undefined 출력

2. 함수 선언 요소 : keyword, name, parameter(매개변수), body

   keyword name(parameter){body}

function cal(param1, param2){
    console.log(param1 + param2);
    return param1 * 10;
}

3. 함수 작동 원리 (함수의 결과값이 변수에 할당되어 담기는 과정)

• 함수의 선언 : 기능 작동하는 버튼 제작 (데이터보관함에 보관) . (func)
• 함수의 호출(call, invocation) : 언제든 버튼 사용 가능 . (func())
• 함수를 포함한 표현식의 평가
  : 함수 호출 > 보관함의 함수 조회 > 표현식의 값을 parameter에 대입하여 함수코드 순차적 실행 > 함수의 return하면 종결, 호출된 장소로 도달 > 함수의 호출 코드는 return 값이 됨

function cal(param1, param2){
    console.log(param1 + param2);
    return param1 * 10;
}
let result = cal(10,20); // 100 

4. 함수표현 3가지 : 선언식, 표현식, 화살표 함수

• 선언식 : 호이스팅 적용 O

  function getTriangleArea(base, height){
  let triangleArea = (base * height) / 2;
  return triangleArea;
  }

• 표현식 : 호이스팅 적용 X

  const getTriangleArea = function (base, height){
  let triangleArea = (base * height) / 2;
  return triangleArea;
  }

• 화살표 함수 : 호이스팅 적용 X

  const getTriangleArea = (base, height) ==>{
  let triangleArea = (base * height) / 2;
  return triangleArea;
  }

  • 화살표 함수에 return문만 있는 경우 생략가능 . 중괄호도 생략해야함. 소괄호 사용가능.
    const getTriangleArea = (base, height) ==> triangleArea = base height / 2;
    // 정상작동.
    const getTriangleArea = (base, height) ==> triangleArea = (base height / 2);
    // 정상작동.
    const getTriangleArea = (base, height) ==> triangleArea = {(base * height) / 2};
    // 비정상작동. undefined

  ---

  • 함수내 표현식이 2줄 이상인 경우, return,{중괄호}를 명시적으로 사용.

5. 매개변수(parameter), 전달인자(argument)

• 매개변수(parameter): 선언 시 적는 변수 함수.
  선언 시 입력에 따라 바뀔수 있음. let 등의 키워드 쓰지않고 사용 가능

  선언 : keyword name(parameter){body}

• 전달인자(argument): 호출 시 할당 값

  호출 : name(argument);

조건문 Conditional Expression

• 조건문 문제를 풀 때는 순서가 중요, 영역이 좁은 것 부터 걸러준다.

---

• if( a ){ 1 } if( b ){ 2 } 와 if( a ){ 1 } else { 2 } 차이
  • a (O,X) -> b (O,X) : 결과 따라 각각 (1,2),( ,2),(1, ),( , ) 실행
  • a (O) -> 1 실행
    a (X) -> 2 실행

1. 조건문 : 어떠한 조건을 판별하는 기준을 만드는 것.

• 조건식에 비교, 논리연산자 필요.
  • if( Boolean(변수) )
  • if( ~ || ~ || ~ || ~ ... )

2. 조건문 사용 방법

• 조건 : Boolean으로 결과나오는 비교구문

  if (조건1) {
  // 조건1이 true ->실행단계
  } else if (조건2) {
  // 조건1이 false, 조건2 true ->실행단계
  } else {
  // 조건1,조건2이 false ->실행단계
  }

3. 비교 연산자(comparison operator) : > , < , >=, <=, ===(같다), !==(다르다)

   3 > 5; // false
   'hello' === 'world'; // false

   • 비교 결과는 늘 Boolean

   ---

   • Boolean 타입 : true, false 값만 들어간다.

let isAdult = true; // 또는 false
let isStudent = false; // 또는 true

4. 논리 연산자(Logical Operator) : 두가지 조건이 한번에 적용될 때 사용.
   &&(AND연산자), ||(OR연산자), !(NOT연산자 : true, false 반전)

  true && true     // true
  true && false    // false
  false && false   // false
  

  true || true     // true
  true || false    // true
  false || false   // false
  

  !false       // true
  !(3>2)       // false
  !undefined   // true
  !'Hello'     // false
  

5. falsy값 6가지 : '' 0 난 fun

  // if문에서 false로 변환되므로, if 구문이 실행되지 않음.
  if ('')
  if (0)
  if (NaN)
  if (false)
  if (undefined)
  if (null)

- NaN, undefined, null 차이

• undefined : 선언은 되었으나 값이 할당 되지 않은 상태 (초기화 안하면 무조건 undefined 상태)

**var temp;**
typeof undefined      //undefined
Boolean(undefined) 에서는 false
Number(undefined) 에서는 NaN
String(undefined) 에서는 "undefined"

• null : 아무런 값도 나타내지 않는 특수한 값 (초기화 해주어야 null 상태가 존재 할 수 있음)

**var temp = null;**
typeof null      //obeject
Boolean(null) 에서는 false
Number(null) 에서는 0
String(null) 에서는 "null"

• NaN : JS에서만 존재하는 '숫자가 아니다'를 의미하는 값

undefined를 Number로 형변환 하면 NaN이 되지만, null을 변환하면 0이 나온다. 
NaN === NaN 은 false다. NaN을 검사하기 위해서는 `isNaN()` 이라는 전용함수를 사용해야한다.
typeof NaN      //Number
Boolean(NaN) 에서는 false
Number(NaN) 에서는 NaN
String(NaN) 에서는 "NaN"

모르는 것 검색 방법

• 문제의 요구 사항을 파악하여 키워드 작성

  • stackoverflow : 지식인 같은 사이트
  • mdn : 자바스크립트 바이블. 신뢰가능

  ---

  Ex. 변수를 문자열로 변경하는 객체 찾기

  • 1. mdn 검색 "mdn 변수 문자열 변경"
  • 2. 자연어 검색 "how to convert to string in javascript"
       : 검색 시 나온 키워드를 이용하여, mdn 키워드 검색하여 문제 좁혀나가기
  • 3. 에러 그대로 검색

문제를 풀다가 막힐 때

• mdn 검색 , 30분 이상 고민하지 말고 다른 문제 풀고 돌아오기, 처음부터 시작해보기,
  아고라 스테이츠 사용.
• 에러 메세지 분석

• 조건문에 대한 여러가지 예
• if if VS if else
  • if if : 각각 독립조건 , if else : 조건하나.