[JS] 1주차 스터디 기록 - 기본 문법

손규성·2022년 10월 9일

javascript

목록 보기

2/8

자바스크립트(JavaScript)란?

HTML로 웹의 내용을 작성하고 CSS로 웹을 디자인 한다면, 자바스크립트는 웹의 동작을 구현하고 개발자가 대화식 웹 페이지를 만들 수 있게 해주는 프로그래밍 언어이다. 웹사이트에서 이미지 슬라이드 쇼, 드롭 다운 메뉴 등 기타 동적 변화를 보게 된다면 이는 자바스크립트의 효과라고 할 수 있다.

참고:

객체 기반의 스크립트 언어임
동적이며 타입을 명시할 필요가 없는 인터프리터 언어임
객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음
Java와 JavaScript의 문법 둘 다 C언어 기반이라 비슷하지만 두 언어는 직접적인 관련은 없음

기본 문법

1. 변수(Variable)

변수는 다양한 값을 담을 수 있는 박스와 같은 일종의 컨테이너이다
아래 keyword들을 사용해서 선언할 수 있다
- let → 변경 가능한 변수를 저장할 때 사용
- const → 한번 할당하면 더는 바꿀 수 없는 상수를 저장할 때 사용
- var → 과거에 사용했지만 현재는 잘 사용하지 않음
변수명에는 기호 $, _만 사용 가능하고, 첫 글자는 숫자가 될 수 없다
또한 변수명은 카멜 표기법(camelCase)으로 작성하는 것이 일반적이다

Examples:

// 1. camelCase를 사용해 작성된 변수명 (userNames)
const userNames = ['James', 'Jinyoung', 'Johnny', 'Jeongsu'];

// 2. 변수명으로 x2는 되지만, 2x는 안된다 (첫 글자 = 숫자 X)
let x2 = 123;

// 3. var은 과거에 자주 사용되었지만 현재는 let과 const를 더 많이 쓰려고 한다
var solution = answer;

2. 자료형(Data Type)

JavaScript 언어의 자료형 크게 원시값과 객체로 나뉜다

원시 값(Primitive)

No.	데이터 타입	요약
1	boolean	true or false, 논리 요소를 나타냄
2	null	유효하지 않거나 존재하지 않는 object, 또는 주소를 의도적으로 가리키는 참조
3	undefined	값을 할당하지 않은 변수 (null과 다름)
4	string	텍스트 데이터 (다른 값이어도 " " 사이에 위치하면 string 값으로 입력됨
5	number	(2^53 − 1)부터 (2^53 − 1)까지의 수, NaN, +Infinity, -Inifinity 값 포함
6	symbol	객체 프로퍼티 키를 고유하게 설정하게 함 (키 충돌 방지)

Example A:

// 1. boolean
let x = 4; 
let y = 5; 

console.log(x > y); //output: true 
console.log(x === y); //output: false

// 2. null
let foo = null;
console.log(foo); output: null 

// 3. undefined
const a = 10;
const b = 20;
const c = 30;

console.log(d); //undefined 

//4. string 
let x = 'hello world'; 
let y = '86';
let z = 86;

console.log(typeof x) //output: string
console.log(typeof y) //output: string
console.log(typeof z) //output: number

// 5. number
let x = 10;
let y = 20;
let z = x + y;

console.log(typeof x) //output: number
console.log(typeof y) //output: number
console.log(typeof z) //output: number

객체(Object)

원시형 데이터의 집합
원시형 데이터가 아닌 것은 모두 객체이다
예) 배열 [], 객체 {}, 함수 function() {}

Example B:

// 1. 배열(Array)
let arr = [1, 2, 3, 4, 5];

// 2. 객체(Object)
userInfo { name : 'James', age: '23' };

// 3. 함수(function)
function isNumber(num) {
  if(typeof num === 'number') return 1;
}

3. 함수(Function)

하나의 목적을 가진 작업들을 수행하는 코드 블럭이다 (지시사항들의 묶음)
매개변수(parameter)을 입력받고, 함수 내 문을 실행하여 새로운 값(return value)를 반환한다
위에서 언급했듯 함수 또한 값이기 때문에 여러 개 존재할 수 있으며, 구별을 목적으로 함수명을 사용할 수 있다
자바스크립트에서 함수를 사용하는 방법은 다양하다 (아래 Example C 참고)

Example C:

// 1. 함수 선언식 
function addNums(a, b) {
  return a + b;
}

let x = 1; 
let y = 2;

console.log(addNums(x, y)); //output: 3

// 2. 함수 리터럴 
const sayHello = function() {
  return 'Hello World!';
}

// 참고 : 함수는 꼭 매개변수(parameter)를 입력받아야 하는 것은 아니다