📌 JavaScript 핵심 개념과 주요 문법 - 1
원시 자료형과 참조 자료형
1. 원시 자료형 (primitive data type)
- 원시 자료형은 하나의 정보(데이터)를 담는 특징을 가진다.
- 원시 자료형이 할당될 때에는 변수의 값 자체가 할당된다.
- 원시 자료형은 값 자체에 대한 변경이 불가능(immutuable)하다.
- 대표적인 원시 자료형으로는
number,string,boolean,undefined,null등이 존재한다.
let num1 = 1;
let num2 = num1;
num2 = 345;
console.log(num1);
// 1 -> number는 원시 자료형으로 num1의 값을 num2로 복사하여 할당했기 때문에 num1은 영향 받지X2. 참조 자료형 (refernce data type)
- 데이터의 값을 저장하는 것이 아닌 데이터가 담긴 저장소의 주소를 저장하는 특징을 가진다.
- 참조 자료형이 할당될 때는 보관함의 주소가 할당된다.
- 데이터를 저장하는 장소는
heap이며, 저장하는 데이터의 크기에 따라 동적으로 변한다. - 대표적인 참조 자료형으로는
object,array,function등이 존재한다.
// 참조 자료형의 예시
let arr1 = [3, 4, 5, 6];
let arr2 = arr1;
arr2[2] = 10;
console.log(arr1) // [3, 4, 10, 6]
console.log(arr1 === arr2) // true
console.log([4, 5, 6] === [4, 5, 6]) // false
// 참조 자료형에서 '===' 은 주소값이 같은지 확인 스코프(Scope)
변수에 접근할 수 있는 범위가 중괄호(블록) 혹은 함수에 의해 나뉘어지고 그 범위를 스코프라 부른다. (변수 접근 규칙에 따른 유효 범위)
1. 스코프의 특징
- 안쪽 스코프에서 바깥쪽 스코프로는 접근이 가능하지만 반대는 불가능
- 중첩이 가능
- 가장 바깥쪽에 위치한 스코프는 전역 스코프(Global scope), 전역이 아닌 다른 모든 스코프는 지역 스코프(Local scope)이다.
- 지역 변수는 전역 변수보다 더 높은 우선 순위를 가진다.
let name = '김코딩';
function showName() {
let name = '박해커';
console.log(name);
}
console.log(name); // 김코딩
showName(); // 박해커
//why? 변수 이름이 전역 변수와 동일하지만 지역 변수가 전역 변수보다 우선순위가 높으므로 지역 변수의 name이 출력
//이처럼 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는 현상을 쉐도잉(variable shadowing)이라 한다.
console.log(name); //김코딩let name = '김코딩';
function showName() {
name = '박해커'; //위 예제와 다르게 let을 통해 선언X
console.log(name);
}
console.log(name); // 김코딩
showName(); // 박해커
console.log(name); // 박해커
// why? 박해커라는 값을 할당하고 있는 name 변수는 전역에 선언된 name 변수를 그대로 사용하겠다는 의미
//지역스코프에서 '새로' 선언되지 않으면 같은 변수이다. 2. 스코프의 종류
- 블록 스코프(block scope) : 중괄호
{}로 둘러싼 범위를 의미화살표함수는 블록 스코프로 취급
function greetSomeone(firstName) { let time = 'night'; if(time === 'night') { let greeting = 'Good Night'; } return greeting + ' ' + firstName;//reference오류 발생 //why? greeting 변수는 해당 블록안에서만 접근이 가능하기 때문에 블록 바깥에서는 사용X } greetSomeone('Steve'); - 함수 스코프(function scope) : 함수로 둘러싼 범위를 의미
3. 변수 선언
변수를 선언하는 방식은 크게 3가지로 var, let, const로 나뉜다.
| 특징/키워드 | let | const | var |
|---|---|---|---|
| 유효 범위 | 블록 스코프 함수 스코프 | 블록 스코프 함수스코프 | 함수 스코프 |
| 값 재할당 | 가능 | 불가능 | 가능 |
| 재선언 | 불가능 | 불가능 | 가능 |
var의 경우 화살표 함수의 블록 스코프는 무시하지 않는다. const는 변하지 않는 값, 즉 상수를 정의할 때 사용된다.
만약 선언 없이 변수를 할당하게 된다면 해당 변수는 var로 선언한 전역 변수로 취급되기 때문에 항상 let 이나 const로 선언해야한다.
✨side effect : 수많은 다른 함수와 로직이 포함된 경우 같은 이름으로 전역 변수를 선언하면 생기는 문제. 전역변수를 최소화하는 것이 side effect를 줄이는 좋은 방법이다.
✨use strict : strict mode는 브라우저가 보다 엄격하게 작동하도록 만들어주며 문법적으로 실수 한 부분을 에러로 판별한다.
클로저
클로저는 함수와 그 함수가 선언됐을 때의 어휘적 환경(Lexical environment)과의 조합이다.
여기서 말하는 함수란 반환된 내부 함수를 의미하고 그 함수가 선언될 때의 렉시컬 환경란 내부 함수가 선언됐을 때 스코프를 의미한다.
즉 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경인 스코프를 기억해 자신이 선언됐을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 말한다.(클로저는 자신이 생성될 때의 환경을 기억하는 함수)
1. 클로저의 특징
- 함수를 리턴하는 함수이며 함수를 리턴하는 함수가 클로저의 형태를 만든다.
- 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분됨
- 내부 함수는 외부 함수에 선언된 변수에 접근이 가능함
2. 클로저의 장점
- 데이터를 보존하는 함수 : 외부 함수의 실행이 종료되도 외부 함수 내 변수를 사용가능하다.
const adder = function (x) {
return function (y) {
return x + y;
}
}
const add5 = adder(5); //외부 함수(adder)가 실행은 끝났지만
add5(7); // 12 //외부 함수 내의 변수(x)는 사용 가능하다.
add5(10) // 15- 정보의 접근 제한 (캡슐화) : 클로저를 통해 불필요한 전역 변수 사용을 줄이고 스코프를 이용해 값을 안전하게 다룰 수 있다.
const makeCounter = () => {
let value = 0;
return {
//increase, decrease, getValue는 makeCounter의 내부함수
increase: () => {
value = value + 1;
},
decrease: () => {
value = value - 1;
},
getValue : () => value
}
}
const counter1 = makeCounter();
counter1.increase();
counter1.decrease();
counter1.getValue(); //0이미 작성된 함수를 재 사용하기기 위해 함수 하나를 완전히 독립적인 부품 형태로 분리하는 것을 모듈화 라고 한다. 위 예제에서 알 수 있듯이 클로저는 모듈화에 유리하다.
마무리 😂
오늘은 자바스크립트의 핵심개념인 원시 자료형, 참조 자료형에 대해 차이점을 알아보고 주요 문법인 스코프와 클로저에 대해 공부했다. 초반 자료형에 대한 부분은 기본에 미리 차이점을 공부해뒀던 var, let, const와 추가로 객체와 배열에 관한 자료형의 구분이라 쉽게 이해할 수 있었다. 하지만.. 오늘의 문제는 클로저였다. 처음 접해본 개념인 클로저는 나를 멘붕의 길로 빠지게 하였다. 나름 이해한 것 같아 종합 퀴즈를 풀어보는데 결과는...ㅎㅎ 아직 내가 잘 모르고 있었다!!!
클로저의 개념을 다시 한 번 익히도록 관련된 추가 자료 혹은 강의를 통해 다시 한 번 학습 해야겠다!
참고 자료
