학습 목표
- 자바스크립트에서 변수의 선언과 값의 할당에 대해서 알 수 있다.
- "="이 "같다"라는 의미가 아닌 "할당 연산자"임을 이해할 수 있다.
- 자바스크립트의 데이터 타입 중 숫자, 문자열, 불리언 타입에 대해서 이해할 수 있다.
- 함수의 작성 방법을 알아보고, 호출과 리턴의 작동 원리를 이해할 수 있다.JavaScript
JavaScript(자바스크립트) 란?
= 내부 인테리어 하기. 웹 페이지에 생동감을 불어넣는 것이다.// 정적인 웹 페이지를 동적으로 제어하기 위해 고안된 프로그래밍 언어(=OS 운영체제에 명령을 내리는 것) 다.
변수
변수란?
= 데이터(자료)를 담아두는 그릇과 같다.// 변수에 이름을 달아주는 것을 '선언'이라고 한다. ex) 'a'라는 변수를 선언한다.
// 변수에 물건을 담는 것 (대입하는 것)을 '할당이라고 한다. ex) 'a'라는 변수에 숫자 '2'를 담아줘라.
[let 변수이름 = 할당할 값;]
- ex) let a = 2; --> let a (선언) = 2 (할당)
- 담아라 (let = 변수를 선언할 때 사용) / 'a'라는 변수에 (선언 = 변수에 이름을 정함) / 할당 연산자 '=' / 숫자 '2'를 (해당 변수에 할당할 값)
- '='는 '같음'을 의미하는 게 아니라 '오른쪽에 있는 것을 왼쪽에 대입하라 (변수에 값을 할당할 때 사용)'는 의미다.
- ';'는 한 문장이 끝났음을 의미하는 마침표와 같다.
- 자바스크립트에서 주석을 달 때는 컴퓨터가 읽지 못하는 텍스트인 '//'를 사용한다.// 단, 변수의 선언과 할당을 할 때는 주의해야 하는 것들이 있다.
- 변수의 이름에는 띄어쓰기가 있으면 안된다.
- 띄어쓰기 대신 사용하는 변수 작성법이 있다.
- 스네이트 케이스 (snake_case) : 띄어쓰기 대신 언더스코어(_)를 사용하여 구분하는 방법
- 파스칼 케이스 (PascalCase) : 모든 단어를 대문자로 시작하여 구분하는 방법
- 카멜 케이스 (camelCase) : 두 번째 단어부터 대문자로 시작하여 구분하는 방법
* 자바스크립트에서 영어로 변수명, 함수명을 작성할 때는 '카멜 케이스'를 사용하는 것이 관례이다.
- 같은지 다른지를 비교할 때는 비교 연산자를 사용한다.
'=='를 사용하여 같음을 나타내고, '!=='를 사용하여 다름을 나타낸다.
'='는 비교 연산자가 아닌 할당 연산자이다.타입
타입이란?
= 자료의 형태 혹은 데이터의 종류.
한글이나 영어에 단어가 있듯이 자바스크립트에도 그 역할을 하는 자료의 형태가 있다.// 자료의 형태 혹은 데이터의 종류를 의미하는 '타입' 중에서도 가장 많이 사용하는 대표적인 자료형들이 있다.
ex) Number(숫자), String(문자열), Boolean(불리언), list(리스트), dictionary(딕셔너리), undefined(정의되지 않았음)..
- **Number (숫자)**
- 정수, 소수, 분수 등의 모든 수를 나타내기 위해 사용하는 데이터 타입
- 따옴표 없이 숫자 그 자체를 입력하여 나타낼 수 있다.
- 숫자와 숫자 사이에는 사칙연산이 성립한다.
- ex) -100, -50, 0, 50, 100, 1/2, 3.141592653 ..
- **String (문자열)**
- 문자를 표현하기 위해 사용하는 데이터 타입
- 문자를 표현하기 위해서는 큰따옴표("")와 작은따옴표('')가 필요하다.
- 자바스크립트에서 큰따옴표("")와 작은따옴표('') 사이에
입력된 모든 데이터는 문자열로 취급된다.
- 숫자도 큰따옴표("")와 작은따옴표('') 사이에 입력되면 숫자가 아닌 문자열로 취급한다.
- 문자열과 문자열 사이에는 덧셈이 성립한다.
이때는 숫자의 덧셈과 달리 두 개의 문자열을 하나로 이어붙여주는 용도로 사용된다.
ex) > "abc" + "def"
"abcdef"
- 항상 같은 종류의 따옴표로 열고 닫아야 한다. "' (x), '" (x)
- ex) "행운이", '행운이의 농장', "30",
- **Boolean (불리언)**
- 참과 거짓을 표현하기 위해 사용하는 데이터 타입
- 소문자 true와 소문자 false 두 죵류가 있다.
- true는 숫자 1을 의미하고, false는 숫자 0를 의미한다.
- 따라서 불리언과 넘버 사이에 사칙연산이 성립한다.
ex) > true + 1 > false + 1
2 1
- **list (리스트)**
- 여러 데이터들을 대괄호 ([])안에 묶어서 하나의 배열(array)로 만들기 위해
사용하는 데이터 타입
ex) [1,2,3,"행운이"]
- **dictionary (딕셔너리) **
- 영어 단어 사전에서 영단어 : 품사, 의미를 알려주듯 중괄호 ({}) 안에
키와 밸류(값) 형태로 데이터를 1:1로 대응시키 위해 사용하는 데이터 타입으로
객체라고도 한다.
ex) {"행운이" : 30}
- **undefined (정의되지 않았음)**
- 아직 데이터가 정의도지 않은 상태를 의미하기 위해 사용하는 데이터 타입으로
데이터가 입력될 수 있는 공간임에도 불구하고 비어있다는 뜻으로 사용된다.
- 주로 코드에 문제가 생겼을 때 등장하는데,
만약 자바스크립트로 코딩하는 중에 문제가 발생했고,
에러 메시지에 undefined가 등장했다면,
어딘가에 데이터 누락이 발생한 것은 아닌지 살펴봐야 한다.<실습>
// 변수를 선언하고 값을 할당하는 방법을 실습해봅시다.
// 1. let 키워드를 사용해서 tomato, kiwi,
// carrot, strawberry 라는 변수를 선언하세요.
// 2. 각 변수에 맞는 이모지를 문자열로
// 할당해주세요. (🍅 🥝 🍓 🥕)
// 3. 화면에 결과가 잘 나온다면 선언과 할당을
// 성공적으로 진행하신겁니다!
// 👇 그럼, 여기서부터 코드를 작성해보세요 :)
// TODO..
let tomato = "🍅";
let kiwi = "🥝";
let carrot = '🥕';
let strawberry = '🍓 ';
// 아래 코드는 건드리지 마세요.
export default function test() {
let result = { tomato: "", kiwi: "", carrot: "", strawberry: "" };
if (typeof tomato !== "undefined") result.tomato = tomato;
if (typeof kiwi !== "undefined") result.kiwi = kiwi;
if (typeof carrot !== "undefined") result.carrot = carrot;
if (typeof strawberry !== "undefined") result.strawberry = strawberry;
return result;
}<결과물>
developerpyk