Javascript(1) - 변수, 함수, 조건문

개발빼-엠·2021년 4월 10일
0

Javascript

목록 보기
1/10
post-thumbnail

변수와 함수, 조건문의 기초에 대해 학습했고 배운것을 활용해 문제를 풀어보는 시간을 가졌습니다.

<변수>

-변수에 대하여
-변수의 사용
-변수명 규칙
-변수의 타입

-변수에 대하여

데이터 보관함(메모리)이 있고 보관함의 크기는 동일하다고 가정해봅니다.
이때 각 보관함의 이름이 변수 이며 이름을 통해 데이터를 사용합니다(재사용).
변수의 선언 방식은 let 입니다.
ex) let 변수명

-변수의 사용

  • 보관함 확보 - 선언(declaration)
ex) let age;
  • 보관함에 데이터 저장 - 할당(assignment)
ex) age = 12;

*참고 : 여기서의 =(equal)의 의미는 같다,동일하다의 수학적 의미가 아닌 12라는값이 age안에 들어간다. 즉, age에 12가 들어있다는 의미로 쓰여집니다.

  • 선언과 할당을 동시에 작성
ex) let name = 'kim'; 

-변수명 규칙

  1. 변수명에는 공백이 들어갈수 없습니다. 대신 카멜케이스로 작성합니다.
ex) one two(X) oneTwo(O)
  1. 한번 선언했던 변수를 다시 사용할 때는 let을 쓰지 않습니다.

-변수의 타입

  1. 숫자(number)
    따옴표를 사용하지 않습니다.
ex) '24'(X) 24(O)
  1. 문자열(string)
    따옴표를 사용합니다.
ex) 'hello'(O) hello(X)
  1. 불리언(boolean)
    참과 거짓을 나눕니다. 따옴표를 사용하지 않습니다.
    ---위의 타입이 섞인 타입도 있습니다.(자료형)---
  2. 배열
    문자열이 여러개 섞여있는 순서가 있는 집합입니다.
  3. 객체
    숫자,문자열,불리언이 섞여있는 형태입니다.
    *그외에 undefined,함수도 타입입니다.

<함수>

-함수에 대하여
-함수 선언 방식
-함수의 호출

-함수에 대하여

  • 함수는 입력(input)을 받아 출력(output)을 하는 하나의 작은 기능 단위 입니다.
    입력에 따라 그에 걸맞는 작업을하며, 논리적인 일련의 작업을 합니다.
    어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이기도 합니다.

  • 선언(declaration)을 하여 함수는 특별한 공간에 보관이 되고 호출(call,invocation)을 통해 언제든 다시 사용할 수 있습니다.

  • "입력 -> 함수(return) -> 출력"
    함수가 실행 되다 return을 만나면 return문에 있는 값이 반환이 되고 동시에 함수가 종료됩니다.
    return이 사용되지 않았다면 undefined(정의되지않음)타입을 반환합니다.

-함수 선언 방식

함수 선언 방식에는 함수선언식,함수표현식,화살표함수가 있습니다.
공통적으로 함수를 선언하는 방법입니다.
예를들어, 사각형의 넓이를 구하는 함수로 각각 어떤 차이가 있는지 보겠습니다.

입력값은 소괄호 안에 있는 width와 height입니다.
이 입력값을 함수내부에서 활용할 수 있다.
함수바깥으로 결과를 가지고 오려면 return을 해주어야 합니다.

함수선언식
function getSqureArea(width,height) {
   let squreArea = width * height;
   return squreArea;
 }

함수표현식은 가장먼저 변수를 선언해주고, 그 변수에 익명함수를 할당해주는 방식입니다. 중괄호 안에 들어갈 내용은 함수선언식과 동일합니다.

함수표현식
let getSqureArea = function (width,height) {
    let squreArea = width * height;
    return squreArea;
 }

화살표함수는 함수표현식을 기본으로 하기 때문에 변수를 먼저 선언해주고, 그 변수에 function키워드를 화살표(=>)로 축약해서 표시한 익명함수를 똑같이 할당해주는 방식입니다.

화살표함수
let getSqureArea = (width,height) => {
	let squreArea = width * height;
    	return squreArea;
}

화살표함수에는 몇가지의 특징이 있습니다.
화살표함수가 한 줄일 경우에는 return과 중괄호{}(curly bracket)를 생략할 수 있습니다. 두가지(return과 중괄호) 모두 생략해야 정상적으로 작동합니다.
단, 소괄호()를 쓰게되면 return을 쓰지 않아도 ()안의 코드를 리턴해줍니다.

화살표함수의 코드가 2줄 이상일 경우에는 return과 중괄호를 써주는 것이 명시적입니다.
예시를 통해 알아보겠습니다.

let getSqureArea = (width * height) => width * height (정상작동)
let getSqrueArea = (width * height) => (width * height) (정상작동)
let getSqureArea = (width * height) => {width * height} (정상작동X,undefined리턴)

-함수의 호출

지금까지는 함수를 선언하는 방법에 대해 공부했습니다. 이렇게 선언한 함수를 계속적으로 활용을 하기위해서는 함수를 호출해야 합니다.

함수를 선언할때 소괄호안에 변수로 적어주는 값을 매개변수(parameter)라 하고
(위의 getSqureArea에서 소괄호 안에 있는 width와 height가 매개변수 입니다.)

함수를 호출할 때 전달해주는 값을 전달인자(argument)라고 합니다.
(3과 4를 호출한다 가정하면 getSqureArea(3,4)에서의 (3,4)가 전달인자 입니다.)

매개변수는 함수를 실행할때 입력에 따라서 바뀔 수 있는 변수이고, 전달인자는 함수를 호출할때 매개변수에 할당되는 값을 말합니다.

<조건문>

-조건문에 대하여
-비교연산자
-논리연산자
-기억해야할 6가지 falsy값
-조건문 쓰기
-논리 연산자

-조건문에 대하여

조건문은 둘 중 하나를 선택하는 일이며 어떠한 조건을 판별하는 기준을 만드는 것 입니다.
우리는 일상생활 속에서 자연스럽게 행동하고 판단하고 행동하지만 컴퓨터는 다릅니다.
컴퓨터가 우리의 일상생활에 도움을 주기 위해서는, 어떤 조건에 맞춰 어떤 행동을 해야하는 지 명시해 두어야 합니다.
조건문에서는 반드시 비교 연산자(comparison operator)가 필요하며, 조건문을 배우기 위해서는 Boolean타입에 대한 이해가 필요합니다.

-비교연산자

다양한 비교 연산자 입니다.
'>' 초과
'<' 미만
'>=' 이상
'<=' 이하
'===' 같다
'!==' 다르다

- 논리연산자

  • AND연산자
ex1)
학생이면서, 여성일 때 통과
isStudent && isFemale;

ex2)
true && true // true
true && false // false
false && false // false
  • OR연산자
ex1)
학생이거나, 여성일 때 통과
isStudent || isFemale;

ex2)
true || true // true
true || false // true
false || false // false
  • NOT연산자 -> truthy,falsy 여부를 반전시킵니다.
ex1)
학생이 아니면서, 여성일 때 통과
!isStdent && isFemale;

ex2)
!falsy // true
!(3>2) // false
!undefined // true
!'hello' // false (빈문자열이 아닌 이상 모든 문자열은 true로 취급된다.)

-기억해야할 6가지 falsy값

다음은 if문에서 false로 변환되므로, if구문이 실행되지 않는다.
1. if (false)
2. if (null) -> 값이없다
3. if (undefined) -> 정의되지 않았다.
4. if (0) -> 숫자 0
5. if (NaN) -> not a number
6. if ('') -> 비어있는 String

- 조건문 쓰기

조건문은 다음과 같이 쓸 수 있습니다.

if(조건문) {
 // 조건1이 통과될 경우
} else if {
 // 조건1이 통과하지 않고
 // 조건2가 통과할 경우
} else {
 // 모든 조건이 통과하지 않는 경우
}

조건에는 Boolean으로 결과가 나오는 비교구문이 들어갑니다.

Boolean으로 평가되는 표현문은 바로 return합니다.

ex)
return 2 + 2 === 4 // true리턴 (O)

if (2 + 2 === 4) {
  return true      // 비교문은 true,false로 평가되기 때문에 장황하게 적지 않습니다.
}            

0개의 댓글