-
초기화, 할당, 선언JavaScript 2024. 10. 15. 01:22
const, let, var 차이가 뭔지 좀 더 분명하게 알게 된 것같다.
첫 학원에서 배울때는 무조건 var로 배웠고.
인강에선 절대 바뀔 일이 없는 값에는 const. 그리고 var는 오래되어서 let으로 바꿔써라.
const는 다시 값을 바꿀 수 없고 let은 var 처럼 재할당이 가능하기 때문에 그렇게 써라.
정도로 이해하고 면접때도 이렇게만 설명했다.
물론, 면접대비로 함수 스코프, 블록 스코프 두종류와 호이스팅, 중복선언, 변수 재할당, TDZ에 대해 정리된
공식문서나 다른 정리된 포스팅을 읽었는데
변수 재할당, 중복선언은 이해가 됐지만 스코프는 어느 범위만 된다는 것 같다 이해했지 함수랑 블록은 무슨 차이인지
선언이 초기화랑 할당 다 같은말 아닌가? 그 미묘한 차이가 전혀 이해가 안됐어서 아는 만큼 말했다. 모르는 건 모른다고 확실히 말했다.
물론 외우듯 블로거의 설명을 대답할 수 있다. 근데 거기까지일 뿐 개발한 포폴에서 예시를 든다든가, 남들에게도 이해하기 쉬운 비유를 들어가며 강사님처럼 설명하여 면접관을 이해시킬 수 없다.
근데 이제 실무를 하니 이해가 된다.
개발하다가 에러를 마주했던게 저런 개념때문이었다.
1. chart.js를 활용해 차트를 문항별로 그려줬는데 var쓰는 걸 지양하자고 해서 const로 했다. 하지만 문항 별로 차트가 많이 그려지니, 즉 절대 바뀔 일이 없는 값은 아니기에 let으로 했으나. 오류 뿜뿜.
async.eachSeries 로 drawChart 함수를 호출하는데
차트가 이미 그려졌다는 에러가 떴기에 중복선언이 가능한 var로 해결했는데. 시간이 충분했다면 let으로 선언하면서도 그전 차트의 영향을 받지 않는 방법을 택했을 것 같다. 시도했던 방법은 그전 차트를 없애고 선언하니 오류는 안나는데 배열항목이 11개면 마지막 항목만 그려져서 이 부분을 해결하려다가 프로젝트 팀원이 도중 퇴사하면서 시간상 결국 var로 넘어갔던 기억이 난다.
다시 보다보니 let labels도 계속 재선언 되고 있을텐데 여기는 왜 에러가 안날까 하는 의문이 생겼다.
function drawChart() { var ctx = document.getElementById('chart-canvas'); // 캔버스 컨텍스트는 함수 전체에서 참조될 가능성이 큼 let labels = ['Label 1', 'Label 2', 'Label 3']; // 라벨은 특정 데이터 처리 블록 내에서만 사용 // 차트를 그리는 부분 var chart = new Chart(ctx, { type: 'bar', data: { labels: labels, // labels는 여기서만 참조됨 datasets: [{ label: 'My Data', data: [10, 20, 30] }] } }); }
2. 코드정리하다가 선언위치 옮기다 오류가 나기도 한다. 그럴때 호이스팅 TDZ 스코프를 잘 확인하고 오류를 이해하자.
let daljkad 이렇게 까지만 적는게 선언. 초기화는 안됨.
let daljkad = '나무'; 이렇게 값을 할당하는데 처음 할당하는 것에 한해서 초기화라고 함.
daljkad ='232'; 이렇게 재할당하는 것에 대해서는 초기화라고 안함.
애매한 개념은 chatGPT에게 물어보면 잘 설명해줘서 좋다.
할당이 더 큰 개념이고, 초기화는 할당의 특정한 형태로 볼 수 있습니다. 개념을 구분해 보면 다음과 같습니다:
1. 할당 (Assignment):
- 할당은 변수를 선언한 후, 그 변수에 값을 넣는 행위를 의미합니다.
- 할당은 여러 번 일어날 수 있으며, 이미 선언된 변수에 새로운 값을 넣는 것도 할당입니다.
2. 초기화 (Initialization):
- 초기화는 변수에 처음으로 값을 할당하는 것을 의미합니다. 변수가 선언된 직후에 첫 번째로 값을 넣는 것이 초기화입니다.
- 선언과 동시에 초기화가 이루어질 수도 있고, 나중에 할당되는 경우에도 첫 번째 할당을 초기화라고 부릅니다.
결론:
- 할당은 변수에 값을 넣는 모든 행위를 포함하는 더 큰 개념입니다.
- 초기화는 변수에 처음으로 값을 할당하는 것을 뜻하며, 할당의 한 유형입니다.
728x90'JavaScript' 카테고리의 다른 글
React. 쉬운 시작. 마인드 셋. (0) 2024.04.27 javascript 변수 (0) 2023.01.27 Asynchronous JavaScript (1) - 싱글 스레드, blocking(블로킹) 현상 (0) 2021.08.16 로그인 구현 (0) 2021.08.15 OR 연산자의 피연산자가 alert 라면? (0) 2021.08.15