JavaScript 기초 정리 ② 조건문, 반복문, 함수

 

JavaScript 기본 문법 두 번째 정리.

이번에는 첫 번째 글에서 다룬 기본 연산자에 이어 null 병합 연산자, typeof, 삼항 연산자를 알아보고, 프로그램의 흐름을 제어하는 조건문과 반복문, 그리고 JavaScript에서 중요한 함수에 대해 정리한다.

---

1. Null 병합 연산자 ??

Null 병합 연산자는 여러 값 중에서 null 또는 undefined가 아닌 값을 선택할 때 사용하는 연산자이다.

let var1;

let var2 = 10;
let var3 = 20;

let var4 = var1 ?? var2;
let var5 = var1 ?? var3;

console.log(var4);
console.log(var5);

결과

10
20

var1은 값을 할당하지 않았기 때문에 undefined 상태이다.

따라서

var1 ?? var2

에서 var1이 undefined이므로 오른쪽 값인 var2가 선택된다.

---

실제 활용 예시

사용자의 이름이 존재하면 이름을 표시하고, 이름이 없다면 닉네임을 표시하는 상황을 생각해볼 수 있다.

let userName = "정재민";
let userNickName = "Winterlood";

let displayName = userName ?? userNickName;

console.log(displayName);

결과

정재민

userName에 값이 존재하기 때문에 왼쪽 값인 "정재민"이 선택된다.

반대로 다음과 같은 경우에는 닉네임이 출력된다.

let userName = null;
let userNickName = "Winterlood";

let displayName = userName ?? userNickName;

console.log(displayName);

결과

Winterlood

즉,

왼쪽 값 ?? 오른쪽 값

에서

• 왼쪽 값이 null 또는 undefined → 오른쪽 값 반환
• 왼쪽 값이 정상적인 값 → 왼쪽 값 반환

이라고 이해할 수 있다.

---

??와 ||의 차이

처음에는 ||와 비슷해 보이지만 차이가 있다.

??는 오직 null과 undefined만 없는 값으로 판단한다.

let value = 0;

console.log(value ?? 10);

결과

0

반면 ||는 0, "", false 등도 거짓으로 판단한다.

console.log(value || 10);

결과

10

따라서 0이나 false도 정상적인 값으로 사용해야 한다면 ??를 사용하는 것이 적절하다.

---

2. typeof 연산자

typeof는 값의 자료형을 문자열 형태로 반환하는 연산자이다.

let var7 = 1;

console.log(typeof var7);

결과

number

JavaScript 변수는 하나의 자료형에 고정되어 있지 않기 때문에 다른 타입의 값을 다시 저장할 수도 있다.

let var7 = 1;

var7 = "hello";
var7 = true;

let t1 = typeof var7;

console.log(t1);

결과

boolean

마지막으로 저장된 값이 true이므로 현재 var7의 타입은 boolean이다.

대표적인 결과는 다음과 같다.

console.log(typeof 10);          // number
console.log(typeof "hello");     // string
console.log(typeof true);        // boolean
console.log(typeof undefined);   // undefined
console.log(typeof function(){});// function

변수 안에 어떤 종류의 값이 들어있는지 확인하고 싶을 때 유용하다.

---

3. 삼항 연산자

삼항 연산자는 이름 그대로 3개의 항을 사용하는 연산자이다.

조건에 따라 서로 다른 값을 반환하고 싶을 때 사용할 수 있다.

기본 형태는 다음과 같다.

조건식 ? 참일 때 값 : 거짓일 때 값

예를 들어 어떤 숫자가 짝수인지 홀수인지 판단한다고 해보자.

let var8 = 10;

let res = var8 % 2 === 0 ? "짝수" : "홀수";

console.log(res);

결과

짝수

다음 조건을 검사하고 있다.

var8 % 2 === 0

숫자를 2로 나누었을 때 나머지가 0이면 짝수이므로 "짝수"를 반환하고, 그렇지 않으면 "홀수"를 반환한다.

이를 if문으로 작성하면 다음과 비슷하다.

let res;

if (var8 % 2 === 0) {
    res = "짝수";
} else {
    res = "홀수";
}

간단한 조건에 따라 하나의 값을 결정해야 할 때 삼항 연산자를 사용하면 코드를 짧게 작성할 수 있다.

다만 조건이 너무 복잡해진다면 삼항 연산자를 여러 번 중첩하기보다는 if문을 사용하는 것이 읽기 쉽다.

---

4. 조건문

조건문은 특정 조건에 따라 서로 다른 코드를 실행하도록 만드는 문법이다.

JavaScript에서는 대표적으로 if와 switch를 사용할 수 있다.

---

5. if문

가장 기본적인 조건문이다.

let num = 10;

if (num >= 10) {
    console.log("num은 10 이상입니다.");
}

() 안의 조건식이 true이면 {} 내부의 코드가 실행된다.

---

if - else

조건이 참일 때와 거짓일 때 각각 다른 코드를 실행할 수도 있다.

let num = 10;

if (num >= 10) {
    console.log("조건이 참입니다.");
} else {
    console.log("조건이 거짓입니다.");
}

---

else if

여러 조건을 차례대로 검사해야 할 때 else if를 사용할 수 있다.

let num = 10;

if (num >= 10) {
    console.log("num은 10 이상입니다.");
} else if (num >= 5) {
    console.log("num은 5 이상입니다.");
} else if (num >= 3) {
    console.log("num은 3 이상입니다.");
} else {
    console.log("num은 3 미만입니다.");
}

조건은 위에서부터 순서대로 검사한다.

현재 num은 10이기 때문에 첫 번째 조건인

num >= 10

이 true가 된다.

따라서

num은 10 이상입니다.

가 출력되고 이후의 else if 조건은 검사하지 않는다.

즉, 먼저 만족하는 조건 하나만 실행된다.

---

6. switch문

switch문 역시 조건에 따라 서로 다른 코드를 실행하기 위해 사용한다.

특정 변수의 값에 따라 여러 경우를 나누어 처리할 때 if문보다 직관적으로 표현할 수 있다.

let animal = "cat";

switch (animal) {
    case "cat":
        console.log("고양이");
        break;

    case "dog":
        console.log("강아지");
        break;

    case "bear":
        console.log("곰");
        break;

    case "snake":
        console.log("뱀");
        break;

    case "tiger":
        console.log("호랑이");
        break;

    default:
        console.log("그런 동물은 전 모릅니다.");
}

animal의 값이 "cat"이므로

고양이

가 출력된다.

---

case

case에는 비교하고 싶은 값을 작성한다.

case "cat":

switch에 전달된 값과 일치하면 해당 부분의 코드가 실행된다.

---

break

break는 현재 switch문을 종료한다.

case "cat":
    console.log("고양이");
    break;

break를 작성하지 않으면 일치하는 case를 찾은 이후 다음 case까지 계속 실행될 수 있다.

따라서 일반적인 switch문에서는 break를 함께 사용한다.

---

default

어떤 case에도 해당하지 않을 때 실행된다.

default:
    console.log("그런 동물은 전 모릅니다.");

if문의 마지막 else와 비슷한 역할을 한다.

---

7. 반복문

반복문은 같은 코드를 여러 번 실행해야 할 때 사용하는 문법이다.

JavaScript에서는 대표적으로 for문을 사용할 수 있다.

---

8. for문

기본적인 for문의 형태는 다음과 같다.

for (초기식; 조건식; 증감식) {
    실행할 코드
}

예를 들어 다음 코드는 0부터 10까지 반복한다.

for (let idx = 0; idx <= 10; idx++) {
    console.log(idx);
}

각 부분의 역할은 다음과 같다.

let idx = 0 → 반복문에서 사용할 변수 생성
idx <= 10   → 반복을 계속할 조건
idx++       → 한 번 반복한 뒤 idx를 1 증가

---

9. continue

continue는 현재 반복을 건너뛰고 다음 반복으로 이동한다.

for (let idx = 0; idx <= 10; idx++) {

    if (idx % 2 === 0) {
        continue;
    }

    console.log(idx);
}

현재 숫자가 짝수라면 continue가 실행된다.

따라서 짝수에서는 아래의 console.log()가 실행되지 않는다.

결과

1
3
5
7
9

즉, 이 코드는 홀수만 출력한다.

---

10. break

break는 반복문 자체를 종료한다.

continue와 함께 사용해보면 차이를 쉽게 이해할 수 있다.

for (let idx = 0; idx <= 10; idx++) {

    if (idx % 2 === 0) {
        continue;
    }

    console.log(idx);

    if (idx >= 5) {
        break;
    }
}

실행 과정을 보면 짝수는 continue로 건너뛴다.

따라서 출력되는 값은

1
3
5

이다.

idx가 5가 되었을 때

if (idx >= 5) {
    break;
}

조건을 만족하여 반복문 전체가 종료된다.

정리하면

continue → 현재 반복만 건너뛰기
break    → 반복문 자체 종료하기

라고 이해할 수 있다.

---

11. 함수

함수(Function)는 특정 기능을 수행하는 코드를 하나의 단위로 묶어놓은 것이다.

반복해서 사용하는 코드를 함수로 만들어두면 필요할 때마다 호출해서 사용할 수 있다.

예를 들어 사각형의 넓이를 계산하는 함수를 만들어보자.

function getArea(width, height) {

    let area = width * height;

    return area;
}

여기서

getArea       → 함수 이름
width, height → 매개변수
return area   → 함수가 반환하는 값

이다.

---

12. 함수 호출

만들어진 함수는 함수 이름 뒤에 ()를 붙여 실행할 수 있다.

getArea(10, 20);

10은 width, 20은 height로 전달된다.

함수가 반환하는 값을 변수에 저장할 수도 있다.

let area1 = getArea(10, 20);

console.log(area1);

결과

200

다른 값을 전달하면 같은 함수를 다시 사용할 수 있다.

let area2 = getArea(30, 20);

console.log(area2);

결과

600

즉, 함수의 장점은 같은 로직을 여러 번 작성하지 않고 필요한 값만 전달하여 재사용할 수 있다는 것이다.

---

13. 매개변수와 인수

함수를 공부할 때 비슷해서 헷갈리는 용어가 있다.

바로 매개변수(Parameter)와 인수(Argument)이다.

함수를 선언할 때 사용하는 변수는 매개변수이다.

function getArea(width, height) {
    return width * height;
}

여기서

width
height

가 매개변수이다.

반면 함수를 실제로 호출하면서 전달하는 값은 인수라고 한다.

getArea(10, 20);

여기서

10
20

이 인수이다.

---

14. return

return은 함수에서 계산된 값을 함수 밖으로 반환한다.

function getArea(width, height) {

    let area = width * height;

    return area;
}

함수에서 반환된 값은 다음과 같이 변수에 저장할 수 있다.

let result = getArea(10, 20);

console.log(result);

결과

200

return이 실행되면 함수는 그 지점에서 종료된다는 점도 중요하다.

---

15. 중첩 함수

함수 내부에 또 다른 함수를 선언할 수도 있다.

이를 중첩 함수라고 한다.

function getArea(width, height) {

    function another() {
        console.log("another");
    }

    another();

    let area = width * height;

    return area;
}

another() 함수는 getArea() 내부에서 선언되었기 때문에 기본적으로 getArea() 내부에서 사용할 수 있다.

함수 안에서만 필요한 기능을 별도의 함수로 분리하고 싶을 때 활용할 수 있다.

---

16. 함수 호이스팅

JavaScript의 함수 선언문에는 호이스팅(Hoisting)이라는 특징이 있다.

호이스팅은 단어 그대로 코드를 위쪽으로 끌어올린 것처럼 동작하는 현상이다.

예를 들어 함수를 선언하기 전에 호출해도 실행할 수 있다.

let area1 = getArea(10, 20);

console.log(area1);

function getArea(width, height) {
    return width * height;
}

코드상으로는 getArea() 함수가 아래에서 선언되어 있지만 정상적으로 실행된다.

이는 JavaScript가 함수 선언문을 실행 전에 처리하기 때문이다.

따라서 다음처럼 작성하는 것이 가능하다.

hello();

function hello() {
    console.log("Hello");
}

결과

Hello

단, 모든 함수 작성 방식이 동일하게 호이스팅되는 것은 아니다.

뒤에서 다룰 함수 표현식과는 차이가 있다.

---

17. 함수 표현식

JavaScript에서는 함수도 하나의 값처럼 변수에 저장할 수 있다.

function funcA() {
    console.log("funcA");
}

let varA = funcA;

varA();

funcA라는 함수 자체를 varA에 저장했기 때문에

varA();

를 이용해서도 함수를 실행할 수 있다.

---

18. 익명 함수

함수 이름 없이 함수를 생성할 수도 있다.

이를 익명 함수(Anonymous Function)라고 한다.

let funcB = function () {
    console.log("funcB");
};

funcB();

함수 자체에는 이름이 없지만 funcB 변수에 저장했기 때문에 해당 변수를 이용하여 호출한다.

이처럼 함수를 변수에 저장하는 방식을 함수 표현식이라고 한다.

---

19. 함수 표현식과 호이스팅

함수 선언문과 함수 표현식은 호이스팅에서 중요한 차이가 있다.

함수 선언문은 선언보다 먼저 호출할 수 있다.

hello();

function hello() {
    console.log("Hello");
}

하지만 다음과 같은 함수 표현식은 선언 전에 호출할 수 없다.

hello();

let hello = function () {
    console.log("Hello");
};

let으로 선언된 변수는 초기화되기 전에 사용할 수 없기 때문이다.

따라서 함수 표현식을 사용할 때는 일반적으로 함수를 변수에 할당한 이후 호출해야 한다.

---

20. 블록 스코프 주의하기

처음 작성했던 다음 코드에는 주의할 부분이 있다.

{
    let varB = function () {
        console.log("funcB");
    };
}

varB();

이 코드는 정상적으로 실행되지 않는다.

let은 블록 스코프(Block Scope)를 가지기 때문이다.

즉,

{
    let varB = ...
}

에서 선언한 varB는 {} 내부에서만 사용할 수 있다.

따라서 사용하려면 다음과 같이 같은 블록 안에서 호출해야 한다.

{
    let varB = function () {
        console.log("funcB");
    };

    varB();
}

또는 블록 밖에서 사용할 예정이라면 변수 자체를 바깥에서 선언해야 한다.

let funcB = function () {
    console.log("funcB");
};

funcB();

변수를 어디에서 선언했느냐에 따라 사용할 수 있는 범위가 달라진다는 점은 앞으로 JavaScript를 공부하면서 중요한 개념이다.

---

21. 화살표 함수

ES6부터 함수를 더욱 간결하게 작성할 수 있는 화살표 함수(Arrow Function)가 추가되었다.

기존 함수 표현식은 다음과 같다.

let funcC = function () {
    return 1;
};

화살표 함수로 바꾸면 다음처럼 작성할 수 있다.

let funcC = () => {
    return 1;
};

함수 이름 대신 => 기호를 사용하는 것이 특징이다.

---

22. 화살표 함수 간단하게 작성하기

함수 내부에서 단순히 하나의 값을 반환한다면 {}와 return도 생략할 수 있다.

let addOne = (value) => value + 1;

console.log(addOne(10));

결과

11

위 코드는 다음 함수와 동일한 역할을 한다.

let addOne = function (value) {
    return value + 1;
};

화살표 함수를 사용하면 훨씬 간결하게 표현할 수 있다.

---

매개변수가 하나일 경우

매개변수가 하나라면 괄호를 생략할 수도 있다.

let addOne = value => value + 1;

다만 개인적으로 처음 공부할 때는 구조를 명확하게 보기 위해 다음처럼 괄호를 작성하는 것도 좋다.

let addOne = (value) => value + 1;

---

매개변수가 여러 개인 경우

매개변수가 여러 개라면 괄호가 필요하다.

let add = (a, b) => a + b;

console.log(add(10, 20));

결과

30

---

함수 선언 방식 비교

JavaScript에서 지금까지 배운 함수 작성 방식을 비교하면 다음과 같다.

방식예시

함수 선언문	function add(a, b) { return a + b; }
함수 표현식	let add = function(a, b) { return a + b; };
화살표 함수	let add = (a, b) => a + b;

같은 기능을 수행할 수 있지만 작성 방법과 일부 동작에는 차이가 있다.

처음에는 세 가지 방식이 있다는 정도로 이해하고, 이후 JavaScript를 더 공부하면서 각각의 차이를 알아가면 될 것 같다.

---

정리

이번에는 JavaScript의 연산자부터 조건문, 반복문, 함수까지 공부했다.

개념설명

??	null, undefined가 아닌 값 선택
typeof	값의 자료형 확인
조건 ? A : B	삼항 연산자
if	조건에 따라 코드 실행
else if	여러 조건을 순서대로 검사
switch	하나의 값을 여러 경우와 비교
for	코드를 반복 실행
continue	현재 반복을 건너뜀
break	반복문 또는 switch 종료
function	재사용 가능한 코드 묶음
return	함수 실행 결과 반환
호이스팅	함수 선언을 위에서 한 것처럼 사용할 수 있는 특성
함수 표현식	함수를 변수에 저장
익명 함수	이름이 없는 함수
화살표 함수	=>를 이용한 간결한 함수 표현

이번 내용부터는 단순히 값을 저장하고 계산하는 것을 넘어서 프로그램의 실행 흐름을 직접 제어하는 문법이 등장했다.

특히 if, for, function은 앞으로 JavaScript 코드를 작성하면서 계속 사용하게 될 핵심 문법이기 때문에 동작 방식을 확실하게 이해해둘 필요가 있다.