Javascript 3일차

- let, const

 

let  오늘 = "월요일"

     오늘 -= "화요일"

 

: 위 아래의 차이점은 위에서 먼저 let을 통해서 "월요일"이라는 값을 선언했지만 바로 밑에서 저런 식으로 값을 적으면

  이동훈이란 변수는 "화요일" 값으로 적용된다. 

-> console.log(이동훈) : 화요일

 

 

 

 

 

* 내일 = "수요일" 

: 이거같은 경우는 let으로 먼저 변수를 선언함으로써 공간을 만들어야 하지만 그렇지 않았기에 실행이 안된다.

 

 

 

 

 

* let a = "목요일"

  let a = " 금요일"

: 변수를 선언할 때 같은 변수명을 선언할 수 없다.

 

let, const 말고도 var도 존재한다.

 

 

 

 

var:

오래전에 자바스크립에서 쓰던 변수선언방식이지만 Es6버전이 나오면서 주로 let, const를 쓰게되면서 더이상 var은 잘 안쓰고 있다.

 

 

 

 

Const : 값이 절대 안바뀐다. 내용을 바꿀 수 없다.

const b = "힝구"

b=힝구잉 

-> 값이 오류가 뜨는걸 확인할 수 있다.

 

 

 

 

if문과 else if문

 

: 조건문을 else if에 한번 더 넣어줌으로써 여러방향성의 if문을 만들 수 있다.

 

ex) else if를 쓰지 않았을 떄

  /*
            if문 -> else if문

            100점만점 중에 100점은 A  90점은 B 80점은 C
            그외 점수는 F로 표현해주세요
        */
        
        
        let point = 100;

        if(point==100){
            console.log("A")
        } else{
            console.log("F")
        }
        
        if(point==90){
            cnosole.log("B")
        } else{
            console.log("F")
        }

        if(point==80){
            cnosole.log("C")
        } else{
            console.log("F")
        }

 

 

 

ex) else if를 사용했을 때

let point = 100;

        if(point == 100){
            console.log("A")
              } else if(point == 90){
                  console.log("B")
              } else if(point==80){
                  console.log("C")
              } else{
                  console.log("F")
              }

 

 

 

Function(함수)

 

1) 함수정의 :

 

함수정의는 다음과 같이 하면 된다.

function 함수명(매개변수) {
        함수본문
    }

1. function이라는 선언자를 작성한 다음

2. 함수명을 작성하고

3. 소괄호를 열어서 매개변수를 작성한다. (매개변수를 생략해도 되지만, 소괄호는 반드시 열고 닫아야 한다.)

4. 마지막으로 중광호를 열어서 함수 본문을 작성하면 된다.

 

 

2) 함수사용

 

이렇게 선언한 함수는 함수 이름 뒤에 소괄호를 붙여 사용할 수 있다.

//함수 선언
    function hello() {
        console.log('안녕하세요');
    }

    //함수 사용
    hello(); // 안녕하세요

 

 

3) 매개변수, 인자

 

 

3)-1 매개변수 (parameter)

 

함수를 선언할 때 매개 변수를 작성하면 함수를 사용할 때 임의의 값을 함수 내부로 전달 할 수 있다.

 

함수를 선언할 때 소괄호 내부에 매개 변수 이름을 작성한 다음,

함수 본문에서 이 매개변수를 활용한 동작을 작성하고

함수를 호출할 때 함수 이름 뒤에 붙는 소괄호 내부에 값을 전달하는 방식이다.

 

function hello(name) {
        console.log('안녕하세요.' + name)
    }
        
        hello('Tom'); // 안녕하세요.Tom

그동안 계속 사용하던 console.log에 소괄호를 열어서 작성하던 값들이 모두 매개변수였던 것이다.

 

매개변수는 여러 개를 작성할 수도 있다.

2개 이상의 매개변수가 필요한 경우에는 쉼표로 구분해서 작성하면 되고,

호출 시에는 선언할 때의 순서에 맞춰서 값을 전달하면 된다.

function check(name, count) {
        console.log('안녕하세요 ' + name +":)")
        console.log('당신은 오늘 ' + count + '일차 출석입니다')
    }

    check('Juchan', 5); // 안녕하세요 Juchan:)
                        // 당신은 오늘 5일차 출석입니다

매개변수의 기본값은 undefined라는 것을 잘 알아둬야 한다.

만약, 함수를 선언할 때 매개변수를 작성했으나 호출할 때 아무 값도 전달하지 않는다면 매개변수는 undefined값을 가지고서 동작한다.

function hello(name) {
        console.log('안녕하세요 ' + name)
    }   
        hello(); // 안녕하세요 undefined

 

4) 반환 값 (return value)

 

함수는 여러 가지 복잡한 동작들을 미리 정의하고 필요할 때 언제든 쉽게 사용할 수 있게 하는 것이 기본이지만 함수를 호출한 지점에 함수를 호출한 결과로 어떤 특정한 값이 대체되게 할 수도 있다.

이때 이 값을 반환 값 또는 리턴 값(return value)이라고 부른다.

반환 값은 함수 내에서 return이라는 선언자를 활용한다.

그리고 이를 활용해 return값을 연산하는 문장을 return문이라고 부른다.

function art(){
        return '비 (Rain)'
    }
        console.log(art()); // 비 (Rain)

art 함수를 살펴보면 '비 (Rain)'이라는 문자열을 그냥 return 하고 있다.

함수를 선언한 곳에서 작성된 return값은 함수를 호출한 곳에 그대로 전달되는데,

결국 console.log 안에서 art()는, '비 (Rain)'이라는 문자열로 대체되어 콘솔에 출력되는 것이다.

 

그러나 위에서도 확인했듯, return을 작성하지 않아도 함수는 정상적으로 작동한다.

당연히 return을 따로 작성하지 않은 함수의 기본 반환 값은 undefined다.

  function art(){
        //.. return문이 없는 함수본문
    }
    console.log(art());

 

추가적으로 알아야 할 부분은 return문 반환 값을 전달하는 기등과 더불어 함수 자체를 종료하는 기능도 있다는 것이다.

return문이 작성되면 return문 아래에 있는 선언들은 모두 무시된다.

function song(){
        console.log('제가 가장 좋아하는 노래는 스토커입니다.');
        return;
        console.log('이 음악은 정말 저에게 많은 여운을 줬어요.')
    }

        song();

위에 결과처럼 return 아래에 있는 코드들은 무시되는 걸 알 수 있다. 그렇기 때문에 상황에 따라 return문은 그냥 함수를 종료할 목적으로 활용되기도 하고, 당연히 목적에 따라서 함수 본문 내에서 여러 개의 return문이 등장하기도 한다.

function checkage(age){
        if(age>19){
            return '성인입니다'
        } else{
            return '미성년자입니다'
        }
    }   
    console.log(checkage(20));

주의할 점!
함수 내부에서 console.log함수를 쓰는 것을 return 하는 것으로 착각하는 경우가 있는데, 둘을 엄연히 다르다는 것을 인지해야 한다.

 

function sayName(){
        console.log('제 이름은 juchan입니다')
    }

    function getName(){
        return 'juchan'
    }

    sayName(); // 제 이름은 juchan입니다
    console.log('제 이름은 ' + getName() + '입니다')//제 이름은 juchan입니다