자바스크립트 JavaScript 기초

Cozler·2024년 8월 10일

JavaScript String array data type else for for문 if if else if문 js number object 객체 기초 문법 문자열 배열 숫자 자료형 자바스크립트 할당

WEB기초

목록 보기

8/9

자바스크립트 JavaScript 기초

1. JS(자바스크립트, JavaScript)란?

사람의 몸과 비교했을 때 WEB에서 HTML이 뼈라면, CSS는 피부이다. 자바스크립트(JS)는 웹 페이지가 동작할 수 있게 만들어주므로 '근육'과 '신경'이라고 할 수 있다.

2. JS의 시작

let a = "hello world!";
console.log(a);

여기서 let은 변수를 선언하겠다는 뜻이다. 첫 줄을 해석하면 'a'라는 변수를 선언하는데, 여기에 "hello world!"라는 문자열을 할당하겠다는 뜻이 된다.

그리고 console.log(a) 는 a를 콘솔창에 로그로 출력하겠다는 뜻이다.

따라서 위 코드 2줄을 실행하면 콘솔창에는

hello world!

이렇게 출력되게 된다.

3. 데이터의 형태

데이터의 형태에는 여러가지 종류가 있다.

3.1. 숫자(Number)

1, 2, 3, 4 같은 숫자가 있을 수 있고,

3.2. 문자열(String)

위에서 코드에서 적어본 것처럼 "hello wolrd!", "apple", "사과" 같은 문자열이 있을 수 있다.

3.3. 배열(Array)

또한 여러가지 데이터를 하나의 배열로 묶어놓고 그 자체를 하나의 데이터로 할당할 수도 있다.

let a = ["딸기", "당근", "수박", "참외", "멜론"];
console.log(a[2]);

여기서 a에 할당된 것은 "딸기", "당근", "수박", "참외", "멜론"를 요소로 가지는 배열이다. 위에서 console.log(a[2])를 실행하면 어떻게 될까?

수박

대부분의 컴퓨터 언어에서는 처음 시작을 0부터 시작하기 때문에 "수박"은 3번째 즉 2의 index를 가지게 된다. 따라서 a[2]의 값은 "수박"이 되는 것이다.

3.4. 객체(Object)

또한 배열과 유사하지만 key와 value를 쌍으로 저장하는 방식인 객체도 있다.

let person = {
  'name': 'Bob',
  'age': 30,
  'height': 180
};
console.log(person['name']);

코드만 봐도 대충 어떤 값이 콘솔창에 출력될 지 쉽게 짐작할 수 있다.

Bob

3.5. 기타

위에서 언급된 형태 말고도 다른 여러가지 자료형들이 존재한다. 하지만 기초적인 수준으로는 위 4가지만 알아도 충분하다고 생각한다. 이외의 자료형은 나중에 자바스크립트를 좀 더 본격적으로 공부할 때 접하는 것이 좋을 것 같다.

4. 조건문과 반복문

컴퓨터 프로그래밍의 꽃이라고 할 수 있는 것은 바로 조건문과 반복문이 아닐까 싶다. 가장 기초적이면서도 가장 많이 사용되는 것이 바로 조건문과 반복문이라고 생각한다.

4.1. 조건문

조건문에는 여러가지가 있지만, 여기에서는 가장 기초적이고 가장 쉬운 if문을 살펴보려고 한다. if문의 기본 공식은 다음과 같다

// if문
if (조건) {실행}

// if - else문
if (조건) {
  실행A
} else {
  실행B
}

// if - else if - else문
if (조건1) {
  실행A
} else if (조건2) {
  실행B
} else {
  실행C
}

if문은 '조건'에 부합하면 '실행'한다. if - else문은 '조건'에 부합하면 '실행A'하고, 그렇지 않은 경우 '실행B'한다. 마지막으로 if - else if - else문은 '조건1'에 부합하면 '실행A'하고, '조건2'에 부합하면 '실행B'하고, 그것도 아닌 상황이라면 '실행C'한다.

사실 if문은 워낙 직관적으로 코드가 이루어져있어서, 코드에 대한 전문지식이 전혀 없는 사람이 보더라도 대략적인 내용을 파악할 수 있게 되어있다.

이번엔 if문의 실제 사용 예시를 살펴보자.

let age = 15;
if (age < 20) {
  console.log('청소년입니다.');
} else {
  console.log('성인입니다.');
};

위 코드는 만약 age가 20 미만이라면 '청소년입니다.'를 출력하고 그렇지 않다면 '성인입니다.'를 출력하게 된다.

4.2. 반복문

반복문에도 조건문과 마찬가지로 여러가지 종류가 있지만, 여기에서는 가장 자주 쓰이고 가장 기초적인 for문을 살펴보려고 한다. for문의 기본 공식은 다음과 같다.

for(let i = 0; i < 5; i++) {
  console.log(i);
}

위 코드를 해석하면 다음과 같다.

- for문 ( ) 속 - 반복문의 세팅
* let i = 0 : i라는 변수를 선언하고 0을 할당한다.
* i < 5 : i가 5 미만인 동안 이 반복문을 실행한다.
* i++ : 1회 실행마다 i를 1씩 증가시킨다.

- for문 { } 속 - 실제 반복하게 되는 코드들
* console.log(i) : 지금의 i를 출력한다.

- 실제 출력되는 것
0
1
2
3
4

이번에는 실제 사용 예시를 살펴보자.

let a = [20, 15, 3, 19];
let b = 0;
for (let i = 0; i < 4; i++) {
  b = b + a[i];
}
console.log(b);

여기서 b = b + a[i]라는 코드를 살펴보자. 이를 단순히 수학의 식으로 생각하면 양변의 b를 날리면 0 = a[i] 라는 이상한 코드가 된다. 하지만 JS에서 =은 '같다'의 의미가 아니라, 좌변의 변수에 우변의 값을 할당한다는 의미이다. 즉 변수 b에 b + a[i]를 다시 할당하는 것이다.

위 반복문 코드가 실제로 어떻게 진행되는지 분해해서 살펴보자.

i:0 => b = 0 + 20
i:1 => b = 0 + 20 + 15
i:2 => b = 0 + 20 + 15 + 3
i:3 => b = 0 + 20 + 15 + 3 + 19
i:4 => 'i < 4'가 성립하지 않으므로 반복문 종료
console.log(b)는 '57'을 출력한다.