[HTML+CSS+자바스크립트] 9장 자바스크립트 기초 문법 살펴보기 (~365p)

안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열한 번째 날로, 자바스크립트 공부 두 번째 날입니다!

오늘부터 조금 어려워져도 힘을 내서 공부 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

 

🏃 공부할 내용(332~365p)

1. 변수와 상수

2. 자료형

3. 연산자

 

1. 변수와 상수

---

1.1 변수

변수는 말 그대로 변하는 수를 뜻해요.

그래서 자바스크립트에서는 값이 변하는 데이터를 저장하고 관리하기 위한 공간으로 변수를 만듭니다.

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 키워드로 변수를 선언하고 할당했을 때, 변수 선언을 자바스크립트의 스코프 맨 위로 올려 실행하는 것을 말해요. 스코프는 10.4.1에서 자세히 배우니 지금은 간단히 넘어가셔도 돼요.

 

다음을 보시면, 변수를 선언하고 할당하는 초기화 전에 num이라는 변수를 출력하고 있습니다.

결과를 보면 당연히 오류가 나와야 되는데 undefined가 나오고 있죠?

이 배경에 호이스팅 개념이 있어요.

 

다음과 같이 선언이 취상위로 올라오기 때문에

num이라는 변수를 출력할 때는 값이 없을 뿐 선언된 상태라서 오류가 나지 않아요.

 

이와 반대로 let은 호이스팅이 일어나지 않습니다.

그래서 같은 코드를 작성하고 실행하며 num 변수가 정의되지 않았다는 오류가 발생해요.

 

즉, 정리하자면 var는 호이스팅이 일어나고, let은 호이스팅이 일어나지 않아요!

 

3️⃣ 스코프의 범위가 다릅니다.

var 키워드랑 let 키워드는 참조하는 스코프가 좀 달라요.

이 차이점 때문에 실무에서는 되도록 let 키워드를 선언하기를 권장해요!

스코프에 대해서 더 자세히 알아보려면 아래 링크를 참고해 주세요~

[JavaScript] 스코프(Scope)와 var, let, const 차이점

 

1.3 상수

변수를 선언할 때 사용하는 키워드로 const도 있어요.

const 키워드는 let 키워드와 같이 ES6에서 추가됐습니다.

기본 내용은 let과 같지만, const 키워드는 재할당이 안 된다는 점입니다.

 

다음을 보면, 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의 차이점

 

2. 자료형

---

2.1 문자열

""나 ''로 둘러싸인 형태를 문자열이라고 해요.

let string = "Hello World!";

 

+를 사용해서 문자열을 연결해서 사용할 수도 있죠.

let string = "Hello World!" + " coding";
console.log(string);

따옴표가 아닌 키보드 맨 왼쪽 위에 있는 `(백틱)을 사용하시면 문자열에 변수도 넣을 수 있어요.

문자열에 넣을 땐 ${} 문법을 이용해야 해요!

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 논리형

논리 자료형(논리형)은 참 또는 거짓에 해당하는 논리 값인 true, false를 의미해요.

문자열이나 숫자는 해당 자료형을 정의하는 값이 무수히 많지만, 논리형은 오직 true와 false 두 값만 있어요!

let boolean1 = true;
let boolean2 = false;

 

2.4 undefined

변수나 상수를 컴퓨터 메모리 공간에 선언하면 반드시 생성한 공간에 저장할 데이터를 할당해야 해요.

할당하지 않을 경우 자바스크립트 내부적으로 변수와 상수 공간에 임시로 데이터를 할당하는데, 이때 할당되는 값이 undefined입니다. 

let empty;
console.log(empty); // undefined

 

2.5 null

null 자료형은 null 값 하나만 있으며, 변수나 상수를 선언하고 의도적으로 선언한 공간을 비워 둘 때 할당합니다.

let empty = null;
console.log(empty); // null

 

2.6 객체

객체는 자바스크립트의 핵심적인 자료형입니다.

앞에서 언급한 기본 자료형을 제외하고 자바스크립트에서 거의 모든 데이터와 자료구조는 객체라고 봐야 해요!

객체 자료형에서 파생되는 자료형으로 배열, 객체 리터럴, 함수가 있어요.

 

- 배열

배열은 복수의 데이터를 정의할 수 있는 자료형이에요.

배열을 사용하면 하나의 자료형에 여러 개의 데이터를 정의할 수 있답니다!

let studentScore = [80, 70, 90, 60]; // 국어, 영어, 수학, 과학

 

다음과 같이 인덱스로 접근할 수 있는데, 자바스크립트에서는 숫자가 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 산술 연산자

산술 연산자는 덧셈, 뺄셈 곱셈, 나눗셈과 같은 수학 연산을 수행하는 연산자를 말해요.

자바스크립트에서 사용할 수 있는 산술 연산자는 이항 산술 연산자, 단항 산술 연산자, 단항 부정 연산자가 있습니다.

이에 대해선 책을 자세히 보시면서 따라 쳐보시는 거 추천드릴게요!

 

3.2 대입 연산자와 복합 대입 연산자

대입 연산자는 데이터를 대입(할당)하는 연산을 수행하는 연산자를 말해요.

복합 대입 연산자는 산술 연산자와 대입 연산자를 함께 사용해 산술과 할당을 한 번에 수행하는 연산자를 말합니다.

 

3.3 비교 연산자

비교 연산자는 피연산자를 비교한 뒤, 논리형 값인 참(true), 거짓(false)을 반환하는 연산을 수행합니다.

여기서 중요한 것은 ==과 ===인데 한 번 살펴봅시다.

 

==와 === 다른 점은 뭘까요?

x == y는 x와 y의 값이 값으면 true를 반환하는 것이고

x === y는 x와 y의 값도 같아야 하고, 자료형도 같아야 true를 반환하는 것입니다!

 

숫자형 10과 문자형 "10"은 자료형이 다르죠?

10 == "10"은 값이 같기 때문에 true가 나올 것이고

10 === "10"은 값은 같지만, 자료형이 다르기 때문에 false가 나올 것입니다.

 

3.4 논리 연산자

논리 연산자는 피연산자를 논리적으로 평가한 뒤, 조건에 맞는 피연산자를 반환하는 연산을 수행합니다.

이 연산자는 코딩하면서 많이 사용하게 돼요.

 

대표적으로 &&, ||, !가 있는데 

x && y에서 x가 참이면 y를 반환하고, 거짓이면 x를 반환합니다.

x || y에서 x가 참이면 x를 반환하고, 거짓이면 y를 반환합니다.

!x x가 참이면 false를 반환하고, 거짓이면 ture를 반환합니다.

 

3.5 삼항 연산자

삼항 연산자는 세 항 중 가장 왼쪽에 있는 피연산자의 참, 거짓에 따라

나머지 두 항에 있는 피연산자를 선택적으로 반환하는 연산을 수행해요.

x ? y : z

x가 참이면 y를 반환하고, x가 거짓이면 z를 반환합니다.

 

3.6 연산자 우선순위

자바스크립트의 모든 연산자에는 연산자 우선순위가 있습니다.

이는 책의 표 9-11을 참고해 주세요!

 

3.7 형 변환

연산자를 공부할 때 같이 이해하면 좋은 개념이 바로 형 변환입니다.

형 변환은 데이터의 자료형이 다른 자료형으로 바뀌는 것을 말해요.

 

💡 멘토 TIP

방금 배운 연산자의 용어들이 중요한 게 아니에요!

어떤 식으로 연산이 되는지 이해만 하면 됩니다.

코드를 따라 쳐보시면서 연산자에 익숙해지기만 하면 돼요~

 

 

오늘 자바스크립트의 기초 문법들에 대해서 알아봤는데 어떠셨나요?

내일도 기초 문법에 대해서 더 알아볼 예정이에요!

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다. 
그럼 내일 다시 만나요!

 

✅ 정리

1. 변수와 상수
var, let, const
2. 자료형
문자열, 숫자형, 논리형, undefined, null, 객체
3. 연산자