시작하며
오늘은 javaScript의 핵심 개념들을 배우고 새로운 문법에 대해서 배웠다. 그동안 코딩을 하면서 왜 오류가 나는지 몰랐던 부분, 추상적으로만 이해하고 정확한 원리는 몰랐던 부분들을 알 수 있었다. 아직 javaScript의 모든 내용을 배운 것이 아니기 때문에 기존에 잘못 이해했거나 혼동하는 부분들의 개념을 확실하게 잡아가야 한다고 생각했다.
javaScript
원시 자료형과 참조 자료형
원시 자료형은 하나의 정보만 담고 있고 string, number, bigint, boolean, undefined, symbol, (null) 6가지 타입으로 분류되며 변수에 하나의 데이터만 담긴다. 원시 자료형은 값 자체에 대한 변경이 불가능하지만, 변수에 다른 데이터를 할당할 수 있다.
let word = "GWANGUI AN"
word = "BE DEVELOPER"
// word라는 변수에 재할당을 하여 변수에 담긴 내용을 변경은 가능하다.참조 자료형은 변수에는 자료의 주소값만 저장해놓고 해당 주소가 가리키는 별도의 데이터 보관함(heap)에 정보를 저장하는 형태를 말하는데 대표적으로 배열, 객체, 함수가 있다.
let x = { foo: 3 };
let y = x;
y.foo = 2;
console.log(x) // { foo: 2};변수에는 주소값만 저장되기 때문에 y에 x를 할당한 후 y.foo의 value를 재할당하면 같은 데이터 보관함의 주소가 저장되어 있는 x의 값도 변경되게 된다.
console.log([1,2,3] === [1,2,3]); //false
console.log({ foo: 'bar' } === { foo: 'bar' }); //false참조 자료형은 heap이라는 별도의 메모리 저장 공간을 사용하고 참조 자료형의 ===는 주소값이 같은지를 확인하기 때문에 false가 출력된다.
스코프
변수에는 접근할 수 있는 범위가 존재하는데 이를 스코프라고 부른다.
let username = 'GWANGUI AN';
if (username) {
let message = `Hello, ${username}!`;
}
console.log(message); //Refernce Errorif {}내에서 message란 변수가 선언, 할당 되었기 때문에 해당 범위 밖에서 message를 출력하려고 하면 Refernce Error가 발생하게 된다. 바깥쪽 스코프에서는 안쪽 스코프에서 선언된 변수를 사용할 수 없지만 username처럼 안쪽 스코프에서는 바깥쪽 스코프에서 선언된 변수를 사용할 수 있다.
스코프는 중첩이 가능하며, 가장 바깥쪽에 있는 스코프를 전역 스코프(Globla scope), 안쪽에 있는 스코프는 지역 스코프(Local scope)라고 부른다.
let word = 'GWANGUI AN';
function showWord() {
let word = 'BE DEVELOPER';
console.log(word)
}
console.log(word); //'GWANGUI AN'
showWord(); //'BE DEVELOPER'
console.log(word); //'GWANGUI AN'showWord라는 함수의 지역 스코프에서 word라는 변수를 새로 선언해서 'BE DEVELOPER'을 할당하고 해당 스코프에서 출력할 시 지역 스코프는 전역 변수보다 높은 우선순위를 가지기 때문에 'BE DEVELOPER'가 출력된다. 하지만 전역스코프에서는 지역 스코프로 접근이 불가능하기 때문에 함수를 실행한 후에도 word에는 'GWANGUI AN'가 할당되어진 상태로 유지된다.
let word = 'GWANGUI AN';
function showWord() {
word = 'BE DEVELOPER';
console.log(word)
}
console.log(word); //'GWANGUI AN'
showWord(); //'BE DEVELOPER'
console.log(word); //'BE DEVELOPER'그러나 지역 스코프에서는 전역 스코프의 변수를 사용할 수 있기 때문에 선언이 아닌 재할당을 해준 경우에는 함수 실행시 전역 스코프의 word에 'BE DEVELOPER'가 재할당 된다.
클로저
클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다라고 정의되어 있는데 풀어서 설명하면 어떠한 함수를 출력하는 함수(중첩되어진 함수)가 있다고 가정할 시 외부함수와 출력되는 내부함수로 구분할 수 있다. 함수보다 바깥쪽의 스코프에서는 함수 내의 스코프의 환경에는 접근이 불가능하지만 출력되는 내부함수가 자신이 선언되었을 때의 스코프를 기억하여 함수 밖에서 호출되어도 그 스코프로 접근할 수 있는 함수를 말한다.
let adder = function(x) {
return function(y) {
returm x + y;
}
}
let add5 = adder(5);
console.log(add5(7)); //12
console.log(add5(10)); //15익명함수를 출력하는 adder라는 함수가 있을때 function(x)를 외부함수, function(y)라고 할때 add5에 adder(5)를 할당한 수 add5(7)을 실행할 시 외부함수 내의 x의 값에 바깥쪽의 스코프에서 접근이 가능하여 함수가 실행된 후에도 5라는 값이 계속 사용이 가능하여 12가 출력되게 된다.
