TIL-2 JavaScript의 꽃 조건문과 반복문 그리고 배열과 객체의 기초

TIL-2 JavaScript의 꽃 조건문과 반복문 그리고 배열과 객체의 기초

Prologue. 아하 그렇구나! 어라? 방금 이해했는데..!!

JavaScript를 배우며 내가 바보가 된 기분을 느끼는건 하루에도 수십번이다.

아니.. 10분 정도의 강의영상을 들으면서도 수백번이다....

그래서 총 3시간 정도의 강의를 들었는데 시간은 두배로 흘러가는 경험은 다반사 이다....

 

1. if문

if문은 Javascript에서 조건문을 작성할 때 사용하는 기본적인 제어 구조 이며,

if 문을 사용하면 조건에 따라 코드 블록을 실행하거나 실행하지 않도록

불리언 타입으로 조건문을 만들어서 활용한다.

 

// 기본적인 if문
// 아래 예제 에서는 변수x가 양수 인지를 판별하며
// 양수 인 경우 "x는 양수입니다." 라는 메세지를 출력한다.

let x = 10;
if (x > 0) {
  console.log("x는 양수입니다.");
}


//if-else 문
// 아래 예제 에서는 변수x가 양수 인지를 판별하며
// 양수 인 경우 "x는 양수입니다." 라는 메세지를 출력하고,
// 그게 아니어서 음수 인 경우 "x는 음수입니다." 라는 메세지를 출력한다.

let x = -10;
if (x > 0) {
  console.log("x는 양수입니다.");
} else {
  console.log("x는 음수입니다.");
}




//if-else if-else문
// 아래 예제 에서는 변수x가 양수 인지를 판별하며
// 양수 인 경우 "x는 양수입니다." 라는 메세지를 출력하고,
// 그게 아니어서 음수 인 경우 "x는 음수입니다." 라는 메세지를 출력하고,
// 그것도 아니라면 "x는 0입니다." 라는 메세지를 출력한다.
let x = 0;

if (x > 0) {
  console.log("x는 양수입니다.");
} else if (x < 0) {
  console.log("x는 음수입니다.");
} else {
  console.log("x는 0입니다.");
}

 

 

2. switch문

swich문은 JavaScript에서 다중 조건을 처리 할 때 사용하는 제어구조이며,

여러개의 if...else if...else를 사용하는 대신 switch 문을 사용하면 코드의 가독성을 높일 수 있다.

switch 문은 주어진 표현식을 평가하고, 그 결과 값에 따라 여러 case 중 값에 도달한 하나를 출력한다.

// switch문
// 아래 예제에서는 switch문을 사용하여 과일의 종류에 따라 색상 메세지를 출력한다.
// switch문은 변수의 값에 따라 여러개의 경우 case에 조건을 담아서
// 해당 값에 도달 할 때까지 실행되며 하나의 조건을 빠져 나오게 하기 위해
// break;를 사용한다.

let fruit = "사과";

switch (fruit) {
  case "사과":
    console.log("사과는 빨간색입니다.");
    break;
  case "바나나":
    console.log("바나나는 노란색입니다.");
    break;
  case "오렌지":
    console.log("오렌지는 주황색입니다.");
    break;
  default:
    console.log("해당하는 과일이 없습니다.");
    break;
}

 

3. 삼항 연산자

삼항 연산자는 TIL1 내용 중 소개를 했고 소개 중에도 언급 했지만

아래 코드 스니펫과 같은 개념으로 구성되어 있기 때문에

if문과 비슷한 결을 가지고 있다고 판단되며

// 삼항 연산자(?:)
// 삼항 연산자의 뜻은 수식 아래에 주석으로 설명
let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"
// let result = (x > 5) ? "크다" : "작다";의 경우
//(x > 5) x가 5보다 크면(?) "크다" 아니면(:) "작다"
// 위와같이 불리언 타입으로 결정할 수 있다.

//위 개념을 이해할 수 있게 되면 if문을 배울때도 생각보다 이해가 쉬워진다.

 

앞서 소개했던 위의 예시보다 조건문에 조금 더 부합한 예시를 들자면

아래와 같이 응용 할 수 있다.

let age = 20;
let message = (age >= 18) ? "성인입니다." : "미성년자입니다.";
console.log(message);   // "성인입니다."

 

4. 조건문의 중첩

위와같이 소개한 조건문을 중첩하여 사용할 수도 있는데

이어서 소개 될 for문안에 if 문이 들어가는 경우도 있지만

특히 if 문 같은 경우는 if문 안에 if가 여러번 중첩 될 수도 있다.

(다만.. 가독성이 많이 떨어져 지양 하는 편이라고 하니 이점 유의하자)

 

// if문의 {} 부분에서 다시 시작되는 if-else 문..
// 결국 아래 주석과 같은 구조로 이해하고 스니펫을 읽어보면 눈에 들어오기 시작할 것이다.
// if(조건){if2(조건){}else2{}}else{}
// 사전에 설명을 해도 가독성이 현저히 떨어진다..

let age = 20;
let gender = "여성";

if (age >= 18) {
  if (gender === "남성") {
    console.log("성인 남성입니다.");
  } else {
    console.log("성인 여성입니다.");
  }
} else {
  console.log("미성년자입니다.");
}

 

5. 조건부 실행

조건부 실행은 주어진 조건에 따라 코드 블록이 실행되거나 실행되지 않도록 하는 프로그래밍 방식이며,

조건부 실행을 통해 프로그램의 흐름을 제어하고 다양한 상황에 따라 다른 동작을 수행할 수 있다.

자바스크립트에서는 주로 if 문, switch 문, 삼항 연산자(? :)를 사용하여 조건부 실행을 구현한다.

 

아래와 같이 간결하게 구문을 작성 할 수 있을때도 사용하게 되는데

조건부 실행을 사용하여 변수 x가 양수인 경우에만 "x는 양수입니다."라는 메시지를 출력하고,

&& 연산자를 사용하여 조건부 실행을 할 수 있다.

let x = 10;

(x > 0) && console.log("x는 양수입니다.");

 

6. 삼항 연산자와 단축 평가

삼항 연산자와 단축평가는 JavaScript에서 조건부 실행을 간결하게 표현하는 방법이며

두 방법 모두 조건에 따라 다른 값을 반환 하거나 코드를 실행하는데 유용하다.

 

그리고 

 

삼항 연산자는..

if...else 문을 간결하게 표현할 수 있는 연산자이며,

조건이 true일 때와 false일 때 각각 다른 표현식을 실행한다.

let age = 20;
let message = (age >= 18) ? '성인입니다.' : '미성년자 입니다.';
console.log(message); // '성인입니다.'

 

 

단축 평가는..

논리 연산자 &&와 ||를 사용하여 조건부 실행을 간결하게 표현하는 방법이며,

논리 연산자는 조건이 이미 결정된 경우 나머지 조건을 평가하지 않고 실행을 단축한다.

let isLoggedIn = true;
let user = isLoggedIn && 'User';
let name = '';
let displayName = name || 'Default Name';

 

 

7. falsy한 값과 truthy한 값

JavaScript에서 모든 값은 불리언 문맥(조건문 등)에서 true 또는 false로 평가될 수 있다.

특정 값은 항상 false로 평가되어 이를 falsy 값이라고 하며,

반면, false로 평가되지 않는 나머지 값들은 truthy 값이라고 한다.

 

if (0) {
  console.log("이 코드는 실행되지 않습니다.");
}

if ("") {
  console.log("이 코드는 실행되지 않습니다.");
}

if (null) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (undefined) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (NaN) {
  console.log("이 코드는 실행되지 않습니다.");
}

if (false) {
  console.log("이 코드는 실행되지 않습니다.");
}

위의 예제에서는 falsy한 값들을 사용하여 if문의 조건을 만족시키지 못하도록 한다.

0, 빈 문자열, null, undefined, NaN, false는 falsy한 값으로, if문의 조건을 만족시키지 못하며

그 외의 값들은 모두 truthy한 값으로, if문의 조건을 만족시킨다.

 

8. for 문

JavaScript에서는 반복문을 사용하여 특정 코드를 반복해서 실행해야 할때가 있고

그럴때 반복문을 사용해서 코드를 반복 실행 할 수 있다.

 

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

 

그중 for문은 반복문을 작성할 때 사용하는 기본적인 제어 구조이며

for 문을 사용하면 특정 조건이 true인 동안 코드를 반복 실행할 수 있다.

 

8- 1 배열과 함께 사용하는 for 문

let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

 

8- 2 for...in 문

let person = { name: "John", age: 30, gender: "male" };

for (let key in person) {
  console.log(key + ": " + person[key]);
}

 

 

8- 3 for 문의 응용 break문

break문은 아래 예제와 같이 i는 10보다 작기 때문에

10의 숫자에 도달 할 때 까지 반복 되어야 하지만

if (i === 5) { break; } 구문으로 추가 조정을 하여 5에 도달할 때 값 계산 및 출력을 정지한다.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break;
  }
  console.log(i);
}

8- 4 for 문의 응용 continue문

continue 문의 경우는 break의 아래 예제와 같이 i는 10보다 작기 때문에

10의 숫자에 도달 할 때 까지 반복 되어야 하지만

if (i === 5) { continue; } 구문으로 추가 조정을 하여 5에 도달할 때

해당 갑을 건너 뛰고 값 계산 및 출력을 한다.

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    continue;
  }
  console.log(i);
}

 

9. while 문

 

while 문은 조건이 참인 동안 코드 블록을 반복 실행하는 반복문이며, 조건이 거짓이 되면 루프가 종료된다.

while 문은 주어진 조건을 먼저 평가한 후, 조건이 참이면 코드 블록을 실행하며,

조건이 처음부터 거짓이면 코드 블록이 한 번도 실행되지 않는다.

 

let i = 0;

while (i < 10) {
  console.log(i);
  i++;
}

 

while 문을 사용할 때 주의 할점은 무한 반복 루프에 빠질 수 있기 때문에

i 값이 증가 할 수 있도록 i++ 를 꼭 입력해줘야 하며

그렇게 i 값이 증가해야만 다음 값 계산으로 넘어갈 수 있다.

9- 1 do...while문

do...while 문은 코드 블록을 먼저 실행한 다음 조건을 평가한다.

조건이 참인 동안 루프를 반복하며, 최소 한 번은 실행되어야 하는 코드를 작성할 때 유용하고

while 문과 동일하게 i 값이 증가 할 수 있도록 i++ 를 꼭 입력해줘야 하며

그렇게 i 값이 증가해야만 다음 값 계산으로 넘어갈 수 있다.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10);

 

 

10. 객체와 배열

원래 객체와 배열에 필요한 메소드를 pair로 정리하려고 했지만

메소드의 경우 JavsScript를 배우는 모든 주차 과정에서 많이 쓰였던 메소드를

한번에 정리해보려고 한다. 그래서 이번 포스팅에서는 메소드에 대한 설명은 생략하고

객체와 배열에 대한 개념만 서술해 보겠다.

10- 1 객체 (Object)

객체(Object)는 <key - value pair> 로 꼭 한쌍을 이루며 중괄호{}로 정의 된다.

앞서 말했듯 객체는 <key - value pair> 로 꼭 한쌍을 이루며 key는 고유해야 하며

뒤에 들어가는 value는 어떤 타입이든 가능하다.

 

// 기본적인 객체 생성
// <key - value pair> 로 꼭 한쌍을 이룬다.
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};



// 생성자 함수를 사용한 객체 생성
// 아래 예제 에서는 생성자 함수 Person()을 사용하여
// 객체person1과 person2를 생성하며
// 생성자 함수를 사용하면 객체를 일괄적으로 생성 할 수 있다.
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
let person1 = new Person("홍길동", 30, "남자");
let person2 = new Person("홍길순", 25, "여자");



// 객체 속성 접근
// 아래 예제 에서는 (.)을 사용하여 객체의 속성에 접근한다.
// 아래는 (person.value)값을 지정하여 속성에 접근하였다.
let person = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person.name);   // "홍길동"
console.log(person.age);    // 30
console.log(person.gender); // "남자"

 

생성자 함수란?
객체를 생성하는 데 사용되는 특별한 함수이며, 보통 대문자로 시작하는 이름을 가진다.
new키워드를 사용하여 호출되며, 생성자 함수는 새로운 객체를 생성하고 초기화하는 역할을 한다.

 

10- 2 객체 비교

아래 예제 에서는 객체를 비교하고 있으며 객체를 비교할때는 === 연산자를 사용할 수 없기 때문에

JSON.stringify()함수를 사용하여 객체를 문자열로 변환한 후에 문자열 비교를 할수 있다.

let person1 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

let person2 = {
  name: "홍길동",
  age: 30,
  gender: "남자"
};

console.log(person1 === person2);   // false
console.log(JSON.stringify(person1) === JSON.stringify(person2));   // true

 

 

10- 3 객체 병합

객체를 병합 할때는 전개 연산자(...)를 사용하는데

전개 연산자(...) (Spread Operator)는 세 개의 점(...)으로 이루어져 있으며,

배열이나 객체와 같은 반복 가능한 객체의 모든 요소를 하나씩 개별적으로 전개(spread)하는 역할을 한다.

전개 연산자는 배열이나 객체를 복사하거나 합칠 때, 함수의 인자로 전달할 때 유용하게 사용된다.

let person1 = {
  name: "홍길동",
  age: 30
};

let person2 = {
  gender: "남자"
};

let mergedPerson = {...person1, ...person2};

console.log(mergedPerson);   // { name: "홍길동", age: 30, gender: "남자" }

 

10- 4 배열 (Array)

배열은 순서가 있는 값의 컬렉션이다.

배열의 각 값은 요소 or 원소(element)라고 하며, 대괄호 []로 정의된다.

// 기본적인 배열 생성
let fruits = ["사과", "바나나", "오렌지"];

 

 

배열[]의 인덱스(위치)는 0부터 시작한다.

가령 아래의 예제를 해석하자면..

let fruits = ["사과", "바나나", "오렌지"];

console.log(fruits[0]);   // "사과"
console.log(fruits[1]);   // "바나나"
console.log(fruits[2]);   // "오렌지"

배열 fruits의 첫 번째 요소부터 세 번째 요소까지 출력하고,

배열의 요소에 접근할 때는 대괄호([]) 안에 인덱스 값을 넣는다.

 

 

💡오늘은 TIL1과 TIL2를 통해 1주차 배운개념을 정리해 보았다.

내일은 2주차 강의 내용을 듣고 TIL3을 통해 배운 지식을 정리해 볼 생각이다.

 

원래 사전과정 때도 노트에 필기를 하며 JavaScript를 정리 해 왔지만..

시간이 꽤나 오래 걸리기도 했었고 필기하는 손의 피로도 높았었는데,

TIL을 하면서 이전보다 피로감도 덜하고 정리 할때도

아티클로 정리해야 하다보니 머리에서 한두번 더 되뇌이게 된다.

 

TIL을 꾸준하게 하여 계속 해서 성장해 보겠다.