[DAY3] JavaScript 기초 2(변수, 조건문)

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

JavaScript 프로그래밍 언어에서 변수의 선언과 할당, 조건문(if, else)의 사용법을 정리함.

 

🚀3. 변수의 선언과 할당

 

1) 변수 선언	let과 const 키워드를 사용해 변수를 선언함. var는 오래된 키워드로, 현대적인 JavaScript 코드에서는 사용을 지양함.
2) 값의 할당	할당 연산자 =를 사용하여 변수에 값을 할당함.
3) 데이터 타입	JavaScript에서는 숫자, 문자열, 불리언, 배열, 객체 등 다양한 데이터 타입을 변수에 할당할 수 있음.
4) 재할당과 상수	let으로 선언된 변수는 재할당이 가능하지만, const로 선언된 변수는 재할당이 불가능함.

 

🚀4. 조건문

 

1) if문	주어진 조건이 참(true)일 때 실행됨.
2) else문	if문의 조건이 거짓(false)일 때 실행됨.
3) 삼항 조건 연산자	간단한 조건에 따른 실행을 한 줄로 표현할 수 있음.

 

3. 변수의 선언과 할당

---

• 변수: JavaScript에서 특정 데이터에 이름을 붙이는 것

변수를 선언할 때는 let 키워드를 사용함. let 키워드 뒤에 선언하고자 하는 변수명을 입력함.

let name;

선언된 변수에 값을 할당할 때는 할당 연산자(=)를 사용함.

name = 'kimcoding';

변수 선언과 값 할당을 동시에 할 수 있음.

let name = 'kimcoding';

변수에는 JavaScript에서 사용이 가능한 모든 타입의 값을 할당할 수 있음.

let string = '원주율';
let number = 3.141592;
let boolean = true;
let array = [1, 'two', false];
let object = {name: 'kimcoding', age: 25, course: 'SEB FE'};
let empty = null;
let notDefined = undefined;

1) 아무것도 할당하지 않은 변수

아무것도 할당되지 않은 변수는 undefined가 자동으로 할당됨. 이는 초기화라는 JavaScript의 독특한 특징임.

let variable;
console.log(variable) // undefined

2) 값의 재할당

let키워드로 선언한 변수에 새로운 값을 할당할 수 있음. 이를 재할당이라고 함. 할당연산자(=)를 사용함.

let name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker';
console.log(name) // 'parkhacker'

3) 재할당이 불가능한 변수(상수)

let 키워드가 아닌 const 키워드를 사용하면 재할당이 금지됨.

const name = 'kimcoding';
console.log(name) // 'kimcoding'
name = 'parkhacker'; // Uncaught TypeError: Assignment to constant variable.

4) var 키워드

var키워드는 let키워드와 const키워드가 등장하기 이전에 사용되던 변수 선언 키워드임.

var키워드의 단점을 보완하기 위해 let키워드와 const키워드가 등장함. 따라서 let키워드와 const키워드를 사용할 것을 권장함.

재할당이 필요한 변수에는 let키워드를, 재할당이 불필요하거나 변경되는 것을 방지해야 하는 변수는 const키워드를 사용함.

var name = 'kimcoding'; // var키워드가 가지고 있는 단점으로 인해 사용을 지양하는 것이 좋음.

5) 네이밍 규칙

변수명은 다음과 같은 네이밍 규칙을 준수해야 함.

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있음. 

let name, $head, _score // 사용 가능한 변수명

• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 함. 숫자로 시작하는 것은 허용하지 않음. 

let 1st; // 사용할 수 없는 변수명

• 예약어는 식별자로 사용할 수 없음.
  • 예약어: 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말함. - ex) let, const, true, false, typeof 등

let true; // 사용할 수 없는 변수명

• 그 외 규칙들
  • 변수명은 변수의 존재 목적을 이해할 수 있도록 의미를 명확히 표현해야 함.

// 변수의 존재 목적을 이해할 수 없는 변수명
let x = 100;
let y = 5;

// 변수의 존재 목적을 명확히 알 수 있는 변수명
let name = 'kimcoding';
let age = 25;

6) 네이밍 컨벤션

영어단어로 식별자를 만들 경우 네이밍 컨벤션을 잘 지키면 가독성을 높일 수 있음. JavaScript에서는 일반적으로 카멜 케이스(camelCase)를 사용함. 카멜 케이스는 낙타의 등모양에서 유래된 이름으로써, 첫 단어의 첫 문자는 소문자로, 그 이후에 연결되는 단어의 첫 문자는 대문자로 작성하는 방법임.

// 🐪카멜 케이스(camelCase)
let firstName = 'coding'; 
let lastName = 'kim';

// 그밖에 네이밍 컨벤션
let first_name; // 🐍스네이크 케이스(snake_case) : 단어와 단어 사이에 언더스코어(_)를 사용
let FirstName; // 📐파스칼 케이스(PascalCase) : 단어의 시작을 대문자로 작성

7) 변수를 활용한 연산

변수에 숫자 타입의 값이 할당되어 있는 경우, 숫자 타입에 사용 가능한 모든 연산이 가능함.

let number = 10;
console.log(number + 2); // 12
console.log(number - 5); // 5
console.log(number * 3); // 30
console.log(number / 2); // 5
console.log(number % 3); // 1
console.log(number); // 10

그러나 각각의 연산은 독립적으로 이뤄질 뿐, number는 그대로 10이 할당되어 있음. 연산의 결과를 변수에 반영하려면 어떻게 해야 할까? 재할당을 하면 됨.

let number = 10;
number = number + 2;
console.log(number); // 12

number = number * 3;
console.log(number); // 36

변수끼리의 연산도 가능함.

8) 템플릿 리터럴(template literal)

값을 큰따옴표(”), 작은따옴표(’), 백틱(`)으로 값을 감싸면 문자열(string) 타입이 된다는 것을 이전에 학습함. 이 중에서 백틱을 사용하는 방법을 템플릿 리터럴이라고 함. 템플릿 리터럴은 큰따옴표, 작은따옴표를 사용한 표기 방법과는 다른 기능을 가지고 있음. 특히, 문자열 내부에 변수 삽입할 수 있는 기능은 매우 유용하게 사용되므로 반드시 알아두어야 함.

템플릿 리터럴 내부에 ${}를 사용하여 변수를 삽입할 수 있음. 이때, 문자열이 할당되지 않은 변수도 문자열로 취급됨.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(`${course} ${cohort} ${name}`); // 'SEB FE 99 kimcoding'

단어와 단어 사이에 공백을 삽입하기 위해 ‘ ‘를 사용하는 것보다 템플릿 리터럴을 사용하는 것이 가독성 측면에서 훨씬 우수함.

let course = 'SEB FE';
let cohort = 99;
let name = 'kimcoding';
console.log(course + ' ' + cohort + ' ' + name); // 'SEB FE 99 kimcoding'

 

4. 조건문

---

1) if문

가장 대표적인 조건문인 if문에 대해서 학습함. if문은 주어진 조건식의 참(true)/거짓(false) 여부에 따라 실행이 결정됨. 참과 거짓을 판단하기 위한 JavaScript의 타입은 불린 타입을 학습함. 따라서 조건식은 결과가 불린 타입이 되도록 작성해야 함.

조건식의 평가 결과가 참일 때 문자열 ‘hello world’를 출력하기 위한 코드는 아래와 같음.

if (true) {
	console.log('hello world');
}

if 뒤에 있는 소괄호에 조건식을 넣으면, 조건식이 참으로 평가된 경우 코드블록 내부의 코드가 실행됨. 지금은 true를 넣었기 때문에 console.log('hello world')가 실행됨.

a. 동치연산자 (===)

동치연산자는 두 피연산자가 동일하면 true, 그렇지 않으면 false를 반환함. !==는 반대로 두 피연산자가 동일하지 않으면 true, 동일하면 false를 반환함.

let name = 'kimcoding';
if (name === 'kimcoding') {
	console.log('중복된 이름입니다.'); // '중복된 이름입니다.'
}

let name = 'parkhacker';
if (name !== 'kimcoding') {
	console.log('가입할 수 있는 이름입니다.'); // '가입할 수 있는 이름입니다.'
}

b. 비교연산자(> , < , >= , <=)

비교연산자는 두 피연산자의 값의 크기를 비교함. 수학에서의 부등호 기호의 사용법과 유사함.

let num = 5;
if (num < 10) {
	num = num + 1;
}
console.log(num); // 6

if (num > 5) {
	num = num - 1;
}
console.log(num); // 5

c. 논리연산자(&&, ||)

논리합(||)과 논리곱(&&)을 사용하면 복수의 조건을 작성할 수 있음. ||은 여러 조건 중 하나만 true여도 true로 판단됨. &&은 여러 조건 중 하나라도 false이면 false로 판단됨.

let age = 15;
if (age > 13 && age <= 19) {
	console.log('청소년입니다.'); // '청소년입니다.'
}

d. 부정연산자(!)

부정연산자는 조건을 부정함. 조건이 true이면 false, 조건이 false이면 true를 리턴함.

let num = 11;
if (!(num === 10)) {
	console.log('변수 num은 10이 아닙니다.'); // '변수 num은 10이 아닙니다.'
}

2) else문

if문을 사용하여 조건식이 true일 때만 코드가 실행되도록 할 수 있음. 그런데 조건이 true일 때, 그리고 false일 때 각각 다른 코드가 실행되도록 하기 위해 else문을 사용함.

let num = 5;
if (num % 2 === 0) {
	console.log('짝수입니다.');
} else {
	console.log('홀수입니다.'); // '홀수입니다.'
}

else문은 독립적으로 사용할 수 없고, if문 바로 뒤에 작성해야 함. 여기서 조건을 더 추가하고 싶으면 else if문을 사용함.

let name = 'kimcoding';
let course = 'seb be'

if(name === 'kimcoding' && course === 'seb fe') {
	console.log('정보가 일치합니다.')
} else if (name === 'kimcoding' && course !== 'seb fe') {
	console.log('코스를 확인하세요.') // '코스를 확인하세요.'
} else {
	console.log('일치하지 않는 정보입니다.')
}

if문과 else문은 두 번 이상 사용할 수 없지만 else if문은 여러 번 사용이 가능함.

let age = 15;
if (age < 8) {
  console.log('미취학아동입니다.');
} else if (age >= 8 && age < 14) {
  console.log('초등학생입니다.');
} else if (age >= 14 && age < 17) {
  console.log('중학생입니다.'); // '중학생입니다.'
} else if (age >= 17 && age < 20) {
  console.log('고등학생입니다.');
} else {
  console.log('성인입니다.');
}

a. 삼항 조건 연산자

if문과 else문을 삼항 조건 연산자로 바꿔 쓸 수 있음.

let num = 5;
num % 2 === 0 ? console.log('짝수') : console.log('홀수'); // '홀수'

삼항 조건 연산자는 조건식을 먼저 작성한 후 ?를 입력하고, ? 뒤로 참/거짓일 때 실행할 코드를 각각 입력함. 참/거짓일 때 실행할 코드는 :로 구분함. 위 코드는 아래 코드와 동일하게 동작함.

let num = 5;
if (num % 2 === 0) {
	console.log('짝수입니다.');
} else {
	console.log('홀수입니다.'); // '홀수입니다.'
}

위의 예시처럼 조건에 따라 실행할 코드가 간단하다면, 삼항 조건 연산자를 활용하는 것이 편리할 뿐만 아니라 가독성도 좋음. 그러나 조건에 따라 실행해야 할 내용이 복잡하다면, if문과 else문을 사용하는 것이 좋음.

⭐후기

---

• 변수와 조건문은 JavaScript를 이해하는 데 있어 핵심적인 요소임.
• 변수를 어떻게 선언하고 사용하는지, 조건문으로 프로그램의 흐름을 어떻게 제어하는지에 대한 기본적인 이해를 할 수 있었음.
• let, const, var가 가지는 함수 스코프의 차이점에 대해 추가적으로 공부하고,. 실제 프로젝트에서 변수명을 어떻게 지어야 하는지에 대한 구체적인 예시와 이유를 찾아봐야 겠다고 생각함.

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.