Chapter1. 변수
1-1. 변수의 이해
1-2. 변수의 선언
1-3. 구구단 출력하기(1)
Chapter2. 타입
2-1. 타입의 이해
2-2. typeof 연산자 사용하기(실습)
Chapter3. 함수
3-1. 함수의 이해
3-2. 구구단 출력하기
3-3. 함수 다루기
Chapter1. 변수
- 변수 사용은 데이터를 편리하게 저장하고 꺼내 쓰는 것임을 이해한다.
- 자바스크립트에서 변수의 선언과 값의 할당에 대해서 설명할 수 있다.
- =가 "같다"라는 의미가 아니라 할당 연산자임을 이해한다.
- 크롬 개발자 도구의 console 탭을 이용하여 원하는 값을 출력할 수 있다.
- 변수를 사용하여 보다 효과적으로 구구단을 출력할 수 있다.
1-1. 변수의 이해
변수
데이터보관함의 이름, 이름을 통해 데이터를 사용
상황에 따라 변할 수 있는 값
-> 동일한 데이터가 등장하는 곳을 변수로 대체하고, 변수에 해당데이터를 저장(할당
변수를 선언한다
변수를 선언한다는 것은 데이터 보관함 하나에 데이터 넣을 공간을 확보하는 것
-> 변수선언하면 메모리 중에 그 변수가 가지는 공간이 생김
변수사용법
- 보관함 확보 : 선언
let age;- 보관함에 데이터 저장 : 할당 = 대입 (not 등호)
age = 12;- 선언과 할당 동시에 가능
let name = ‘kim’;,
let pi = 3.14159203847362738483728374표현식(expression)
변수와 특정값을 이용해 연산을 하는 경우, 변수를 이용해서 값을 계산하고자 할때
Ex) pi*5*5; //반지름이 5인 원의 넓이
let radius = 5; //반지름도 변수로 둘 수 있다.
pi* radius * radius;
let areaOfCircle = pi* radius*radius; //결과물도 변수로 담기 가능.평가(evaluation)
표현식이 무엇을 의미하는지 알아 내는 과정
퀴즈
-변수의 선언과 할당 혼동하지 않도록 주의
-변수는 let 키워드와 변수명을 사용하여 선언할 수 있음
-변수의 할당은 선언한 변수명에 =를 사용하여 넣고자 하는 값을 넣어주는 것
-변수를 선언하고 할당하는 가장 큰 이유는 반복적으로 사용하는 값을 데이터 보관함에 넣어 두었다가 편하게 꺼내서 사용하기 위함임
-데이터 보관함(메모리)의 크기는 동일
-변수란 각 보관함에 붙인 이름을 의미
1-2. 변수의 선언
값에 대해 이름 붙이는 게 변수임
변수 이름 규칙
1) 변수명에 공백 못씀
2) 중간중간 단어의 첫글자를 대문자로
-할당이 없는 변수 값 : undefined(정의되지 않았다)
Chapter2 타입
- 원시 자료형 string, number, boolean, undefined의 의미를 이해할 수 있다.
- 타입마다 다른 속성과 메서드가 있다는 것을 이해할 수 있다.
- typeof 연산자를 활용하여 특정 값의 타입을 확인할 수 있다.
- 비교 시 엄밀한 비교( === 과 !== )의 필요성을 이해할 수 있다.
2-1. 타입의 이해
타입
변수에 할당할 수 있는 데이터형태 ex)숫자, 문자
JS에서는 타입에 따라 할 수 있는 일이 다름.
Ex)"커피는 맛있다"와 "커피은 맛있다"
자바스크립트의 데이터 타입
-
기본 타입(원시 타입: Primitive Type)
1) 숫자(number)
2) 문자열(string)
3) 불린값(boolean)
4) undefined
5) null
6) 심벌(symbol)
-
참조 타입(객체 타입: Object/Reference Type)
1) 객체 :타입이 서로 섞인 타입
2) 배열 :타입이 서로 섞인 타입_ 순서가 있음
3) 함수
4) 정규 표현식
- 배열, 함수, 정규표현식도 모두 객체다.
2-2. typeof 연산자 사용하기(실습)
연산자 사용법
console.log(Typeof 값)
console.log(typeof 1) // number
let num = 1;
console.log(typeof num) // number 변수에 할당한 값도 타입 확인 가능Chapter3 함수
- 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다.
- 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다.
- 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다.
- 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다.
- 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다.
- 같은 기능을 하는 함수를 선언식, 표현식, 화살표 함수로 바꾸어 표현할 수 있다.
3-1. 함수의 이해
함수
함수는 입력에 따라 그에 걸맞은 작업을 하는 하나의 작업 단위
ex) 레시피
-
Keyword : function (함수마다 정의된 기능이 있음.입력된 값에 따라 그 기능 실행=함수)
-
Name: mulTablePrinter
-
Parameter: num(매개변수)
-
Body
function.mulTablePrinter(num) {
body
}
함수 의미
1) 코드의 묶음 (body)
2) 기능의 단위_버튼처럼 필요시사용 (전달인자입력)
3) 입력값과 출력값 (전달인자입력, return)
4) 호출후에는 반드시 돌아옴(return)
함수 사용법
1) 함수 선언(버튼 만들기)하면 특별한 공간에 보관된다.
function 함수이름(매개변수1, 매개변수2) {
return 매개변수1*10;
} 2) 함수 호출: 함수는 한 번 만들면 언제든 다시 사용가능
function 함수이름(매개변수1, 매개변수2) {
return 매개변수1*10;
}
함수이름(10, 20); //매개변수1, 매개변수2 => 10, 20 인자
->함수가 리턴하면 호출된 장소로 돌아감
->함수 호출 코드는 리턴값으로 바뀜
퀴즈
함수:일련의 코드를 묶어서 저장한 후 필요할 때마다 호출할 수 있으므로, '즐겨찾기'라고 할 수 있다.
3-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);
}
mulTablePrinter(3)
mulTablePrinter(4)
// ...
mulTablePrinter(9)3-3. 함수 다루기
반복적으로 실행하는 작업에는 함수작성 ㄱ
만약 리턴문 사용 안했다면, Undefined 을 return한다.
함수를 만든다 = 함수를 선언한다.
함수 선언하는 법 3가지
1) 함수선언식
입력값: 함수 내부에서 활용가능
출력 : 함수코드가 실행되다가 return문을 만나면 return문에 적어준 값이 반환되고 동시에 함수종료됨
-function 트라이앵글(밑변, 높이) { }
호출할때 트라이앵글(3,4) 인자 :함수호출시 매개변수에 할당되는값function getRectangleArea (width, height) {
let rectangleArea = width * height
return rectangleArea
}매개변수를 가지고 만든 공식을 let으로 선언된 변수 rectangleArea에 할당하고, 변수rectangleArea을 리턴
*함수:지시사항들의묶음
2)함수 표현식
: 변수 먼저 선언하고, 이거에 익명의 함수(매개변수)할당 {바디}
let getRectangleArea = function (width, height) {
let rectangleArea = width * height;
return rectangleArea
}3)화살표 함수
: 변수 먼저 선언한뒤 = (매개변수)를 할당 => {바디}
(생략형) 변수 먼저 선언한뒤 = (매개변수) => 매개1*매개2;
*함수표현식의 뒷부분을 화살표로 표현
화살표함수는 한줄코드일때 리턴과 중괄호 생략가능함
let getRectangleArea = (width, height) => {
let rectangleArea = width * height
return rectangleArea
}
let getRectangleArea = (width, height) => width * height;지금 기분 😟
하루종일 긴장상태에 있다. 생활코딩 기초강의를 듣지 않았더라면 오늘 배운 내용을 절대 이해하지 못했을 거라는 생각이 들었고 다행이라는 생각과 동시에 아찔했다.
첫 페어 프로그래밍을 했는데 다행히도(?) 페어분과 내 실력이 대동소이 했다.
한결 편한 마음으로 함께 연습문제를 풀었던 것 같다.
다만, 마지막 두 문제를 풀 때 시간이 오래 걸렸는데 다음 페어부터는 한 문제당 푸는 시간을 정해서 시간관리를 잘 해야겠다.
