JavaScript(3)

Minji Lee·2023년 9월 5일
JavaScriptjs구문연산자자바스크립트
0

javascript

목록 보기
3/11
post-thumbnail

Ch03 연산자와 구문

산술(Arithmetic)

  • 피연산자: 데이터
  • 연산자: 기호
console.log(1+2); // 3
console.log(5-7); // -2
console.log(3*4); // 12 
console.log(10/2); // 5
console.log(7%5); // 2 → 나머지 연산자

할당(Assignment)

  • const: 재할당 X, 재선언 X
const a = 3;
console.log(a); // 3

a = a+2;
console.log(a); // 재할당 불가
  • let: 재할당 O, 재선언 X
let a = 3;
console.log(a); // 3

a = a+2; // a+=2;
console.log(a); // 5
  • var: 재할당 O, 재선언 O

증감(Increment & Decrement)

  • 변수++: 나중에 증가
  • ++변수: 먼저 증가
  • 변수--: 나중에 감소
  • --변수: 먼저 감소
let a = 3;
console.log(a++); // 3 
console.log(a); // 4

부정(Negation)

  • ! (부정연산자): 해당 데이터의 반대 boolean 데이터 출력
console.log(!true); // false
console.log(!false); // true

console.log(!0); // true
console.log(!!0); // falseㅊ

비교(Comparison)

  • 동등(==), 부등(!=) → 형변환
  • 일치(===), 불일치(!==) → 형변환 X
const a = 1;
const b = 3;

// 동등(형 변환)
console.log(a == b); // false
// 부등(형 변환)
console.log(a != b); // true

// 일치
console.log(a === b); // false
// 불일치
console.log(a !== b); // true

// 큼
console.log(a>b); // false
// 크거나 같음
console.log(a>=b); // false
console.log(a<b); // true
console.log(a<=b); // true

논리(Logical)

  • AND 연산자(&&) → 모두 참이어야 true

    • 거짓 데이터가 존재하는 경우, 거짓 데이터를 반환

    • 모두 참인 경우, 가장 마지막에 있는 참 데이터를 출력

      // AND(그리고) 연산자
const a = true
const b = false

if (a && b) {
	console.log('모두 참!');
}

console.log(true && false); // false
console.log(1 && 0); // 0
console.log(1 && 2 && 0); // 0
console.log(1 && 0 && 2); // 0
console.log('A' && 'B' && 'C') // C
  • OR 연산자(||) → 둘 중 하나라도 참 이어도 true

    • 참 데이터가 존재하는 경우, 가장 먼저 만난 참 데이터를 반환

    • 모두 거짓인 경우, 가장 마지막에 있는 거짓 데이터를 출력

      // OR(또는) 연산자
const a = true
const b = false

if (a || b) {
	console.log('하나 이상 참!'); // 하나 이상 참!
}

console.log(true || false); // true
console.log(0 || 1); // 1
console.log(false || 0 || {}); // {}
console.log(false || 0 || NaN); // NaN

Nullish 병합

왼쪽부터 오른쪽으로 null, undefined 제외하고 제일 먼저 나온 데이터를 반환

→ 만약, null과 undefined만 존재하는 경우 맨 마지막에 나온 데이터 반환

const n = 0;

// OR 연산자 사용한 경우
const num1 = n || 7
console.log(num1); // 0

// Nullish 병합 연산자를 사용한 경우
const num2 = n ?? 7
console.log(num2); // 0

console.log(null ?? 1); // 1
console.log(undefined ?? 2); // 2
console.log(null ?? undefined); // undefined
console.log(null ?? 1 ?? 2); // 1
console.log(false ?? 1?? 2); // false
console.log(0 ?? 1 ?? 2); // 0

삼항(Ternary) 연산자

조건 ? 참 : 거짓

const a = 1;

// if-else 문
if(a<2){
	console.log('참');
} else {
	console.log('거짓');
}

// 삼항 연산자
console.log(a < 2 ? '참' : '거짓');

function getAlert(message) {
	return message ? message : '메시지가 존재하지 않습니다.';
}

console.log(getAlert('안녕하세요~')); // 안녕하세요~
console.log(getAlert('')); // 메시지가 존재하지 않습니다.

전개(Spread)

…배열데이터 → 대괄호를 없애고 콤마(,)로 구분하여 데이터 나열

const a = [1,2,3];
const b = [4,5,6];

console.log(...a); // 1 2 3

// concat()이용하여 배열 병합
const c = a.concat(b); // 배열 병합
console.log(c); // [1,2,3,4,5,6]

// 전개 연산자 이용하여 배열 병합
const d = [...a, ...b]; 
console.log(d); // [1,2,3,4,5,6]

…객체데이터 → 중괄호를 없애고 콤마(,)로 구분하여 데이터 나열

const a = {x:1, y:2}
const b = {y:3, z:4}

// assign 메소드 이용하여 객체 병합
const c = Object.assign({}, a, b);
console.log(c); // {x:1, y:3, z:4}

// 전개 연산자 이용하여 객체 병합
const d = {...a,...b}
console.log(d); // {x:1, y:3, z:4}
  • 전개 연산자를 통해 함수에 매개변수 넣기
    function fn(x,y,z) {
	console.log(x,y,z); // 1 2 3
}

fn(1,2,3);

const a = [1,2,3];
fn(...a); // 1 2 3

⭐️ 구조 분해 할당 ⭐️

배열 구조 분해 할당

const [] = 배열

❗️구조를 맞춰서 순서대로 변수를 할당 → 사용하지 않는 변수는 ,로 비워두어야함

const arr = [1, 2, 3];
// const a = arr[0];
// const b = arr[1];
// const c = arr[2];
const [a,b,c] = arr;
console.log(a, b, c); // 1 2 3

// 원하는 데이터만 할당하고 싶을 경우
const arr2 = [1, 2, 3];
const [,e,f] = arr2;
console.log(e, f); // 2 3

// 전개 연산자를 통한 구조 분해 할당 → 하나의 변수에 몰아 넣음
const arr3 = [1, 2, 3];
const [g, ...rest] = arr

console.log(g, rest); // 1 [2, 3]

객체 구조 분해 할당

const {} = 객체

const obj = {
	a: 1,
	b: 2,
	c: 3
}
// const a = obj.a;
// const b = obj.b;
// const c = obj.c;
const {a, b} = obj;
const {c} = obj;
const {x} = obj;
const {y=3} = obj; // y가 값이 없으면 3으로 지정(기본값)
const { a: num } = obj; // obj에서 a 데이터를 꺼내지만 이름 변경

console.log(a,b); // 1 2
console.log(c); // 3
console.log(x); // undefined
console.log(y); // 3 
console.log(num); // 1

// 전개 연산자를 통한 구조 분해 할당 → 하나의 변수에 몰아 넣음
const obj2 = {
	a: 1,
	b: 2,
	c: 3,
	x: 7,
	y: 100
}

const {c, ...rest} = obj;
console.log(c, rest);
/* 
	3
	{a:1, b:2, x:7, y:100}
*/

선택적 체이닝(Optional Chaining)

? 앞쪽의 데이터가 점 표기법을 사용할 수 없는 데이터인 경우에도 에러 발생 시키지 않음 → undefined로 출력되게 함

const user = undefined;

console.log(user?.name); // undefined

// 타입 에러가 발생할 수 있는 부분에 선택적 체이닝 사용
const userA = {
	name: '홍길동',
	age: 85,
	address: {
		country: 'Korea';
		city: 'Seoul'
	}
}

const userB = {
	name: '김철수',
	age: 22
}

function getCity(user){
	return user.address?.city || '주소 없음' ;
}

console.log(getCity(userA)); // Seoul
console.log(getCity(userB)); // 주소 없음

조건문(if, switch)

if 문

if(조건){
	// 참인 경우 동작
}

if(조건) {
	// 참인 경우 동작
} else {
	// 거짓인 경우 동작
}

if(조건1) {
	// 조건1이 참인 경우 동작
} else if(조건2) {
	// 조건2가 참인 경우 동작
} else if(조건3) {
	// 조건3이 참인 경우 동작
} else { 
	// 위가 모두 거짓인 경우 동작
}

// ex
function isPositive(number) {
	if(number > 0) {
		return '양수';
	} else if (number < 0){
		return '음수';
	} else {
		return '0';
	}
}
console.log(isPositive(1)); // 양수
console.log(isPositive(-1)); // 음수
console.log(isPositive(0)); // 0

Switch문

switch (조건) {
	case 값1:
		// 조건이 '값1'일 때 실행
		break;
	case 값2:
		// 조건이 '값2'일 때 실행
		break;
	default:
		// 조건이 '값1'도 '값2'도 아닐 때 실행
}

// ex) break문 사용
function price(fruit){
	let p;
	switch (fruit) {
		case 'Apple':
      		p = 1000;
			break;
		case 'Banana':
			p = 2000;
			break;
		case 'Cherry':
			p = 3000;
			break;
		default:
			p = 0;
	}
	return p;
}
console.log(price('Apple')); // 1000
console.log(price('Banana')); // 2000
console.log(price('Cherry')); // 3000
console.log(price('Hello')); // 0

// ex) return 키워드 사용
function price(fruit){
	switch (fruit) {
		case 'Apple':
      		return 1000;
		case 'Banana':
			return 2000;
		case 'Cherry':
			return 3000;
		default:
			return 0;
	}
}
console.log(price('Apple')); // 1000
console.log(price('Banana')); // 2000
console.log(price('Cherry')); // 3000
console.log(price('Hello'));

반복문(For, For of, For in)

→ 배열, 객체에서 주로 사용

For 반복문

for (초기화; 조건; 증감){
	// 반복 실행할 코드
}

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

for (let i=9;i>-1;i-=1){
	if (i<4){
		break; // 반복문 종료
	}
	console.log(i);
}

for (let i=9;i>-1;i-=1){
	if (i%2 === 0){
		continue; // 현재 반복문 종료(짝수인 경우 다음 반복 실행)
	}
	console.log(i);
}

For of 반복문

const fruits = ['Apple', 'Banana', 'Cherry'];

for (const 담을 변수 of 배열명) {
}

/*
for (let i=0;i<fruits.length;i+=1){
	console.log(fruits[i]);
}
*/

for (const fruit of fruits) {
	console.log(fruit);
}

const users = [
	{
		name: '홍길동',
		age: 85
	},
	{
		name: '김철수',
		age: 22
	},
	{
		name: '가나다',
		age: 34
	}
}

for(const user of users){
	console.log(user);
}

for(const user of users){
	console.log(user.name);
}

For in 반복문

const user = {
	name: '홍길동',
	age: 85,
	isValid: true,
	email: 'abc@gamil.com'
}
for (const key in user){
	console.log(key);
	console.log(user[key]);
	/*
		name
		홍길동
		age
		85
		isValid
		true
		email
		abc@gmail.com
	*/
}

반복문(While, Do While)

While 반복문

→ for반복문과 유사하지만, 무한 루프에 빠질 수 있어 주의해야함

let n = 0;
while (n<4){ // 조건이 거짓인 경우 반복 중단
	console.log(n);
	n+=1;
}

Do While 반복문

  • 최소한 한번은 코드가 실행됨 → 일단 코드 실행하고 조건 검사
do {실행할 코드} while (조건);

let n = 0;

do {
	console.log(n);
} while(n);

do {
	console.log(n);
	n += 1;
} while(n<4);
profile
Minji Lee
이전 포스트

JavaScript(2)

다음 포스트

JavaScript(4)

0개의 댓글