노트 #2 | JavaScript 기초

HyeonWooGa·2022년 6월 24일

노트

목록 보기

3/74

2022.06.24 금요일 🌧

변수 개요

커피의 사전적 정의인 '끓여서 마실 수 있도록 볶아 놓은 커피나무 열매의 씨앗, 또는 그것을 빻은 불말 상태의 물질로 그 씨를 끓이거나 분말을 뜨거운 물에 타서 만든 짙은 갈색 음료' 라고 말하지 않고 커피라는 "이름"으로 부르기로 약속 되어 있는 것처럼 각각의 데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 "이름"을 지어 주는 것

학습목표

변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
자바스크립트에서 변수의 선언과 값의 할당에 대해 설명할 수 있다.
'='가 '같다' 라는 의미가 아니라 할당 연산자임을 이해한다.
크롬 개발자 도구의 'console' 탭을 이용하여 원하는 값을 출력할 수 있다.
변수를 사용하여 보다 효과적으로 구구단을 출력할 수 있다.

변수(Variable)의 이해

Programming = Data Processing

간단한 구구단 출력하는 코드(5단, 변수 사용 X)

console.log(5 * 1)
console.log(5 * 2)
console.log(5 * 3)
console.log(5 * 4)
console.log(5 * 5)
console.log(5 * 6)
console.log(5 * 7)
console.log(5 * 8)
console.log(5 * 9)
// 다른 단 표현 하고 싶을때 단순히 숫자 변경 작업 필요

간단히 구구단 출력하는 코드(변수 사용 O)

let num = 5
console.log(num * 1)
console.log(num * 2)
console.log(num * 3)
console.log(num * 4)
console.log(num * 5)
console.log(num * 6)
console.log(num * 7)
console.log(num * 8)
console.log(num * 9)
// 다른 단 표현 하고 싶을때 num 변수 데이터 변경으로 작업 가능

데이터 보관함 (메모리)
보관함의 크기는 동일 (메모리 할당, C언어는 크기가 다 다른데 JavaScript는 동일한지 다시 확인 필요)
각 보관함의 이름 (변수)
이름을 통해 데이터 사용 (재활용)
How to Use

보관함 확보 : 선언,
```
let age;
```
보관함에 데이터 저장 : 할당
```
age = 29;
```
선언과 할당 동시에 가능
```
let nickname = 'hyeonwooga'
```

Evaluation of Expressions(표현식 평가)
표현식 평가 과정

let age = 29;
console.log(num + 2);
// 결과값은 31로 출력
// console.log(num * 2); -> console.log(29 + 2); -> console.log(31); 순으로 표현식 평가

let name = 'park';
console.log('hello' + name);
// 결과값은 'hello park' 출력
// console.log('hello' + name); -> console.log('hello' + 'park') -> console.log('hello park'); 순으로 표현식 평가

개념학습

변수를 활용하면 복잡한 코드를 간단하게 만들 수 있다.

변수와 타입(Variable, Type)
변수는 상황에 따라 변할 수 있는 값
선언은
```
let myname;
```
할당은
```
myname = 'Phillip';
```
같이 쓰면
```
let myname = 'Phillip';
```
프로그래밍 세계에서의 변수는 이름(Label)이 붙은 값
myname 이라는 변수를 이용해 'Phillip'이라는 값을 다른 곳에서도 이용할 수 있다

대표적인 예

const pi = 3.141592;
const speedOfLight = 300000000;

// 자바스크립트에서 'CamelCase' 를 사용한다.
// 띄어쓰기가 불가능하여 다음 단어의 첫 글자를 대문자료 표기

표현식(Expression)에서 이러한 변수들을 사용할 수 있다.

const pi = 3.141592;

console.log(pi * 5 * 5); // 반지름이 5인 원의 넓이
console.log(pi * 7 * 7); // 반지름이 7인 원의 넓이

위 식에서 반지름도 변수로 둬서 처리 할 수 있다.

const pi = 3.141592;
let radius;

// 반지름이 5인 원의 넓이
radius = 5;
console.log(pi * radius * radius);

// 반지름이 7인 원의 넓이
radius = 7;
console.log(pi * radius * radius);

결과를 다시 변수로 담을 수 있다.

const pi = 3.141592;
let radius;
let areaOfCircle;

// 반지름이 5인 원의 넓이
radius = 5;
areaOfCircle = pi * radius * radius;
console.log(areaOfCircle);

// 반지름이 7인 원의 넓이
radius = 7;
areaOfCircle = pi * radius * radius;
console.log(areaOfCircle);

변수는 동일한 변수를 이용해 대입할 수 있습니다.

let sum = 1;
console.log(sum) // sum === 1

sum = sum + 2;
console.log(sum) // sum === 3

sum = sum + 3;
console.log(sum) // sum === 6

sum = sum + 4;
console.log(sum) // sum === 10

// 수학적으로 말이 안되지만, '='이 '같다'라는 의미가 아니므로
// 위 구문들은 이미 할당된 sum 의 값을 불러와 연산 후
// 다시 sum 에 값을 할당(저장) 해 주는 것
// 변수 선언은 한번만 필요

할당이 없는 변수는?
```
let myname; // undefined
```

타입 개요

변수에 담을 수 있는 데이터는 숫자나 문자처럼 특정한 형태를 가지고 있습니다. 이번 챕터에서는 숫자나 문자와 같이 변수에 할당할 수 있는 형태, 타입에 대해 학습합니다.

학습 목표

원시 자료형 'string', 'number', 'boolean', 'undefined'의 의미를 이해할 수 있다.
타입마다 다른 속성과 메서드가 있다는 것을 이해할 수 있다.
'typeof' 연산자를 활용하여 특정 값의 타입을 확인할 수 있다.
비교 시 엄밀한 비교 ('===' 와 '!==')의 필요성을 이해할 수 있다.

개념학습

변수에는 다양한 타입이 있다!
- pi(숫자) : 3.141592
- myname(문자열) : Phillip
- isAdult(불리언, 참/거짓 판단) : 성인입니까?
```
let age = 29;
let isAdult = age >= 20;

console.log(isAdult); // true

age = 19;
isAdult = age >= 20;

console.log(isAdult); // false
```

위 타입이 서로 섞인(compound) 타입도 있습니다 (자료형)

배열

let frits = [
  'banana',
  'apple',
  'pineapple',
];

객체

let person = {
   name: 'Phillip',
   age: 29,
   isAdult: true,
};

undefined 도 타입입니다
함수(function)도 타입입니다

실습

크롬 개발자 도구로 typeof 메소드를 사용해서 타입 확인하는 방법에 대해서 이해하고 적용해 보세요.

특정한 값의 타입 확인하기

JavaScript에는 'typeof' 연산자로 타입을 확인해볼 수 있습니다.

'typeof' 연산자 사용법

'typeof' 연산자 다음에 타입을 확인하고자 하는 값을 넣어주면 됩니다.

typeof 값;

개발자 도구를 이용해 실습하기

직접 개발자도구를 활용하여 실습해보자

console.log(typeof 1) // number
console.log(typeof '1') // string
console.log(typeof (1 < 2)) // boolean

// 변수에 할당한 값도 'typeof' 연산자로 확인 할 수 있습니다.
let number = 1;
console.log(typeof number) // number

let string = '1';
console.log(typeof string) // string

함수 개요

복잡한 문제는 더 작고 간단한 문제로 나눌 수 있고 작고 간단한 문제를 하나씩 해결하며 마지막에는 크고 복잡한 문제를 해결합니다. 이러한 과정을 컴퓨터는 함수라는 것을 사용해 해결합니다.

함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위입니다. 예를 들어 샌드위치를 만드는 과정도 함수로 나타낼 수 있습니다. 그 과정 중에 양상추를 어떻게 자를지, 토마토를 넣을지 말지 등을 결정합니다.

하지만 만약 에그 샌드위치를 기대하고 베이컨과 달걀을 입력 재료로 사용했는데, 토마토 샌드위치가 나오는 경우를 생각해봅시다. 이 경우에는 준비한 재료가 베이컨, 달걀이 아니라 토마토였거나, 과정이 입력 재료와 상관 없이 밖에서 토마토 샌드위치를 사온다는 황당한 애용이 적혀져 있을 수 있습니다. 이런 황당한 일이 일어나지 않도록, 논리적 일련의 작업을 하는 하나의 단위를 함수라고 합니다.

학습 목표

함수가 "작은 기능의 단위" 라는 것을 이해할 수 있다.
함수 선언을 위해 필요한 'keyword', 'name', 'parameter', 'body' 에 대해 이해할 수 있다.
함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
함수 그 자체( 'func' )와, 함수의 호출( 'func()' )를 구분하여 사용할 수 있다.
매개변수 ( 'parameter' )와 전달인자( 'argument' )를 구분하여 사용할 수 있다.
같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.

개념학습

이전에 학습한 변수를 통해서 구구단을 만들때 원하는 단에 따라서 변수값 할당만 바꿔주면 됬었지만 여전히 console.log 를 9번 복사, 붙여넣기 해야하는 문제가 남아있었고 이 문제를 함수를 통해 해결하면서 함수의 'keyword', 'name', 'parameter', 'body' 등을 알아봅시다.

let num = 2;

function mulTablePrinter(num) {
  console.log(num * 1);
  console.log(num * 2);
  console.log(num * 3);
  console.log(num * 4);
  console.log(num * 5);
  console.log(num * 6);
  console.log(num * 7);
  console.log(num * 8);
  console.log(num * 9);
}

// keyword : function
// name : mulTablePrinter
// parameter : (num)
// body : {
  console.log(num * 1);
  console.log(num * 2);
  console.log(num * 3);
  console.log(num * 4);
  console.log(num * 5);
  console.log(num * 6);
  console.log(num * 7);
  console.log(num * 8);
  console.log(num * 9);
}

함수는 코드의 묶음 (즐겨찾기 버튼)
코드를 묶음으로 만들어 놓고 필요할때 찾아 사용
기능(function)의 단위
입력과 출력간의 매핑(mapping)
입력값에 따라 출력값이 정해진다
반드시 돌아온다 (return)
함수는 리턴값을 반환한다

함수 사용법

버튼 제작
선언(declaration)

function cal(param1, param2) {
	console.log(param1 + param2);
  return * 10;
}

버튼 사용
호출(call, invocation)
```
cal(10, 20);
```

Evaluation of expressions(표현식 평가)

함수 선언 및 호출

let result = cal(10, 20); // 함수 호출

// 함수 선언
function cal(param1, param2) {
  console.log(parma1 + param2)
  return param1 * 10;
}

인자값 전달 및 평가

let result = cal(10, 20);

// 인자값(prameter) 함수에 전달 및 
// 평가(body에 parameter 값 대입)
function cal(10, 20) { // 전달
  console.log(10 + 20) // 평가
  return 10 * 10; // 평가
}

코드 순차적 실행

let result = cal(10, 20);

function cal(10, 20) {
  console.log(10 + 20) // 30
  return 10 * 10;
}

함수 리턴값 반환

let result = 100;

function cal(10, 20) {
  console.log(10 + 20)
  return 10 * 10; // return 100
}

실습

함수를 사용하여 구구단을 출력하는 방법을 실습합니다.

함수를 이용하여 구구단 출력하기

// 함수 선언
function mulTablePrinter(num) {
console.log(num * 1);
console.log(num * 2);
console.log(num * 3);
console.log(num * 4);
console.log(num * 5);
console.log(num * 6);
console.log(num * 7);
console.log(num * 8);
console.log(num * 9);
}

// 함수 호출
mulTablePrinter(2); // 2단
mulTablePrinter(3); // 3단
mulTablePrinter(4);
// ...
mulTablePrinter(9); // 9단

개념학습(함수 다루기)

함수의 기초에 대해 이해하고, 함수를 작성하는 다양한 방법에 대해 알아봅니다.

반복적으로 실행되는 일이 필요한 경우 함수로 만들 수 있다.

case study : 삼격형의 넓이를 구해야 하는 경우

const base = 3;
const height = 4;
const triangleArea = (base * height) /2;
console.log(triangleArea); // 6

함수 : 1. 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
입력 -> 함수 -> 출력, 항상 출력값을 반환한다

function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea
}
      
console.log(getTrianlgeArea(2, 4) // 4
      
// 함수 내에 return 값이 있는 경우 
// 출력값이 return 문의 값

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

지시사항들의 묶음

function getSomeCoffee () {
  // 1. 물을 끓인다.
  // 2. 원두를 갈아 온다.
  // 3. 도리퍼에 필터를 설치한다.
  // 4. 드립 커피를 추출한다.
  // 5. 만들어진 커피를 제공한다.(return)
}

함수 선언 방법

함수 선언식

function getTriangleArea(base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 기본형, 전통적인 방식

함수 표현식

const getTriangleArea = function (base, height) {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// 변수 선언, 익명 함수 할당

화살표 함수

const getTriangleArea = (base, height) => {
  let triangleArea = (base * height) / 2;
  return triangleArea;
}

// ES6 문법, 함수 표현식 기반

화살표 함수

만약 함수의 본문(body)에 return 문만 있는 경우
: return과 {} (중괄호, curly bracket) 생략 가능 (한줄 코드)

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

const getTriangleArea = (base, height) => { base * height / 2 }; // undefined 리턴

한줄 코드시 소괄호 사용 가능

const getTriangleArea = (base, height) => (base * height / 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)
  
  // 위의 두 코드 동일하게 정상작동 하지만 아래의 코드가 가독성이 더 좋아 오류확률이 줄어들게 됩니다.

HyeonWooGa

Aim for the TOP, Developer

이전 포스트

노트 #1 | 메타인지 학습전략

다음 포스트

노트 #2 | JavaScript 기초

노트

변수 개요

학습목표

변수(Variable)의 이해

개념학습

변수를 활용하면 복잡한 코드를 간단하게 만들 수 있다.

타입 개요

학습 목표

개념학습

실습

크롬 개발자 도구로 typeof 메소드를 사용해서 타입 확인하는 방법에 대해서 이해하고 적용해 보세요.

특정한 값의 타입 확인하기

'typeof' 연산자 사용법

개발자 도구를 이용해 실습하기

함수 개요

학습 목표

개념학습

실습

함수를 사용하여 구구단을 출력하는 방법을 실습합니다.

함수를 이용하여 구구단 출력하기

개념학습(함수 다루기)

함수의 기초에 대해 이해하고, 함수를 작성하는 다양한 방법에 대해 알아봅니다.

노트 #1 | 메타인지 학습전략

노트 #3 | JavaScript 기초 (2) 조건문

0개의 댓글