[20221107] 자바스크립트 기초 문법 (feat. 항해99 프리온보딩 1일차)

1. 불리언 연산

Falsy 값에는 빈 문자열 '', 숫자 0, 불리언 false, null, undefined, NaN가 해당된다. Falsy 값이 아닌 모든 값은 Truthy 값으로 연산되며 결국 true로 평가된다고 이해할 수 있다. 항상 Truthy 로 판단되는 자료형에는 Array와 Object가 있다. 다른 자료형을 가진 값에 강제로 불리언 연산을 적용하려면 Boolean 함수를 사용할 수 있다.

Boolean('String') 
// true
Boolean('')
// false
Boolean(undefined)
// false

2. 논리 연산자

&& (AND 연산자)

condition1 && condition2 의 형태로 표현하며, condition1~2는 모든 자료형의 값을 넣을 수 있으며, 불리언 연산이 적용된다. 연산자 양쪽에 있는 값 모두 Truthy 해야 AND 연산자의 결과물도 Truthy 한것으로 볼 수 있다.

 

조건은 여러개를 사용할 수 있으며, 이를 Chaining이라 부른다.

• 'String' && true && [] && {} && undefined → 결과: undefined
• 'String' && false && [] && {} && undefined → 결과: false

만약 condition1 과 condition2 의 자료형은 String 또는 null만 가진다고 가정할 경우, 두가지의 동일한 방법을 사용할 수 있다.

// 첫번째 방법
let result = null;

if (condition1 && condition2)
	result = 'Value';
    
// 두번째 방법
const result = condition1 && condition2 && 'Value';

 

|| (OR 연산자)

condition1 || condition2 의 형태로 표현하며, condition1~2는 모든 자료형의 값을 넣을 수 있으며, 불리언 연산이 적용된다. 연산자 양쪽에 있는 값 중 하나라도 Truthy 하면 OR 연산자의 결과물도 Truthy 한다.

 

AND 연산자와 마찬가지로 Chaining이 가능합니다.

• false || '' || 0 || null || 'Value!!' || undefined → 결과: 'Value!!'
• false || '' || 1 || null || NaN || undefined → 결과: 1

각 조건이 존재하는지 condition1부터 체크하며 값이 존재하면 해당 조건에 있는 값을 result의 값으로 사용한다고 가정할 경우, 두가지 동일한 방법으로 구현이 가능하다.

// 첫번째 방법
let name;

if (condition1)
	name = condition1;
else if (condition2)
	name = condition2;
else if (condition3)
	name = condition3;
else
	name = '강승현';
    
// 두번째 방법
const name = condition1 || condition2 || condition3 || '강승현';

 

! (NOT 연산자)

!value 의 형태처럼 표현하며, value는 모든 자료형의 값을 넣을 수 있다. NOT 연산자의 결과물은 항상 불리언 연산이 적용된 Boolean 자료형의 값이다. (true or false) 즉, !'StringValue!!' , !true , !1234 등 불리언 연산에서 Truthy로 평가되는 값의 반대 값을 반환하므로 항상 false가 반환되며, !'', !0, !NaN, !false 등 불리언 연산에서 Falsy로 평가되는 값의 반대 값을 반환하므로 항상 true가 반환된다.

 

3. 함수 구현

나이에 따라 달라지는 명령어를 실행하는 함수

function isAdult(person) {
  // 왜 이런 코드가 가능한지 모르겠다면 비교 연산자를 복습하세요! 기초 튼튼!
  return person.age >= 19;
}

function orderBeer(person) {
  if (isAdult(person)) {
    console.log('맥주 나왔습니다! ' + person.name + '님');
  } else {
    console.log('나이 더 먹고 오세요! ' + person.name + '님');
  }
}

const persons = [
  { name: "강승현", age: 19 },
  { name: "홍길동", age: 18 },
];

// for...of문이 어떻게 동작하는지 모르겠다면 반복문을 복습하세요!
for (const person of persons) {
  orderBeer(person);
}

// Print: 맥주 나왔습니다! 강승현님
// 나이 더 먹고 오세요! 홍길동님

 

화살표 함수를 사용하여 보다 간편하게 사용해보자!

const personArray = [
  { name: "John Doe", age: 20 },
  { name: "Jane Doe", age: 19 },
  { name: "Fred Doe", age: 32 },
  { name: "Chris Doe", age: 45 },
  { name: "Layla Doe", age: 37 },
];

// personArray의 나이 평균을 구해주는 Arrow Function을 작성해봅시다.
const getAgeAverage = (personArray) => {
	let sum = 0;
	for (let person of personArray) {
		sum = sum + person["age"];
	}
	const average = sum / personArray.length;

	return average;
}

console.log(getAgeAverage(personArray));

 

4. 익명함수

익명 함수는 일반 함수와 다르게 함수의 이름이 존재하지 않고 변수에 함수를 담아 사용하는 함수다. 변수에 값을 저장하는 방법처럼 변수에 함수를 저장해서 사용한다.

// 일반 함수
function foo() {
  console.log("bar");
}

// 익명 함수
let foo = function () {
  console.log("bar");
};

익명 함수는 주로 재사용 되지 않고 한번만 사용되는 함수일 경우에 자주 사용하게 되는데, 이는 일회성인 함수를 일반 함수로 구현 함으로서 불필요한 메모리를 차지하는것을 방지하여 메모리 낭비를 줄일 수 있다는 장점 때문에 주로 사용된다.  하지만 익명 함수 또한 단점이 있는데 Hoisting이 적용되지 않는다는 단점이 있다. 일반적으로 작성된 함수의 경우 함수 선언보다 호출이 위에 있더라도 호출하는 위치에 상관없이 사용될 수 있지만, 익명함수의 경우 Hoisting이 적용되지 않아 에러가 나오게 된다.

// 일반 함수로 선언부보다 위에서 함수를 호출했을 때, 정상적으로 호출된다.
hello(); // hello!

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

// 익명 함수의 경우, 에러가 뜬다.
hello(); // Uncaught ReferenceError: Cannot access 'hello' before initialization

const hello = function() {
  console.log("hello!");
}

 

5. 구조 분해 할당

구조 분해 할당 문법은 배열(Array)혹은 객체(Object)에서 각각 값 이나 프로퍼티를 분해하여 손쉽게 개별 변수에 담을 수 있도록 해 준다.

// 배열에서의 구조 분해 할당
const [a, b] = [100, 200];
console.log(a); // 100
console.log(b); // 200

//혹은 아래와 같이 표현할수있습니다.

const array = [100,200]
const [a,b] = array
console.log(a); //100
console.log(b); //200

// a 에는 array[0] , b에는 array[1] 값이 할당 되었습니다.

배열에서의 구조 분해 대상이 배열의 값이 였다면 , 객체에서는 프로포티(property) 가 대상이 된다.

// 객체에서의 구조 분해 할당
const student = {
  name: "Sparta",
  age: 18,
  onlineClass: "Node JS",
};
const { name, age, onlineClass } = student
console.log(name); // "Sparta"
console.log(age); // 18
console.log(onlineClass); // "Node JS"

cf. 참고로 자바스크립트의 기본 타입(data type)은 객체(object)다. 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다. 예를 들어 아래와 같이 고양이 객체는 다음과 같은 프로퍼티들을 갖는다.

let cat = { name: "나비", age: 1, weight: 0.1, mew: function() {return...} };

// 프로퍼티(property)
cat.name = "나비"
cat.age = 0.1
cat.weight = 300

// 메소드(method)
cat.mew()
cat.eat()
cat.sleep()
cat.play()