본격적으로 OT 끝나고 첫 수업을 시작했는데 변수, 타입에서는
내용이 크게 어렵지 않았지만 함수 부분에 들어가서 여러가지 함수 선언과 출력에 필요한 개념학습 부분이 부족하다고 느꼈다
함수 선언 방법에 따른
함수 선언식과 표현식, 화살표 함수 등 부족한 부분에 대해 추가 학습하자
1. 변수의 선언과 할당
- 변수 선언과 값의 할당은 같이 할 수 있다.
let variable = 'variable'
- 변수 선언 방법 세가지
- var, let, const >> '키워드', 일종의 명령어임.
- function, return 등도 다 키워드
- var은 옛날 let이 최신
- const로 선언한 변수는 재할당이 불가능!!
- 변수 선언 이유 ㅡ 재사용하기 위해서
- 변하지 않는 상수 const
- 변수만 설정해놓고 아무것도 할당하지 않은 변수는 undefined라고 나오겠지?
- C나 JAVA의 경우 각각의 데이터타입에 맞는 메모리 용량을 할당한다
변수의 선언(메모리에 데이터를 넣을 공간을 확보)
leg age;let thing = '두루마리 휴지', num = 3;let thing = '두루마리 휴지'; let num = 3;
변수의 할당
age = 25;
선언과 할당 동시에 가능
let name = 'kim' ;
-
= 등호는 데이터를 저장한다라는 뜻. 변수에 할당하기 위해 사용
-
=== 같다
-
자바스크립트 데이터 보관함(메모리)의 크기는 동일
변수란 각 보관함에 붙인 이름을 의미
변수명에는 공백을 못쓰므로 보통 단어의 첫글자를 대문자로 쓴다
변수는 동일한 변수를 이용해 대입할 수 있다.
왼쪽의 sum에다가 오른쪽에 있는 표현식을 할당 즉 대입함sum = sum + 2;
-
undefined도 값
-
값을 할당하지 않은 변수는 JavaScript가 임의로 undefined라는 값을 할당
2. 타입
템플릿 리터럴 (`` = 백탁 이라고도 한다)
- 런타임에 일반 문자열로 변환되어 처리된다
html에서 pre 태그 처럼 내맘대로 줄바꿈을 할 수 있다.- 작은 따옴표나 큰 따옴표로는 줄바꿈 X. 백틱으론 O
- 공백과 줄바꿈 O
결과창
표현식 삽입
결과창
원시 자료형 string, number, boolean, undefined의 의미
- 변수에는 다양한 타입
- 숫자, 문자열, boolean(참/거짓)
- '',""와 같은 따옴표는 숫자나 boolean에 적용 X, 문제에서만 적용한다
이런 타입들이 서로 섞인게 자료형
&& 타입의 종류 &&
자바스크립트에는 7개의 데이터 타입이 있다.
-
number, string, boolean, undefined, null, symbol, object
-
! - 부정이란 의미
!!는 그대로겠지? !!! 는 다시 false
1. number type
숫자는 모두 number type
2. string type (문자열)
3. Boolean type
4. undefined
- undefined타입인 값은 undefined가 유일
아무것도 할당하지 않은 변수는 undefined가 할당된다5. null
- null타입인 값은 null이 유일
null은 변수에 값이 없다는 것을 명시할 때 사용(undefined와 구분)
이전에 할당된 값 더이상 사용하지 않고 비어있는 상태면 null
&& 배열 &&
- 배열과 객체는 다 섞여 있는 자료형이다.
문자열이라는 타입이 여러 개 섞이고 순서가 있는 집합
- 배열
let fruies = [ 'apple', 'grape', 'banana' ]
- 객체
let person = { name: '영' , age : 24, isStudying : true };
- undefined
변수에 값 할당 없다는 뜻- 함수
- typeof 연산자
- JavaScript에는 typeof 연산자로 타입을 확인해볼 수 있습니다.
typeof 값;console.log(typeof 1) // ----- (1) console.log(typeof '1') // ----- (2) console.log(typeof (1 < 2)) // ----- (3) 1 number 2 string 3 booleanlet whatIsValue = '123'; whatIsValue = 123;console.log(typeof whatIsValue); >>>> number
&& 형변환 &&
- 명시적 형변환 (원하는 타입으로 형변환)
- Number 형변환
console.log( Number(true), Number(false) )1
0
- Boolean 형변환
불린은 false 타입일때만 기억
- 숫자 0
- 빈 문자열
- null
- undefined
- NaN
이것들은 false가 되고 나머지 값들은 다 true로 변환하게 된다.console.log( Boolean(0), Boolean(""), Boolean(null), Boolean(undefined), Boolean(NaN) )false false false false false
- !! (느낌표 2개)란?
!!false === false !!true === true !!0 === false // 0은 false !!1 === true // 0과 NaN을 제외하면 true !!-1 === true // -1도 true !!parseInt("foo") === false // NaN은 false !!"foo" === true // 문자열은 true !!" " === false // 빈 문자열은 false !!"false" === true // 문자열은 true !!{} === true // object는 언제나 true !![] === true // Array는 언제나 true !!null === false // false, null, undefined는 false !!!"foo" === false // 느낌표 3개는 반대의 결과숫자(INT)의 경우 0과 NaN을 제외하고는 true
논리(true, false)의 경우 그대로 나옴
문자열(String)의 경우 빈 문자열만 제외하고 true
객체(Object)와 배열(Array)의 경우 언제나 true그외 null, undefined는 false입니다.
3. 함수
- 함수는 항상 return이 있어야 출력된다는 것을 기억하자
console.log 결과값 봐야되기 때문에 쓰는거. 함수 확인이 아님
function mulTablePrinter(num)
- 키워드(function)
- 이름(mulTablePrinter)
- 파라미터(num)
ㅡ return문이 사용되지 않았다면 undefined가 뜬다!
ㅡ 함수가 "작은 기능의 단위"
ㅡ 함수 그 자체(func)와, 함수의 호출( fun() )
- 매개변수(parameter)와 전달인자(argument)
함수 생성할 때 ( ) 안에 넣는 게 매개변수
함수 호출 할 때 ( ) 안에 넣는 값 전달인자매개변수와 전달인자는 함수내부에서 1:1로 매칭됨
함수는 전달받은 argument를 parameter에 차례대로 할당.
argument가 parameter보다 더 많이 전달되면 남은 argument는 어느 parameter에도 할당되지 않는다.매개변수의 갯수 > 전달인자의 갯수, 매개변수의 갯수 < 전달인자의 갯수
function foo4 (x, y, z) { console.log(x, y, z) }foo4(1, 2)
결과 : 1 2 undefinedfoo4(1, 2, 3, 4)
결과 : 1 2 3
- 함수는 기능의 단위
- 함수는 반복적인 기능을 저장해 두었다가 필요할 때마다 호출하여 사용할 수 있으므로,
일종의 즐겨찾기 기능이라고 할 수 있음
- 함수는 반드시 돌아온다. (return)
- 함수에는 구체적인 입력값과 출력값이 존재합니다.
- 함수 선언이 된다는 것은 특별한 저장소에 함수 내부의 코드가 저장된다는 것을 의미.(메모리 할당같은 느낌에서 좀 더 크다고 생각!)
- var이나 아무것도 붙이지 않은 변수 할당 global scope 에 저장
let과 const는 script scope에 저장
- 자바스크립트 해석할 때 script 내에 있는 변수 찾고 이후 global 내 변수 찾기 떄문에
복잡한 프로그램 만들때는 var로 부여하지 말기
- 고정되는 값에는 const를 쓰는게 좋음
- 함수는 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블록
입력값을 주고 (항상)출력값 반환(return)
- return 안쓴다면 출력값은 undefined
- 함수 만든다 > 선언
함수 바깥으로 결과를 가져올려면 무조건 return을 해줘야함
&& 함수 구구단 &&
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)
&& 함수 선언식, 함수 표현식, 화살표 함수의 차이 &&
let, const 변수 선언
function 함수 선언문
let, const 함수 표현식
- 함수 선언식
변수와 함수 각각에 맞는 키워드를 쓰면 선언 ( ) 변수는 let, 함수는 function
function multiplyBy2(input) { input = input * 2; return input; }
- 함수 표현식
변수 선언 후 익명 함수 할당
함수를 만드는데 변수 키워드를 썻다고 생각해.let multiplyBy2 = function (input) { input = input / 2; return input; };
- 화살표 함수
( ) 앞에 부분 =>로
매개변수가 하나일 때 ( ) 생략가능, 함수 내부가 하나의 문으로 구성된다면
{ }를 생략할 수 있다.
- 객체란 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인것 이다
- 객체는 #key 값과 #value 값을 가지고 있다
- =은 할당이라고 말함
- fuction도 객체(object)
- 자바스크립트에선 함수도 객체
