안녕하세요!
브레드파크 멘토링입니다.
오늘은 11일차, 자바스크립트 배우기 2일차!
오늘부터 조금 힘들더라도 공부를 힘차게 시작해볼까요?
오늘 배울 내용:
학습 콘텐츠 (332~365p)
1. 변수와 상수
2. 데이터 유형
3. 운영자
1. 변수와 상수
1.1 변수
변수는 말 그대로 변하는 숫자를 의미합니다.
그래서 JavaScript에서는 값이 변하는 데이터를 저장하고 관리하기 위한 저장 공간으로 변수를 생성합니다.
var num = 10 + 20이런 코딩 많이 보셨죠?
여기서 num은 변수라고 합니다!
1.2 새로운 변수 선언 키워드 let
var 외에도 변수를 선언하는 키워드로 let이 있습니다.
let 키워드는 ES6 릴리스에 추가된 새로운 키워드입니다.
let num = 10 + 20;
잠깐, var와 let은 동일하게 보이지만 차이점은 무엇입니까?
let의 속성을 살펴보고 var와 let의 차이점을 살펴보겠습니다.
1⃣ 변수 이름 중복은 불가능합니다.
var 키워드로 선언된 변수 이름은 반복해서 선언할 수 있습니다.
따라서 이와 같이 코드를 작성하면 문제가 없습니다.
var num = 10 + 20;
var num = 50;이 코드는 컴퓨터 메모리에 num이라는 변수 공간을 만들고 식을 계산한 결과를 10 + 20으로 대입하는 코드입니다. 그리고 num이라는 이름의 공간이 다시 생성되면 이전에 할당된 데이터는 사라지고 50이라는 새로운 값이 할당됩니다. 이미 존재하는 중복 변수명을 생성할 때 기본값을 덮어쓰는 행위는 매우 위험해 보이지 않나요?
이와 관련하여 기능이 향상된 let 키워드가 var 키워드보다 안전합니다!
2⃣ 당겨지지 않습니다.
호이스팅이란 변수가 선언되고 var 키워드로 할당되면 변수 선언이 JavaScript 범위의 맨 위로 이동되어 실행되는 것을 의미합니다. 10.4.1에서 영역에 대해 자세히 알아볼 것이므로 지금은 건너뛸 수 있습니다.
다음을 보면 변수를 선언하고 할당하는 초기화 전에 num이라는 변수를 출력합니다.
물론 결과를 보면 에러가 나야 하는데 정의되지 않은 상태로 나오겠죠?
이러한 배경에는 리프팅 개념이 있습니다.
선언이 맨 위로 올라가기 때문에
num이라는 변수를 출력할 때 값은 없지만 선언되었기 때문에 오류가 없습니다.
반대로 들어 올릴 수 없습니다.
그래서 같은 코드를 작성하고 실행하면 num 변수가 정의되어 있지 않다는 오류가 발생합니다.
즉, 요약하면 var는 호이스팅되고 let은 호이스팅되지 않습니다!
3⃣ 지역마다 지역이 다릅니다.
var 키워드와 let 키워드는 서로 다른 범위를 참조합니다.
이러한 차이점 때문에 실제로는 let 키워드를 가능한 한 자주 선언하는 것이 좋습니다!
범위에 대한 자세한 내용은 아래 링크를 참조하십시오.
(JavaScript) 범위와 var, let, const 차이
영어 단어 범위 자체에는 “범위”의 의미가 있습니다. 또한 컴퓨터 과학 및 JavaScript에서 “영역”의 의미를 가지며 JavaScript 고유의 개념이 아닙니다. – 식별자 접근 규칙
uiop5809.tistory.com
1.3 상수
변수를 선언할 때 사용하는 키워드로 const도 있습니다.
const 키워드는 let 키워드와 함께 ES6에 추가되었습니다.
const 키워드를 재할당할 수 없다는 점을 제외하면 기본적인 내용은 let과 동일합니다.
다음을 보면 let 키워드는 재할당이 가능해서 값을 10에서 30으로 재할당했습니다!
let num = 10;
num = 30;
console.log(num);
그러나 const 키워드는 재할당할 수 없으므로 오류가 표시됩니다.
const num = 10;
num = 30;
console.log(num);
멘토 TIP
현재 저는 var를 피하고 let과 const를 선호합니다!
var, let, const의 차이점을 자세히 공부하면 좋을 것 같습니다.
var, let 및 const의 차이점
var, let 및 const 간의 개념과 차이점을 살펴보겠습니다.
velog.io
2. 데이터 유형
2.1 문자열
“” 또는 “”로 둘러싸인 문자열을 문자열이라고 합니다.
let string = "Hello World!";
+를 사용하여 문자열을 연결할 수도 있습니다.
let string = "Hello World!" + " coding";
console.log(string);
따옴표 대신 키보드 왼쪽 상단의 `(백틱)을 사용하여 문자열에 변수를 붙여넣을 수도 있습니다.
문자열에 넣으면 ${} munvers를 사용해야 합니다!
let name = "bread";
let string = `Hello ${name}!`;
console.log(string);
2.2 숫자
자바스크립트는 정수와 실수를 구분하지 않고 모두 하나의 숫자 데이터 타입(숫자 타입)으로 취급합니다.
let num1 = 10;
let num2 = 0.1;그러나 버그를 사용할 때는 주의해야 합니다. 실수는 부동 소수점 형식으로 표현되지만 이 경우 실수의 계산이 정확하지 않습니다.
let num1 = 0.1;
let num2 = 0.2;
console.log(num1 + num2);
2.3 논리적 유형
논리적 데이터 타입(logical type)은 참 또는 거짓을 의미하며 참 또는 거짓에 해당하는 논리값이다.
문자열과 숫자는 데이터 유형을 정의하는 값이 무한히 많지만 논리 유형에는 true와 false의 두 가지 값만 있습니다!
let boolean1 = true;
let boolean2 = false;
2.4 정의되지 않음
컴퓨터 메모리 공간에 변수나 상수를 선언할 때 생성된 공간에 저장할 데이터를 할당해야 합니다.
지정하지 않으면 JavaScript는 내부적으로 데이터를 변수 및 상수 공간에 임시로 지정하고 해당 시점에 지정되는 값은 정의되지 않습니다.
let empty;
console.log(empty); // undefined
2.5 제로
null 유형은 null 값만 가지며 변수 또는 상수를 선언하고 의도적으로 선언된 공간을 비워 둘 때 할당됩니다.
let empty = null;
console.log(empty); // null
2.6 객체
객체는 JavaScript의 중심 데이터 유형입니다.
위에서 언급한 기본 데이터 유형 외에도 JavaScript의 거의 모든 데이터 및 데이터 구조는 객체로 간주되어야 합니다!
배열, 객체 리터럴 및 함수는 객체 데이터 유형에서 파생된 데이터 유형입니다.
– 준비
배열은 여러 데이터 조각을 포함할 수 있는 데이터 유형입니다.
배열을 사용하면 하나의 데이터 유형에 여러 데이터를 정의할 수 있습니다!
let studentScore = (80, 70, 90, 60); // 국어, 영어, 수학, 과학
JavaScript의 숫자는 0부터 시작하므로 다음과 같이 인덱스로 접근할 수 있습니다.
studentScore(0)는 80, studentScore(1)는 70… 이렇게 접근할 수 있습니다.
let studentScore = (80, 70, 90, 60); // 국어, 영어, 수학, 과학
console.log(studentScore(0));
– 객체 리터럴
객체 리터럴은 객체를 정의하는 가장 간단한 방법입니다.
객체를 정의할 때 {}는 한 쌍의 키 값으로 구성된 속성을 묶는 데 사용됩니다.
다음 두 가지 방법으로 색인에 액세스할 수 있습니다.
let studentScore = {
koreanScore: 80,
mathScore: 90,
englishScore: 100,
};
console.log(studentScore.englishScore);
console.log(studentScore("englishScore"));
3. 운영자
3.1 산술 연산자
산술 연산자는 더하기, 빼기, 곱하기 및 나누기와 같은 수학 연산을 수행하는 연산자입니다.
JavaScript에서 사용할 수 있는 산술 연산자에는 이진 산술 연산자, 단항 산술 연산자 및 단항 부정 연산자가 포함됩니다.
책을 잘 읽고 참여하시길 바랍니다!
3.2 할당 연산자 및 복합 할당 연산자
할당 연산자는 데이터를 할당(할당)하는 연산을 수행하는 연산자입니다.
복합 대입 연산자는 산술 연산자와 대입 연산자를 함께 사용하여 산술과 대입을 한 번에 수행하는 연산자입니다.
3.3 비교 연산자
비교 연산자는 피연산자를 비교하고 논리 값(true 또는 false)을 반환하는 연산을 수행합니다.
여기서 중요한 것은 ==와 ===입니다.
==와 ===의 차이점은 무엇입니까?
x == y는 x와 y의 값이 값이면 true를 반환합니다.
x === y는 x와 y의 값이 동일해야 하고 데이터 유형이 동일해야 하는 경우 true를 반환합니다!
숫자형 10과 문자형 “10”은 서로 다른 데이터형이죠?
10 == “10”은 값이 같기 때문에 true를 반환합니다.
10 === “10”은 같은 값이지만 데이터 유형이 다르기 때문에 잘못된 것입니다.
3.4 논리 연산자
논리 연산자는 피연산자를 논리적으로 평가한 다음 조건을 충족하는 피연산자를 반환하는 연산을 수행합니다.
코딩할 때 이 연산자를 자주 사용하게 됩니다.
&&, ||가 대표적 그리고 !
x && y는 x가 참이면 y를 반환하고 거짓이면 x를 반환합니다.
엑스 || y의 x가 참이면 x를 반환하고 x가 거짓이면 y를 반환합니다.
!xx가 참이면 거짓을 반환하고 그렇지 않으면 참을 반환합니다.
3.5 삼항 연산자
삼항 연산자는 세 항의 왼쪽 피연산자가 참인지 거짓인지에 따라 달라집니다.
연산을 수행하고 선택적으로 나머지 두 용어의 피연산자를 반환합니다.
x ? y : zx가 참이면 y를 반환하고 x가 거짓이면 z를 반환합니다.
3.6 연산자 우선순위
JavaScript의 모든 연산자에는 연산자 우선 순위가 있습니다.
책의 표 9-11을 참조하십시오!
3.7 유형 변환
연산자를 공부할 때 이해하기 좋은 개념은 유형 변환입니다.
유형 변환은 한 데이터 유형을 다른 데이터 유형으로 변경하는 것을 말합니다.
멘토 TIP
방금 배운 연산자의 용어는 중요하지 않습니다!
작동 방식을 이해하기만 하면 됩니다.
코드를 따라 연산자에 익숙해지기만 하면 됩니다.
오늘 자바스크립트 기본 문법에 대해 배웠는데 어땠나요?
내일 우리는 기본 문법에 대해 더 많이 배울 것입니다!
제가 공부한 내용을 확인하시고 궁금한 점이 있으면 댓글을 남겨주세요.
확인하고 답변드리겠습니다.
그럼 내일 또 만나요!
구성
1. 변수와 상수
var, let, const
2. 데이터 유형
문자열, 숫자, 논리, 정의되지 않음, null, 개체
3. 운영자