JavaScript기초 - 정리(3) 변수 선언 , 이스케이프 문자 , else if문 , 함수

 

이번 포스팅에서는 앞서 정리한 내용들에 대해 조금 더 자세히 알아보도록 하자.

 

 

<목차>

1. 변수 선언 - 전역변수 & 지역변수
2. 문자열 - 이스케이프 문자
3. else if문
4. 함수 

 

 

 

< 변수 선언 - 전역변수 , 지역변수 >

JavaScript에서 let과 const를 사용해 변수를 선언할 때 어떠한 과정이 일어나는지 조금 자세히 알아보도록 하자.

 

let은 변수를 선언하는 예약어이다. let ingoo;와 같이 변수를 선언하는 순간 우리가 사용하는 컴퓨터의 메모리는 변수를 저장할 수 있는 공간을 확보하게 된다. 그리고 대입연산자를 통해 변수에 값을 할당하게 되면 할당된 값이 메모리의 공간에 들어간다. 재할당을 하는 경우에는 기존에 들어있던 값이 재할당된 값으로 덮어쓰여지는 것이다.

이러한 원리로 다음과 같이 동일한 변수명을 선언하게 되면 에러가 발생한다는 사실을 알 수 있다. (메모리 공간에도 일종의 이름같은 것이 존재하고 있기 때문)

let val=10;
let val=20;

// 에러발생

하지만 아래와 같이 변수명이 선언되어 있을 경우, 동일한 변수명을 가지고 있더라도 코드가 실행되게 된다.

let name = "길동"
{
    let name = "홍길동"
    // code block
}

위의 코드가 실행되는 이유는 무엇일까?? 여기서 전역(global)변수와 지역(local)변수라는 개념이 등장하게 된다. 용어만 놓고 보면 어렵게 느껴질 수 있겠지만 쉽게 얘기하면 실행되는 공간이 다르다는 말이다. 중괄호 { }로 묶여있는 코드블록 안에서는 똑같은 변수명이라고 하더라도 실행되는 공간이 다르기 때문에 메모리에서 다른 주소값을 갖게 되고 그 결과 코드블록 밖에서 선언된 변수와 변수명이 같더라도 변수 선언이 가능하게 된다. 다시말해, 코드블록 안과 밖은 실행되는 공간이 다르다. 특정 코드블록에서 변수 선언을 했다면 해당 코드블록 안에서만 실행되는 변수가 된다. 그래서 변수명이 같더라도 다른 값을 가질 수 있게 되는 것이다.

 

let name="홍길동"은 중괄호 { }로 묶인 코드블록 안에서 선언된 지역(local)변수가 되고 블록 내에서만 유효한 범위를 갖는다. 이와 다르게 let name="길동"은 전역(global)변수가 되고 전역에서 사용 및 접근이 가능한 변수이다.

 

 

 

< String - 이스케이프 문자 >

문자열(String)은 "" , '' , `` (큰따옴표, 작은따옴표, 백틱) 이 세가지를 사용해서 생성할 수 있다. 하지만 이것만으로는 문자열 안에 따옴표를 넣고 싶거나, 특수문자를 넣고 싶거나 , 줄바꿈을 하고 싶거나 하는 경우들이 생겼을 때 어려움을 겪게 될 것이다. 이 때 사용하는 것이 바로 이스케이프 문자이다. 쉽게 얘기하면, 특수한 기능을 수행하는 문자라고 생각하면 된다. 

 

문자열 안에 큰따옴표를 넣고 싶은 경우, 다음의 두가지 방법을 사용해 볼 수 있다.

1. 예약어에 큰따옴표를 쓰지 않고 작은따옴표나 백틱을 사용한다. 예약어로 쓰일 것과 문자열 안에서 사용하고 싶은 것을 구분해서 사용하면 된다.
2. 역슬래시를 이용한다. 역슬래시를 사용해 큰따옴표가 문자열의 일부라는 것을 표기해주면 된다.

// 첫번째 방법
let string1 = '내 이름은 "홍길동"이다.'

// 두번째 방법
let string2 = "내 이름은 \"홍길동\"이다."

 

역슬래시는 다음에 나오는 문자가 문자열의 일부임을 JavaScript에게 알려주는데 사용되는 이스케이프 문자라고 생각하면된다. 자주 사용하는 이스케이프 문자를 조금 살펴보자. 참고로 \는 역슬래시와 똑같은 표현이다.

• \n  :  줄바꿈 (개행)
• \t  :  수평 탭
• \"  :  큰따옴표
• \'  :  작은따옴표
• \\  :  역슬래시 

 

 

 

< else if문 >

특정 조건을 만족할 때만 코드를 실행시키고 싶을 때 if문을 사용하게 되는데, 3개 이상의 조건을 부여하고 싶은 경우 else if문을 사용해서 코드를 작성하게 된다. else if문은 if문의 코드블록이 끝나는 시점에 작성한다. 또한 한번만 사용 가능한 것이 아니라, 개수의 제한없이 무한정 사용이 가능하다. 여러개의 조건문을 만들어서 실행시키고 싶을 때 else if문을 사용하면 된다.

if (boolean) {
    // 코드블록
} else if {
    // 코드블록
} else if {
    // 코드블록
} else if {
    // 코드블록
} else {
    // 코드블록
}

 

 

 

 

< 함수 >

함수를 정의하고 사용하는 과정 속에 담긴 세세한 내용들을 조금 살펴보자.

 

1. 함수 정의

함수를 정의하는 순간, 메모리에 함수를 저장할 수 있는 공간이 생성되고 함수 안에서 정의된 코드들이 그곳에 저장된다.

 

2. 함수 사용

메모리의 공간에 저장된 함수를 사용해서 함수 안에 있는 코드를 실행시켜줘야 한다. 함수를 호출한다고 표현한다.

 

3. Return

함수 안에서 변수를 선언하게 되면 해당 변수는 함수가 저장된 메모리 공간 안에서 따로 저장 공간을 확보해 그 내용을 저장하게 된다. 함수 안에서 선언된 변수를 함수 밖으로 꺼내오기 위해서는 return을 사용해 값을 반환하는 과정을 거쳐야만 한다. 함수 안에서 return을 사용해 값을 반환하게 되면 해당 함수를 호출했을 때 그 함수 자체가 반환값을 의미한다고 보면된다.

 

4. 매개변수 (Parameter)

함수를 정의할 때 함수명 뒤에 위치한 소괄호 ( ) 안에 임의의 변수명을 적을 수가 있는데 이를 매개변수라고 한다. 매개변수는 함수를 사용할 때 어떠한 값을 받을건지를 정의하는 것이다. 매개변수로는 한 개 이상의 변수를 사용할 수 있다. 

 

5. 인자 (Argument)

인자란, 함수를 사용할 때 쓰는 것이다. 함수를 사용할 때 인자값을 넣어주게 된다. 다시말해, 함수를 정의할 때 선언한 매개변수를 인자값으로 함수에게 전달해준다.

 

 

<예제코드>

/*
    let, const
    데이터 타입
        String
        integer
        boolea
        array
        object
    
    if(조건문)
    for(반복문)
    function(함수)

*/

let day = "월요일";   // 변수를 선언하고 값을 할당   
day = "화요일"   // 변수를 재할당


// let, const vs var
// var : 오래전에 자바스크립트가 나올 때 쓰던 변수 선언방식이다.
// let, const는 ES6에서 나옴. var는 현재 실무에서 거의 쓰지 않는다.


today = "수요일"   // 예약어 없이 변수에 값 할당. 할당되지 않는다
// let : 변수를 선언할 때 가장 기초적인 선언
// 자기가 가지고 있는 영역에서만 실행되도록 합니다.
// 변수가 항상 바뀐다. (내용을 바꿀 수 있다.)


let a = "잉구"
// let a = "홍구"   // 같은 변수를 선언하면 에러 발생. (메모리 공간에도 이름이 존재)
{
    let a = "홍구"
    console.log(a);   // "홍구"가 출력됨
}
console.log(a);   // "잉구"가 출력됨


// const
// 값이 절대 안 바뀐다. (내용을 바꿀 수 없다.)
// const는 재할당이 불가능.
const b = "잉구"


/*
    abc
        "엔터실행\완료"
*/
let str = 'abc\n\t\"엔터실행\\완료\"';   // \n : 줄바꿈
// " ' ` <-- 아스키코드로 담고 있습니다.
// 문자열을 만드는 방법은 총 3가지 " ' ` (큰따옴표, 작은따옴표, 백틱)
console.log(str)


/*
    boolean  //  true of false
                  (1)     (0)
*/
if(1){
    console.log("참");
} else {
    console.log("거짓");
}


/* else if문 */
// 100점 만점 중에 100점:A , 90점:B , 80점은:C
// 그 외 점수는 F로 표현해 주세요..
let point = 80
if(point==100) {
    console.log("A")
} else if(point==90) {
    console.log("B")
} else if(point==80) {
    console.log("C")
} else {
    console.log("F")
}


// 함수 사용하는 방법
// 1. 함수 정의
// 2. 함수 사용
// 3. return
// 4. 매개변수, 인자
// 함수명 뒤에 있는 () 안에 임의의 변수명을 적을 수가 있고
// 한개 이상을 넣을 수가 있다
let today = "2022-01-03";
function sum(num1, num2, num3, num4){
    let answer;
    answer = num3 + num4 + num1 + num2;
    return answer;
}


// return
sum(1, 2, 'hello', 'world');
let rst = sum(1,2,3,4);   // 반환된 값을 rst라는 변수에 할당
console.log(rst);
console.log(sum(1, 2, 'hello', 'world'));