오늘 드디어 처음으로 자바스크립트를 배우게 되었다.
다른 언어는 조금씩 유튜브나 강의 사이트를 통해 공부해봤지만, 자바스크립트를 본격적으로 공부하게 된 건 오늘이 처음이었다. 자바스크립트 기본편에서 변수와 자료 타입, 함수를 배우고 오후 2시부터 처음으로 '페어 프로그래밍'을 하게 되었다. 생소한 공부 방법이라 아주 낯설고 어색하긴 했지만, 개인적으로 좋은 공부법이라 생각한다. 같이 하시는 페어 분도 친절하고 배려 있게 알려주셔서 좋았다.
한 문제씩 내비게이터와 드라이버를 바꿔가며 코플릿 문제를 푸는 건 정말 신선한 경험이었다.
아직은 많이 서툴지만 조금씩 하다 보면 점차 익숙해지겠지?
1. 변수
변수란?
상황에 따라 변할 수 있는 값
변수의 선언과 할당
선언
let animal;할당
animal = 'dog';선언과 할당 동시 선언
let animal = 'dog';위에서 '=' 은 같다의 의미가 아니다.
오른쪽의 값을 왼쪽에 대입하는 것이다.
또한 변수는 동일한 변수를 이용해 대입이 가능하다.
let sum = 2;
sum = sum + 4;
sum = sum + 6;
sum = sum + 8; // sum = 20할당이 없는 변수는 'undefined'라고 표시된다.
변수의 다양한 타입
변수에는 number, string, boolean, object, undefined, 함수 등 다양한 타입이 있다.
pi = 3.141592; // number
myname = 'John'; // string
isMarried = true; // boolean
let fluits = [
'banana',
'apple',
'pineapple'
]; // object (배열)
let person = {
name : 'John',
age : 25,
isMarried : false
}; // object (객체)2. 함수
함수란?
- 코드(지시사항들)의 묶음
- 기능의 단위
- 입력과 출력간의 매핑
함수의 구조
함수는 아래와 같이 keyword, name, parameter, body로 구성되어 있다.
함수의 선언
function getSum(num1, num2) {
let sum = num1 + num2;
return sum;
}함수의 호출
getSum(10, 20); // 30함수 선언 방법
함수 선언식
function getTriangleArea(width, height) {
let triangleArea = (width * height) / 2;
return triangleArea;
};함수 표현식
const getTriangleArea = function (width, height) {
let triangleArea = (width * height) / 2;
return triangleArea;
};화살표 함수
const getTriangleArea = (width, height) => {
let triangleArea = (width * height) / 2;
return triangleArea;
};화살표 함수 (생략)
화살표 함수에서 본문에 return 문만 있는 경우, return과 중괄호를 생략할 수 있다.
또한, return문에서 소괄호를 사용할 수 있다.
const getTriangleArea = (width, height) => width * height / 2; // ㅇ, 정상 작동
const getTriangleArea = (width, height) => { width * height / 2 }; // X, undefined 리턴
const getTriangleArea = (width, height) => ( width * height / 2 ); // ㅇ, 정상 작동함수 내에서 표현식이 2줄 이상인 경우, return과 중괄호를 명시적으로 쓰는 것이 좋다.
// bad
const getStudentAvg = arr => arr.filter(person => person.job === 'student').reduce((sum, person) => (sum + person.grade), 0);
// good
const getStudentAvg = arr => {
return arr
.filter(person => person.job === 'student')
.reduce((sum, person) => (sum + person.grade), 0)
};3. 조건문
조건문이란?
지정된 조건을 Boolean 타입 (true, false)로 판별하여 각 상황에 맞게 명령을 실행하도록 만드는 것
사용 방법
if (조건1) {
} else if (조건2) {
} else {
}논리 연산자
&& : AND 연산자
isTeacher && isMale; // 선생님이면서 남자일 때 통과
참 && 참; // true(참)
참 && 거짓; // false(거짓)
거짓 && 거짓; // false(거짓)|| : OR 연산자
isTeacher || isMale; // 선생님이거나 남자일 때 통과
참 || 참; // true(참)
참 || 거짓; // true(참)
거짓 || 거짓; // false(거짓)! : NOT 연산자
(truthy, falsy 여부를 반전시킴)
!isTeacher && isMale; // 선생님이 아니면서 남자일 때 통과
!false // true
!(3>2) // false
!undefined // true
!'hello' // false6가지 falsy 값
다음 6가지 falsy 값은 if문에서 false로 변환되므로, if 구문이 실행되지 않는다.
if(false)
if(undefined)
if(null)
if(0)
if(NaN)
if('')OR 연산자는 truthy한 값을 만나면 그 값을 출력한다.
undefined || 10 // 10
5 || 10 // 5
5 || console.log('실행되지 않음') // 5둘다 falsy일 경우 뒤의 값을 출력한다.
undefined || false // falseAND 연산자는 falsy한 값을 만나면 그 값을 출력한다.
undefined && 10 // undefined
5 && false // false둘다 truthy일 경우 뒤의 값을 출력한다.
5 && 10 // 10