💡 이번에 배운 내용
- Section1.
웹 프론트엔드 개발의 기초지식을 기반으로 스스로 단순한 Web App을 만들 수 있다.- Unit2. Javascript 기초: 자바스크립트의 가장 기초적인 개념인 변수, 타입, 함수에 대해 배운다.
느낀점
예전에 Javascript의 기초에 대해 공부한 적이 있다.
하지만 그 때는 이것을 잘 몰랐다:
- 선언과 할당의 분명한 차이를 잘 몰랐다.
- 선언과 메모리의 관계에 대해 몰랐다.
- 타입에 대해 정확히 잘 몰랐다. 특히 undefined도 타입이란 걸 몰라서 예전에 알고리즘 문제를 풀 때 곤란했던 적이 있다.
- 화살표 함수에 제대로 알지 못해 화살표 함수로 작성된 예제를 볼 때 애를 먹은 적이 있다.
오늘 이 몰랐던 점들을 제대로 짚으며 공부할 수 있었다.
뭔가 한층 더 단단해지고 든든하게 출발하는 느낌이다!
그리고 공부하면서 기존에는 가지지 않았던 의문점들도 착실하게 알고 넘어갔다.
(추가로 궁금했던 점은 '질문해보기'에 정리했다.)
이번에 제대로 공부하고 추가로 알고리즘 문제풀이, 실습도 했다.
다시는 기초 개념 때문에 넘어지는 일이 없길!
키워드
변수, 할당, 선언, 타입, 함수, 함수 선언식, 함수 표현식, 화살표 함수
학습내용
Ch1. 변수(Variale)
변수는? 상황에 따라 변할 수 있는 값
변수명에는 공백을 쓸 수 없다.
변수의 두번째 단어부터 첫글자를 대문자로 써서 표현하는 방법을 Camel Case라고 한다.
변수의 선언(declaration)
변수를 선언한다는 것은 메모리에 데이터를 넣을 공간을 확보한다는 것을 의미한다.
메모리의 크기는 동일하다..!
선언은 한번만, 'let'을 사용해 선언한다.
변수의 할당 (assignment)
선언한 변수에 '='를 사용하여 원하는 값(데이터)를 할당한다.
선언과 동시에 할당이 가능하다.
표현식(expression)에서 변수를 사용할 수 있고 결과도 변수에 할당할 수 있다.
만약 선언만하고 할당이 없다면 선언한 변수의 값은 'undefined'이다.
Ch2. 타입(Type)
변수에는 다양한 타입이 있다:
- 숫자(number): NaN도 number이다!
- 문자열(string): 따옴표로 감싼다.
- 논리값(Boolean): true, false 의 값을 가진다.
- 배열(array): 순서가 있는 집합. 자료형(여러 타입이 섞여있음)
- 객체(object): 키, 값으로 구성. 자료형(여러 타입이 섞여있음)
- 함수(function)
- undefined
변수, 값의 타입을 확인할 때 'typeof(변수 또는 값)'를 사용한다.
typeof '변수 또는 값'
을 사용하면 아래와 같이 변수, 값의 타입을 확인할 수 있다!
console.log(typeof 2); //number
console.log(typeof '2'); //string
console.log(typeof 2<4); //trueCh3. 함수
함수란
함수는 반복되는 작업을 효율적으로 실행하고 재사용하기 위해 사용한다.
함수는 작업. 기능의 한 단위로, 함수를 호출하여 입력된 내용을 실행할 수 있다.
함수에는 구체적인 입력값과 출력값이 있다.
함수의 선언, 실행과정
- 함수를 선언(declaration)하면 함수를 저장하는 메모리에 저장이 된다.
- 저장된 함수를 호출하면 해당 메모리에서 함수를 찾아 실행한다.
- 함수를 호출했던 곳에서 함수를 반환(return)한다.(함수는 반드시 돌아온다!)
즉 함수는 항상 출력값을 반환한다.
(만약 따로 return을 통해 출력값을 설정하지 않았다면 'undefined'가 출력된다.)
함수 선언방법
아래와 같이 3가지 방법으로 함수를 선언할 수 있다.
아래에 소개할 예제는 사각형을 구하는 함수로 base는 밑변, height는 높이이다.
여기서 base, height는 매개변수(parameter)라고 하며,
호출시 매개변수 자리에 입력하는 값을 전달인자(argument)라고 한다.
- 함수 선언식
function myRectangleArea(base, height){
let rectangleArea=base*height;
return rectangleArea;
}
//base, height는 매개변수
myRectangleArea(3,4); //전달인자는 3,4이고 출력값은 12- 함수 표현식
변수에 익명의 함수를 할당한다.
let myRectangleArea=function (base, height){
let rectangleArea=base*height;
return rectangleArea;
}- 화살표 함수
ES6(Javascript 문법의 버전)부터 도입된 함수 선언방식이다.
let myRectangleArea= (base, height) => {
let rectangleArea=base*height;
return rectangleArea;
}화살표 함수는 return문만 있으면 아래처럼 간단하게 표현할 수 있다.
결과는 중괄호{} 로 감싸지 않도록 주의한다.
하지만 2줄이 넘어가면 가독성, 명시성을 위해 분명하게 작성하는 것이 좋다.
let myRectangleArea=function (base, height) => base*height;질문해보기
1. let과 const의 차이는?
- let 명령문은 블록 범위의 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다.
- const 선언은 블록 범위의 상수를 선언한다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없다.
* '블록' 범위가 뭔지 대강 알고있다. 나중에 학습할 때 좀 더 자세히 짚고 넘어갈 예정이다.
출처: javascript MDN(let링크, const링크)
2. 타입에는 null도 있다고 한다. null과 undefined의 차이는 뭘까?
- ndefined는 원시값으로, 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당됩니다.
- null은 원시값으로, 어떤 값이 의도적으로 비어있음을 표현하며 불리언(boolean) 연산에서는 거짓으로 취급한다.
- JavaScript에서 원시값이란:
- 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터를 의미한다.
- 원시 값에는 7종류가 있다: string, number, bigint, boolean, undefined, symbol, null
3. 함수 호출시 인자를 매개변수와 다르게 입력하면 어떻게 되는가?
개발자 도구를 통해 직접 해보자:)
- 함수 호출시 인자를 함수의 매개변수보다 적게 입력하면: 남는 매개변수에 'undefined'가 자동으로 할당된다.
- 함수 호출시 인자를 함수의 매개변수보다 많이 입력하면: 초과된 인자는 무시된다.
4. 함수의 keyword란?
아래의 사항들을 함수 선언시 키워드라고 한다.
- 함수의 이름
- 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록
- 중괄호 { } 안에서 함수를 정의하는 자바스크립트 표현
5. let=1, let=2; 가 오류인 이유
이대로 입력하면 아래와 같이 오류가 뜬다.
Syntax Error: let is disallowed as a lexically bound name
왜냐하면, let은 ','에 이어서 선언할 수 없기 때문이다.
let을 하나 빼던가 ','대신 ';'을 사용해야 한다.
let num1=1; let num2=2; //이상없음
let num1=1, num2=2; //이상없음
let num1=1, let num2=2; //오류!출처: stackoverflow
