오늘 느낀 점
- 본격적으로 수업을 듣는 첫번째 날이라서 그런지 내용 자체는 어렵지 않았지만, 막상 코드를 직접 작성해보려고 하니까 어려웠다. → 쉬운 내용이더라도 개인공부 하면서 직접 코드 작성해보자
- 최대한 코드를 간략하게 작성하기 위해서 많이 고민해봐야겠다. → 해당 기능을 구현할 수 있는 다양한 방법들을 익혀두자
- 수업 시간에 배운 내용을 바로 블로깅 하는 게 아직은 어려웠다. 완벽하지 않다고 생각하는 내용을 퍼블리싱하는 게 창피해서 더 그런 것 같다. → 일단 최소한의 내용으로 퍼블리싱하고, 앞으로 배우면서 계속 업데이트를 하자
Chapter1. 변수
- 변수(Variable)
- 정의) 데이터 보관함(메모리) 각각의 이름
- 각각 보관함의 크기는 동일함
- 목적) 이름을 통해 데이터를 사용할 수 있음
- 특징) 재할당도 가능! (단, const로 변수를 선언하면 불가능)
- 정의) 데이터 보관함(메모리) 각각의 이름
- 변수 선언(Variable declaration)
- 키워드 (var, let, const)를 활용해서 선언함
- var : 구식 표현, let : 신식 표현, const: 재할당 불가
- 컴퓨터에게 새로운 개념(?)을 알려주는 것 → 보관함을 확보하는 것
let color; //color 라는 변수 선언
- 키워드 (var, let, const)를 활용해서 선언함
- 변수 할당(Variable assignmet)
- 변수에 어떤 값을 지정해주는 것 → 보관함에 데이터를 저장하는 것
- 할당 연산자로는 = 을 사용
- 규칙
- 공백x
- Camel Case : 각각의 첫 단어를 대문자로 표시 (ex. SoundCloud)
- cf) Lower Camel Case : 변수명의 첫 단어만 소문자로 입력하고 두 번째 단어부터 대문자로 입력 (ex. soundCloud)
- 한 번 선언했던 변수는 선언x(선언은 한 번만!)let color; //color 라는 변수 선언 color = "blue"; //변수 color에 "blue"라는 값 할당let color = "blue"; //간략하게 이런 식으로 많이 사용
- 표현식
? 뭔지 모르겠음 → 뭔진 모르겠지만 복잡해보임… → 더 많이 배웠을 때 알아보기(https://velog.io/@jakeseo_me/자바스크립트-개발자라면-알아야-할-33가지-개념-7-표현식과-문Statement-번역-2xjuhvbal7)
Chapter2. 타입
- 원시 자료형
- Number
-
숫자 형태
-
Java Script에서는 정수, 실수, 유리수 등 구분x
-
+(플러스 기호) 변수명 → Number 형태로 변환
let str = '5'; console.log(typeof(str)); //변수 str은 String 타입 let strToNum = + str; //String 타입을 Numer 타입으로 바꿔주기 console.log(typeof(strToNum)); //변수 strToNum은 Number 타입
-
- String
-
문자 형태
-
사용법
(작은따옴표 or 큰따옴표 구분은 회사마다 규정이 다른 것 같음)- 작은따옴표’’ : 가장 많이 사용하는 형태
- 큰따옴표”” : 작은 따옴표 내에 지정할 때
- 백틱(``): 템플릿 리터럴 문법 사용시
- 템플릿 리터럴: 줄바꿈 및 공백 설정 가능 → 요새 많이 쓰는 추새인 듯
-
“” + 변수명 → String 형태로 변환
let num = 5; console.log(typeof(num)); let numToStr = "" + num; console.log(typeof(numToStr));
-
- Boolen
- True or False 형태
- falsy한 값은 false로 (ex. 0, 빈 문자열)
- ! : not (ex) !0 → True
- === : =(같다, 일치한다) 의 의미, 엄격한 비교(Strict equality)
- cf) == : 느슨한 비교, 되도록 사용하지 말기
- Object
- 배열
- 객체
- Undefined
- 변수를 할당하지 않으면 자동으로 “초기화”됨
- undefined 타입에는 undefined 밖에 없음
- Null
- 변수에 값이 없다는 것을 의도적으로 명시할 때 (ex. 이전에 할당된 값을 비어있게 만들 때)
- null 타입에는 null 밖에 없음
- Symbol
- 잘 모르겠음. 사용 빈도가 적음
- Number
- 함수
- typeof
typeof(변수명)
Chapter3. 함수
-
함수(Function)
- 기능의 단위(a.k.a 즐겨찾기 버튼, 입력과 출력간의 매핑, 호출 후 반드시 Return!)
- Keyword : function
- name : 함수 이름
- parameter
- 매개변수 (Parament)
- Function 함수명 (매개변수)
- cf. 조절인자 (Argument) 함수명(조절인자)
- 매개변수 갯수와 전달인자 갯수
- 매개변수의 개수 > 전달인자의 개수 →남은 전달인자는 undefined
- 매개변수의 개수 < 전달인자의 개수 → 남은 전달인자는 무시
- 매개변수 (Parament)
- body
- 함수 호출 → 함수 조회 → 함수 파라미터가 인자 값으로 바뀜 → 함수 코드 순차적으로 실행 → 리턴하면 호출된 장소로 돌아감 → 호출 코드가 리턴값으로 바뀜
- 기능의 단위(a.k.a 즐겨찾기 버튼, 입력과 출력간의 매핑, 호출 후 반드시 Return!)
-
함수 선언(Function declaration)
-
컴퓨터한테 앞으로 이런 기능을 이런 이름으로 부를 거야라고 알려주기 → 버튼 제작
-
선언 시 조건
- function 키워드로 시작하기
- 함수 이름을 지어주기
- 함수를 알리는 괄호( (): parentheses)를 여닫기
- 중괄호 사이(바디)에 함수 호출 시 실행될 코드를 작성하기
- return(반환)할 것이 있다면 작성하기
- 함수 바디 안에 return 키워드를 활용한다면, 사용 함수를 즉시 종료하고 값을 반환
- return 키워드를 활용하지 않으면 undefined라는 값을 반환function codeLover() { console.long("Hi"); };
-
-
함수 호출(Function call/invocation)
-
선언한 함수를 사용하기 위해서는 “호출”을 해야 함 → 버튼 사용
function codeLover() { console.long("Hi"); }; codeLover()
-
-
함수 스타일
-
함수 선언식: 함수 키워드로 시작
// 첫 번째 인자를 2로 나누는 함수 divideBy2를 선언하세요. function divideBy2(input1) { input1 = input1 / 2; return input1; } divideBy2(5); //삼각형의 넓이 구하기 function getTriangleArea (base, height){ result = base * height / 2; return result; } getTriangleArea(4,5) //결과는 10이 나옴 -
함수 표현식: 변수 키워드로 시작
//2로 나누는 함수 let divideBy2 = function(input2) { input2 = input2 / 2; return input2; } divideBy2(6) //삼각형의 넓이 구하기 let getTriangleArea = function(base, height) { result = base * height / 2; return result; } getTriangleArea(4,5) //결과는 10이 나옴 -
화살표 함수
- 매개변수가 하나일 때 () 생략 가능, 함수 내부가 한 줄이면 {}를 생략
//2로 나누는 함수 let divideBy2 = (input3) => input3 / 2; divideBy2(3) //삼각형의 넓이 구하기 let getTriangleArea = (base, height) => base * height /2; getTriangleArea(4,5)//결과는 10이 나옴 let getRectangleArea = (width, height) => { let rectangleArea = width * height return rectangleArea }
-
