[S1U10] JavaScript 핵심 개념과 주요 문법

 

원시 자료형과 참조 자료형

---

✏️ 원시 자료형

원시 자료형이란? 객체가 아니면서 method를 가지지 않는 자료형으로 변수에 하나의 데이터만 저장할 수 있고 해당 데이터는 값 자체이다.

원시 자료형 종류 6가지
string, number, bigint, boolean, undefined, symbol, (null)

 

"hello world!"
"hello september!"
// "hello world"와 "hello september!"은 모두 변경할 수 없는 고정된 값이다.

let word = "hello world!"
word = "hello september!"
// word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경하는 것은 가능하다.

 

✏️ 참조 자료형

참조 자료형이란? 원시 자료형이 아닌 모든 것으로, 여러 개의 데이터를 담을 수 있다. 변수에 데이터의 주소가 담기고 데이터는 heap이라는 별도의 공간에 저장된다.

참조 자료형 종류
배열([]), 객체({}), 함수(function () {})

 

 

스코프

---

스코프란? 현재 실행되는 컨텍스트로, 변수에 접근할 수 있는 범위를 말한다.

 

✏️ 스코프의 특징

바깥 스코프에서 선언한 변수는 안 스코프에서 사용 가능하고 안 스코프에서 선언한 변수는 바깥 스코프에서 사용 불가능하다.

1. 안에서 바깥 스코프로 접근이 가능하나 반대는 불가능하다.
2. 스코프는 중첩이 가능하다.
3. 가장 바깥 스코프는 전역 스코프(Global Scope), 그 외는 지역 스코프(Local Scope)라고 한다.
4. 지역 스코프에 선언한 변수는 지역 변수, 전역 스코프에 선언한 변수는 전역 변수라 하는데 지역변수는 전역 변수보다 높은 우선순위를 가진다.

let username = 'sonsubin';
if (username) {
    let message = `Hello, ${username}!`;
    console.log(message); // 'Hello, sonsubin!'
}

console.log(message); // Uncaught ReferenceError: message is not defined
// message라는 변수가 안 스코프에 선언되어 있으므로 바깥 스코프에서는 접근할 수 없다.

let name = '손수빈'; // 전역 변수

function showName() {
    let name = '홍길동'; // 지역 변수
    console.log(name);
}

console.log(name); // '손수빈'
showName(); // '홍길동'
console.log(name); // '손수빈'
// 9번째 줄의 지역 변수가 전역 변수보다 우선순위가 높기 때문에 '손수빈'보다 '홍길동'이 먼저 출력된다.

 

✏️ 스코프의 종류

• 블록 스코프(Block Scpoe) : 중괄호와 화살표로 둘러싼 범위이다. 화살표로 둘러싼 범위도 블록 스코프이므로 화살표 함수는 함수 스코프가 아닌 블록 스코프이다.
• 함수 스코프(Function Scope) : 함수(function)로 둘러싼 범위이다.

 

변수 선언에 따른 스코프 유효 범위

	let	const	var
유효 범위	블록 스코프 및 함수 스코프	블록 스코프 및 함수 스코프	함수 스코프
값의 재할당	O	X	O
변수의 재선언	X	X	O

 

선언 없는 변수 할당을 방지하기 위해 Sctric Mode를 적용하면 변수의 선언이 없이 값을 할당했을 때 에러로 판단한다.
Strict Mode를 적용하기 위해서는 js 파일 상단에 'use strict';를 입력하면 된다.

 

 

클로저

---

클로저란? 함수와 함수가 선언된 어휘적 환경의 조합으로 외부 함수에 변수가 선언되어 있고, 이 변수에 접근할 수 있는 내부 함수를 클로저라고 한다.

// const adder = x => y => x + y;
const adder = function(x) {
    return function(y) {
        return x + y;
    }
}

 

✏️ 클로저의 특징

• 외부 함수의 리턴값이 함수의 형태이다.
• 내부 함수는 외부 함수에 선언된 변수에 접근이 가능하다.

// const adder = x => y => x + y;
const adder = function(x) {
    return function(y) {
        return x + y;
    }
}

typeof adder(4); // 'function' : 리턴값이 함수이다.
adder(4); // y = 4 + y : 내부 함수는 외부 함수에 선언된 변수에 접근이 가능하다.

 

✏️ 클로저의 활용

• 데이터를 보존하는 함수 : 외부 함수의 실행이 끝나도 외부 함수의 변수가 메모리 상에 저장된다.

// const adder = x => y => x + y;
const adder = function(x) {
    return function(y) {
        return x + y;
    }
}

const add4 = adder(4);
add4(8); // 12
add4(12); // 16
// 함수의 실행이 끝나도 4라는 값이 저장돼있으므로 4+8=12와 4+12=16이 결과값으로 출력된다.

// HTML 문자열 생성기
const tagMaker = tag => content => `<${tag}>${content}</${tag}>`;

const divMaker = tagMaker('div');
divMaker('hello'); // '<div>hello</div>'
divMaker('kakao'); // '<div>kakao</div>'

const anchorMaker = tagMaker('a');
anchorMaker('go'); // '<a>go</a>'
anchorMaker('tistory'); // '<a>tistory</a>'

• 정보의 접근 제한(캡슐화) : 선언한 함수를 바꾸지 않고 함수 내부의 변수에 새 값을 할당할 수 없다.

const makeCounter = () => {
    let value = 0;
    return {
        increase: () => {
            value = value + 1
        },
        decrease: () => {
            value = value - 1
        },
        getValue: () => value
    }
}

const counter1 = makeCounter(); // makeCounter 함수를 변경하지 않고 value에 새 값을 할당할 수 없다.
counter1; // { increase: f, decrease: f, getValue: f }

• 모듈화 : 함수의 재사용성을 극대화하여 함수 하나를 완전히 독립적인 부품 형태로 분리한다.

const counter1 = makeCounter();
counter1.increase();
counter1.increase();
counter1.decrease();
counter1.getValue(); // 1

const counter2 = makerCounter();
counter2.decrease();
counter2.decrease();
counter2.decrease();
counter2.getValue(); // -3
// counter1과 counter2는 독립적으로 작동하기 때문에 각각 초기 value의 값을 0으로 가진다.

 

 

ES6 주요 문법

---

✏️ spread/rest 문법

• spread 문법 : 주로 배열을 풀어서 인자로 전달하거나, 각각의 요소로 넣을 때 사용한다.

function sum(x, y, z) {
    return x + y + z;
}

const numbers = [1, 2, 3];
sum(...numbers); // 6
// numbers 배열에 있는 값을 모두 풀어서 인자로 전달하여 1 + 2 + 3이 성립

• rest 문법 : 파라미터를 배열의 형태로 받아서 사용한다. 파라미터의 개수가 유동적일 때 유용하다.

function add(...rest) {
    let sum = 0;
    for (let i of rest) {
        sum += i;
    }
    return sum;
}

add(1, 2, 3); // 6
// 1, 2, 3을 배열로 만들어 for문에 전달하므로 1 + 2 + 3이 성립

 

spread 문법이 기존에 있는 배열을 펼쳐 사용한다면 rest 문법은 배열이 아닌 것을 배열로 만들어준다.

 

✏️ spread/rest 문법 활용

• 배열 합치기

let parts = ['shoulders', 'knee'];
let lyrics = ['head', ...parts, 'and', 'toes'];

console.log(lyrics); // [ 'head', 'shoulders', 'knee', 'and', 'toes' ]

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2]; // spread 문법은 immutable하다.

console.log(arr1); // [ 0, 1, 2, 3, 4, 5 ]

• 배열 복사

let arr1 = [1, 2, 3];
let arr2 = [...arr1];
arr2.push(4);

console.log(arr1); // [ 1, 2, 3 ]
console.log(arr2); // [ 1, 2, 3, 4 ]

• 객체에서 사용

let obj1 = {foo: 'bar', x: 42};
let obj2 = {foo: 'baz', y: 13};

let clonedObj = {...obj1};
let mergedObj = {...obj1, ...obj2};

console.log(clonedObj); // { foo: 'bar', x: 42 }
console.log(mergedObj); // { foo: 'baz', x: 42, y: 13 }

• 함수에서 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs) {
    console.log("a ", a);
    console.log("b ", b);
    console.log("manyMoreArgs ", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");
// a one
// b two
// manyMoreArgs [ 'three', 'four', 'five', 'six' ]