Javscript 기초 문법 02 - 조건문, 논리연산자, 반복문, 화살표함수, 전개구문, map(), filter()

불리언 연산

• 어떤 값이 true인지 false인지 판단하는 연산. Boolean() 꼴을 활용
• 빈 문자열 '', 숫자 0, false, null, undefined, NaN 은 false를 출력하고, 이외의 모든 값은 true를 출력
• 객체와 배열은 항상 true로 판단됨

Boolean(''); // 출력 : false
Boolean(0); // 출력 : false
Boolean(); // 출력 : false

Boolean([a, b, c]); // 출력 : true
Boolean({key1 : value1, key2 : value2, key3 : value3}); // 출력 : true

 

조건문

• 조건의 값이 true일 때, 명령을 실행

if (조건1) {
	명령1 // 조건1 === true면, 명령1 실행
} else if (조건2) {
	명령2 // 조건1 === false이고 조건2 === true면, 명령2 실행
} else {
	명령3 // 이전의 조건이 모두 false면, 명령3 실행
}

 

논리 연산자

[AND 연산자]

• 조건1 && 조건2의 형태. 비교하는 모든 조건이 true여야 최종 결과도 true

※ &&를 활용한 변수 할당

연산자로 묶인 모든 값이 true인 경우, 맨 뒤의 값이 변수에 대입됨

const condition1 = 1;
const condition2 = true;

const result = condition1 && condition2 && 'True'; // result에 'True'가 할당됨

 

[OR 연산자]

• 조건1 || 조건2의 형태. 비교하는 조건 중 하나라도 true면 최종 결과도 true

※ ||를 활용한 변수 할당

묶인 모든 값 중에 제일 먼저 발견된 true인 값이 변수에 대입됨

const condition1 = false;
const condition2;
const condition3 = null;

const result = condition1 || condition2 || 'True' || condtion3; // result에 'True'가 할당됨

 

[NOT 연산자]

• !조건의 형태. 조건에 불리언 연산을 적용한 값의 반대 값을 반환함.

※ Chaining

 여러 조건이 논리 연산자를 통해 엮인 형태

조건1 && 조건2 && 조건3 && 조건4
조건1 || 조건2 || 조건3 || 조건4

 

반복문

[for 문]

for (초기문; 조건문; 증감문) {
	// 명령문
}

for (let a = 0; a <= 5; a++) {  // 초기문 : a의 시작값은 0, 증감문 : 매 시행마다 a에 1을 더함
	console.log(a); // 조건문 : a가 5보다 같거나 작을 동안, 명령문 : a를 출력
}

• 초기문 : for문 안에서만 사용될 변수를 선언
• 조건문 : 조건의 값이 false가 되는 순간, 반복을 중단하고 구문에서 퇴장함
• 증감문 : 매 반복이 마칠 때마다 증감문의 내용을 실행
• 초기문 → 조건문 검사해서 true라면 → 명령문 실행 → 증감문 실행 → 조건문 검사의 반복
• break문 : 반복 중 만나면 조건문 검사와 상관 없이 즉시 반복문에서 퇴장하는 구문
• continue문 : 반복 중 만나면 그 이후의 명령을 무시하고 증감문 실행 단계로 스킵하는 구문

 

[for of 문]

• 변수에 배열의 내용을 반복해서 대입. 이때 대입 순서는 인덱스 순서

const them = [personA, personB, personC];

for (const him of them) { // for (변수선언 of 반복가능한객체) {} 
 console.log(him);
} 
// him에 personA가 대입됐다가, personB가 대입됐다가, personC가 대입됨.

 

[for in 문]

• 변수에 배열의 인덱스 값을 반복해서 대입

const them = [personA, personB, personC]; 

for (const him in them) { // for (변수선언 in 반복가능한객체) {}
 console.log(him);
} 
// him에 0이 대입됐다가, 1이 대입됐다가, 2가 대입됨.

 

번외

[화살표 함수 Arrow function]

• function 키워드 없이 함수를 만들 수 있음
• 익명 함수 : 일회성으로만 사용할 함수인 경우, 화살표 함수를 활용해 함수명 없이 함수를 만들 수 있음
• 암시적 반환 : 화살표 함수를 활용해 return을 생략하고 함수를 만들 수 있음. 다만 중괄호로 묶이는 경우엔 무조건 return을 해줘야 함수가 값을 반환하니 주의

/* 화살표 함수 방식 1 */
const 함수명 = ( 인자들 ) => { 함수내용 }
/* 방식1 예시 */
const add = (a, b) => {
	return a + b;
}

/* 화살표 함수 방식 2 (암시적 반환) */
const 함수명 = () => 함수내용 // 함수가 반환하는 값을 한 줄로 표현할 수 있는 경우
/* 방식2 예시 */
const add = (a, b) => a + b;

 

[전개 구문 spread operator]

• 기존 객체나 배열의 내용을 가져오거나, 새로운 값을 덧붙여 새 객체나 배열을 생성할 수 있음.
• 이때 기존 객체나 배열엔 영향을 주지 않고, 새로운 복사본을 만드는 개념임.

/* 전개구문 형태 */
const 새배열명 = [...기존배열명];
const 새객체명 = {...기존객체명};

/* 전개구문 예시*/
const colors = ['white', 'black', 'blue', 'green', 'red', 'yellow'];
const John = {name : John, age : 25, height : 180};

const newColors = [...colors]; // colors와 내용물이 같은 newColors란 배열이 생김
const newNewColors = [...colors, 'purple']; // colors에 ['purple']이란 값이 추가된 새 배열 생김

const newJohn = {...John}; // John과 내용물이 같은 newJohn이란 객체가 생김
const newNewJohn = {...John, weight : 70}; // John에 {weight : 70}이란 값이 추가된 새 객체 생김

 

※ map()

• 특정 배열의 모든 요소에, 함수를 적용한 결과 값을 모아 새 배열을 반환해줌

const colors = ['blue', 'red', 'green', 'yellow'];

/* 변수선언 = 적용할배열명.map(함수) */
const newColors = colors.map(function(color) {
	return color + '!!';
}) // newColors = ['blue!!', 'red!!', 'green!!', 'yellow!!']란 새 배열 생김

/* 화살표 함수로도 같은 결과 가능 */
const newColors = colors.map(color => color + '!!');

 

※ filter()

• 특정 배열에서 설정된 조건에 해당하는 값만을 추출한 새 배열을 출력해줌

const colors = ['white', 'black', 'blue', 'red', 'green', 'yellow'];

/* 변수선언 = 추출할배열명.filter(함수) */
const FiveLengthColor = colors.filter(function(newColor) {
	return newColor.length === 5;
}); // FiveLengthColor = ['white', 'black', 'green'] 인 새로운 배열 생김

// 화살표 함수를 통해 같은 결과 낼 수 있음
const FiveLengthColor = colors.filter(newColor => newColor.length === 5);