Section1_Unit2 - [JavaScript] 기초

부트캠프

Section1_Unit2 - [JavaScript] 기초

mimi-latte 2022. 4. 26. 21:17

코드스테이츠 2일차,

# 솔로 페어프로그래밍

새벽부터 열이 오르고 목 상태가 급격히 나빠졌다.

해당 상황에 대해 이슈 쉐어링 후

매니저님과 대화하여 금일 페어 프로그래밍은 솔로로 진행하게 되었다.

나름 1인 2역으로 내비게이터와 드라이버를 맡아 혼자서 열연을 했지만

솔로로 진행하는 페어 프로그래밍은 정말 지루하기 짝이 없었다.

빨리 몸상태를 회복해서 연기가 아닌 진짜 페어프로그래밍을 하고 싶다.

# 속도가 빠른 동기들

동기들의 블로깅 속도는 생각보다 빨랐다.

이전 챕터를 정해진 시간에 맞춰 끝낸 뒤 블로깅을 하러 갔을 때

대부분의 표가 가득 채워진 것을 볼 수 있었다.

괜히 마음이 급해져 서두르다 상황이 꼬여

정해진 시간을 초과해서야 블로깅을 마쳤다.

문득 어제 배운 메타인지에 대한 내용이 떠올랐다.

'스스로 완벽하지 않다는 것을 인정하고 전략을 수정하려는 생각보다,

다른 사람의 속도를 따라잡아야 한다는 생각을 하다 보니

오히려 자신의 방향을 잃어버리는 경우가 있습니다.'

내 페이스대로 해도 제 시간안에 마쳤을 것을,

동기들과 똑같은 속도로 빠르게 블로깅을 하려다

결국 제 발에 걸려 넘어진 꼴이 되고야 만 것이다.

이 습관은 잘 고쳐지지 않는 것이라

이번 코드스테이츠 부트캠프 과정을 통해 뿌리를 뽑아내야겠다.

오늘 배운 것.

- 변수

- 타입

- 함수

1. 변수

[ 학습목표 ]

- 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 의미한다.

- 자바스크립트에서 변수의 선언과 값의 할당에 대해 설명할 수 있다.

- = 가 '같다'라는 의미가 아니라 할당 연산자임을 이해한다.

- 크롬 개발자 도구의 console 탭을 이용하여 원하는 값을 출력할 수 있다.

- 변수를 사용하여 보다 효과적으로 구구단을 출력할 수 있다.

1) 변수란?

데이터를 편하게 다루기 위해 데이터에 붙인 이름이다.

중학교 수학에서 접했던 원주율 값은 3.141592..라는 값을 가진다.

해당 값을 프로그래밍에서 반복적으로 사용하고 싶다고 가정하자.

예시) 원주율에 숫자 1 ~ 10을 차례대로 더하기

3.141592 + 1; // 원주율에 1을 더한다.
3.141592 + 2; // 원주율에 2를 더한다.
3.141592 + 3; // 원주율에 3을 더한다.
...
3.141592 + 10; // 원주율에 10을 더한다.

3.141592라는 값을 일일이 작성하다보면

사람이다보니 귀찮고 오류가 발생하는 일도 빈번할 것이다.

이 때 변수라는 것을 사용해서 위의 식을 간단하게 표현할 수 있다.

3.141592를 편하고 반복적으로 사용할 수 있도록 변수 pi에 원주율 값 3.141592를 할당하는 것이다.

이처럼 변수는 데이터를 편하게 다루기 위해 데이터에 붙인 이름이다.

let pi = 3.141592;
pi + 1;  // 원주율에 1을 더한다.
pi + 2;  // 원주율에 2를 더한다.
pi + 3;  // 원주율에 3을 더한다.
...
pi + 10; // 원주율에 10을 더한다.

2) 변수의 선언과 할당

컴퓨터에는 데이터가 저장되는 보관함(메모리)이 존재하며,

각 보관함(메모리)의 이름을 변수라고 한다.

여기서 보관함을 확보하는 것은 변수의 선언(declaration)을 의미하며

이 보관함에 데이터를 저장하는 것을 할당(assignment)이라고 한다.

변수의 선언과 할당은 반복적으로 사용해야 하는 값을 데이터 보관함에 저장하기 위해 사용한다.

let food; // 변수의 선언(declaration)
food = chicken; // 변수의 할당(assignment)

* 변수 선언 시 let 또는 const 키워드를 사용하며, 선언은 한 번만 한다.

* =은 '같다'라는 의미가 아니라 값의 할당을 의미한다.

2. 타입

[학습 목표]

- 원시자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.

- 타입마다 다른 속성과 메서드가 있다는 것을 이해할 수 있다.

- typeof 연산자를 활용하여 특정 값의 타입을 확인할 수 있다.

- 비교 시 엄밀한 비교( === 과 !==)의 필요성을 이해할 수 있다.

타입은 숫자나 문자와 같이 변수에 할당할 수 있는 형태를 의미한다.

변수에는 다양한 타입이 있다.

1) 원시 타입

- number : 정수와 실수등 다양한 숫자타입을 제공한다.

- bigint : number 타입이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체.

- string : 텍스트 데이터를 나타내는데 사용한다.

- boolean : 논리적 참, 거짓을 나타내는 true, false 값이 있다.

- undefined : 변수를 선언하고 값을 할당하지 않았을 때 자바스크립트 엔진이 초기화 하는 값.

- null : 변수에 값이 없다는 것을 의도적으로 명시할 때 쓰는 값.

- symbol : 변경 불가능한 원시 타입의 값. 다른 값과 중복되지 않는 유일무이한 값.

2) 객체 타입

- object

- function

- array

3) 특정 값을 확인하고 싶을 때 사용하는 typeof() 연산자

let age = 10;
typeof age // 결과 : number

let name = 'hong';
typeof name // 결과 : string

let person = {
	name: 'hong',
    age : 10
}
typeof person // object

let undefinedVariable = undefined;
typeof undefinedVarialbe // 결과 : undefined

3. 함수

[학습 목표]

- 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.

- 함수 선언을 위해 필요한 keyword, name, paramenter, body에 대해 이해할 수 있다.

- 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.

- 함수 그 자체(func)와 함수의 호출(func())을 구분하여 사용할 수 있다.

- 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.

- 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

함수는 입력에 따라 그에 걸맞는 작업을 하는 하나의 작업 단위이다.

함수는

코드의 묶음이며

기능(function)의 단위이다(반복적인 기능을 저장해두었다가 필요 시 호출하여 사용할 수 있다).

입력과 출력값을 가질 수 있고(mapping)

호출 후 반드시 돌아온다(return)

함수는 아래와 같이 구성된다

function callMyName(name) {

console.log('hello ,', name);

}

- keyword : function

- 함수명 : callMyName

- parameter : name

- body : { console.log('hello, ', name) }

함수는 아래의 과정을 통해 사용할 수 있다.

// 1. 함수 선언
function callMyName(name) {
	console.log('hello, ', name);
}

// 2. 함수 호출
callMyName('mikyeong'); 
// 결과 : hello, mikyeong

함수란 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록이며,

항상 출력값을 반환한다.

// 함수에 return 값이 있는 경우
function getTriangleArea(base, height) {
	let triangleArea = (base * height) / 2;
    return triangleArea;
}
console.log(getTriangleArea(2, 4));
// 함수 내부에서 return 값이 있는 경우 결과는 4로 출력된다.


// 함수에 return 값이 없는 경우
function getTriangleArea(base, height) {
	let triangleArea = (base * height) / 2;
}
console.log(getTriangleArea(2, 4));
// 함수 내부에서 return 값이 없는 경우 결과는 undefined로 출력된다.

함수는 3가지 방식을 이용해 선언할 수 있습니다.

// 1. 함수 선언식
function getTriangleArea(base, height) {
	let triangleArea = (base * height) / 2;
    return triangleArea;
}

// 2. 함수 표현식
const getTriangleArea = function (base, height) {
	let triangleArea = (base * height) / 2;
    return triangleArea;
}

// 3. 화살표 함수
const getTriangleArea = (base, height) => (base * height) / 2;

화살표 함수의 본문(body)에 return문만 있는 경우,

return과 { } 중괄호를 생략할 수 있다.

const getTriangleArea = (base, height) => base * height / 2; 	 // O 정상 동작
const getTriangleArea = (base, height) => { base * height / 2; } // X undefined

화살표 함수에서

return문에서 소괄호를 사용할 수 있다.

const getTriangleArea = (base * height) => (base * height / 2) // O 정상 동작

화살표 함수에서

함수 내의 표현식이 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)
 }