[JavaScript] 자바스크립트 놓치기 쉬운 기본 개념들

[JavaScript] 자바스크립트 놓치기 쉬운 기본 개념들

 

1. const vs let

const는 상수를 입력할 때 쓰인다.

상수란 변하지 않는 값으로, 한 번 정하면 나중에 바꿀 수 없다.

 

const a = 5;
console.log(a+a)    // 10

const a = 10;
console.log(a+a)    // Assignment to constant variable. 에러

 

위의 예시처럼 a를 const로 정해놓고 5를 입력했으면 이후 이 값은 바뀔 수 없다.

이 a값을 10으로 바꾸려 했더니 Assignment to constant variable. 에러가 떴고,

이는 상수값에 값을 적용하려 했다는 의미의 에러이다.

 

 

값을 마음껏 변경하고 싶은 변수값을 입력하려면 const가 아닌 let을 이용해야 한다.

let a = 5;
console.log(a+a)    // 10

a = 10;
console.log(a+a)    // 20

 

위의 예시처럼 a를 let으로 설정해 놓으면 나중에 값을 바꿀 수 있다.

a의 값을 변경할 때는 let을 붙이지 않는다.

 

---

const와 let은 JavaScript의 초창기부터 있었던 건 아니다.

오래 전 만들어진 JavaScript을 보면 const와 let이 아닌 var을 이용한 변수 선언문을 볼 수 있을 것이다.

물론 지금도 var을 사용할 순 있지만, const와 let을 이용해야지 코드를 짠 사람의 의도를 더 명확히 파악할 수 있다.

 

변수를 선언할 때는, const와 let 중에서 const를 더 많이 사용하고 필요한 경우에만 let을 사용한다.

 

 

 

2. false vs null vs undefined

false는 false라는 값이 있는 것이고,

null은 아무것도 없는 것이고,

undefined는 정의가 되어있지 않다는 것이다.

 

const a = false;
const b = null;
let c;

console.log(a, b, c)    // false null undefined

 

 

 

3. array에 값 추가하기 (push)

JS에서 array는 []를 이용한다.

const array1 = [1, 2, 3]

위의 array1의 마지막에 4를 추가하고 싶으면 아래와 같이 push를 이용하면 된다.

array1.push(4)

이렇게 하면 array1 = [1, 2, 3, 4] 가 된다.

 

 

cf. array 요소에 접근하는 방법은 아래와 같다. index는 0부터 시작한다는 것에 주의하자.

array1[0] = 1

array1[1] = 1

array1[2] = 1

array1[3] = 1

 

 

 

4. Object

자바스크립트에서 객체는 중괄호{}를 이용해 만든다.

 

const person = {
    name: ['김가나', '박다라'],
    gender: '여자',
    age: 20,
};

name, gender, age는 객체의 프로퍼티(속성)라 부른다.

각 프로퍼티 끝에는 ;가 아닌 ,을 입력해준다.

각 프로퍼티에 접근할 때는 person.name이나 person.gender로 접근한다.

 

(1)

object를 선언한 중괄호{} 밖에서도 프로퍼티를 추가할 수 있다.

(2)

object를 const로 선언했어도 object의 각 프로퍼티들을 바꾸는 것은 허용된다.

(const로 선언한 것은 object의 각 프로퍼티들이 아니라, object 자체이므로 object를 통째로 바꾸는 것은 허용되지 않는다.)

const person = {
    name: ['김가나', '박다라'],
    gender: '여자',
    age: 20,
};
person.isMarried = "true";
person.age = 30;

console.log(person);    // 아래의 박스 안에 있는 내용이 뜬다.

{name: Array(2), gender: "여자", age: 30, isMarried: "true"}
    age: 30
    gender: "여자"
    isMarried: "true"
    name: ["김가나", "박다라"]

 

 

 

5. function(함수) 만들기

function 함수명(매개변수) {
    내용
}

 

JavaScript에서 function(함수) 만들기 예시를 몇 개 보자.

 

1) 매개변수가 한 개인 함수

function sayHello(Name) {
    console.log("Hello" + Name);
}

sayHello("World.");               // Hello World.
sayHello("15호의 개발자.");    // Hello 15호의 개발자.

 

2) 매개변수가 두 개인 함수

function add(a, b) {
    console.log(a + b);
}

add(2, 3);    // 5

 

3) Object 안에 생성한 함수

const person = {
    name: ['김가나', '박다라'],
    gender: '여자',
    age: 20,
    sayHello: function() {
        console.log("Hello!");
    },
};

person.sayHello();    // Hello!

 

 

 

6. 제곱(power) 표현하기

자바스크립트에서 제곱(power)은 **로 표현한다.

2**2    // 4
2**3    // 8
2**10    // 1024

 

 

 

7. document.

자바스크립트에서 HTML 파일에 접근(=HTML 태그에 접근)하는 방법은 DOM을 이용하는 것이다.

DOM이란 The Dovument Object Model(문서 객체 모델)로, HTML 문서의 프로그래밍 인터페이스이다.

 

DOM에 접근하는 방법 중 하나는 document를 이용하는 것이다.

document는 JS 관점에서 볼 때, HTML을 말하는 것이다.

웹페이지에서 Ctrl + Shift + I 를 눌러 검사창을 연 다음, 콘솔 창에서

document.title = "내용"

을 입력해보면 해당 페이지의 title(탭 명)이 바뀐 것을 확인할 수 있다.

 

즉, JavaScript를 통해 (=콘솔 창을 통해)

HTML 파일에 접근할 수 있는 것이다. (=페이지의 title(탭 명)을 바꿀 수 있다)

 

 

 

8. string 문자열 결합 ${ }

문자열을 결합할 때는 +연산자를 많이 쓴다.

const name = "James";
const greeting = "Hello " + name;

 

이때 `${변수명}`를 이용해도 같은 의미이다.

주의해야할 부분은, 큰 따옴표(")나 작은 따옴표(')가 아닌 백틱(`)을 사용해야한다는 것이다.

const greeting = `Hello ${name}`;