쏘 개발로그

JS에서 함수를 선언하는 방법에는 크게 4가지가 있다.오늘은 각 방식의 특징과 차이점, 각각을 언제 사용하면 좋은지 등을 정리해보자. 1. 함수 선언문함수 선언문은 JS에서 함수를 선언할 때 가장 일반적으로 사용하는 방식이다.function greet() { console.log("hello");} 이러한 함수 선언문은 표현식이 아닌 일반 문으로 분리된다. 참고로, 문(statement)이란 프로그램의 흐름을 구성하는 실행 단위를 말하고, 표현식이란 값으로 평가될 수 있는 코드 조각을 의미한다.즉, 표현식은 항상 어떤 값을 만들어 내지만, 문은 그 자체로는 값이 되지 않는다. 1.1. 함수 선언문은 호이스팅된다.함수 선언문의 가장 큰 특징은 함수 전체가 호이스팅된다는 점이다. 예를 들어 아래와..

JS를 공부하다 보면 this라는 키워드를 굉장히 자주 마주치게 된다. this는 뭘 가리키는 걸까?보통 '현재 객체를 가리킨다', '자기 자신을 가리킨다' 정도로만 설명을 할 것이다. 그러나 이 설명은 반은 맞고 반은 틀리다 😅이번 글에서는 this가 무엇인지, 왜 헷갈리는지, 어떤 기준으로 결정되는지 등을 하나씩 정리해보자. 1. this란this는 현재 실행 중인 코드의 실행 주체를 가리키는 특별한 값이다.여기서 중요한 점은 this는 함수가 실행될 때 결정된다는 점이다.이 말은 즉, this는 고정된 값이 아니라 어떻게 호출되었는지에 따라 매번 달라지는 값이란 의미이다. 이러한 특성 때문에 JS에서 this가 헷갈리는 개념 중 하나가 된 것이 아닌가 싶다 ..ㅎㅎ 1.1. this는 어떻..

JS를 공부하다 보면 "함수는 일급 객체다"라는 말을 정말 많이 듣게 된다.그런데 막상 일급 객체에 대해서는 정의만 외우고 넘어가는 경우가 많은 것 같다. 따라서 이번 글에서는 일급 객체가 무엇인지, JS에서 일급객체가 왜 중요한지, 함수가 왜 일급 객체로 불리는지 등을 알아보고자 한다. 1. 일급 객체란그 값을 숫자(1)처럼 자유롭게 다룰 수 있는 걸 일급이라 부른다.숫자 1처럼 다룬다는 건 보통 아래의 의미를 갖고 있다.변수에 넣을 수 있다.함수에 넘길 수 있다.함수에서 리턴할 수 있다.배열이나 객체에 넣어둘 수 있다. 일급 객체도 마찬가지이다.따라서 아래의 4가지 조건을 모두 만족해야 일급 객체라 불릴 수 있다. 1.1. 조건 1: 변수에 할당할 수 있어야 한다.아래와 같이 숫자처럼 변수에 담..

JS로 웹 페이지를 다루다 보면 '이 버튼을 눌렀을 때 뭔가를 하고 싶은데, 이 버튼을 코드에서는 어떻게 가져오지?' 같은 질문을 던지게 된다.그리고, 이 질문에 대한 답이 바로 문서 객체 선택(DOM selection)이다. JS는 단독으로 화면을 바꾸진 못하고, HTML 문서를 객체로 변환한 구조(DOM)를 통해서만 요소를 선택하고, 수정하고, 이벤트를 연결할 수 있다.즉, 문서 객체를 선택한다는 건 화면에 있는 요소를 JS 세계(?)로 가져오는 것이라 볼 수 있다. 1. DOM이란브라우저는 HTML을 파싱한 후, 이를 트리 구조의 객체로 변환한다.그리고, 이 구조를 DOM(Document Object Model)이라 부르는 것이다.(DOM은 추후 포스팅에서 더 자세히 다루도록 하고, 오늘은 여..

1. 콜백 함수란JS에서 콜백 함수란 다른 함수의 인자로 전달되어, 특정 시점에 호출되는 함수를 의미한다.함수 안에 함수를 넣는다는 문법이 조금 낯설겠지만, 이 콜백이라는 게 JS의 철학을 그대로 드러내주는 아주 중요한 개념이다. JS는 함수를 단순한 코드 조각이 아니라 값처럼 다룰 수 있는 일급 객체로 취급한다.그래서 함수를 변수에 담고, 다른 함수에 전달하고, 반환할 수 있는 것이다.그리고 콜백이 이 성질을 가장 적극적으로 활용한 패턴 중 하나이다. 1.1. 콜백을 자주 사용하는 이유콜백은 어떤 일이 끝난 뒤 or 어떤 조건이 만족됐을 때 실행할 코드를 미리 맡겨두기 위해서 사용한다. 예를 들면, '서버에서 데이터를 받아오면 화면을 갱신해줘', '버튼을 클릭하면 이 함수를 실행해줘' 같은 요구를 생..

JavaScript에서 배열을 처음 배울 때 '배열은 계속 값이 바뀌는데 .. const로 선언하면 안 되는 거 아닌가?' 라는 고민이 생겼었다.그리고 결론부터 말하자면, 배열은 let과 const 둘 다로 선언할 수 있으며, 심지어 오히려 배열을 const로 선언하는 경우가 더 많다고 한다. 이게 가능한 이유는 let과 const가 배열이 변하느냐를 기준으로 동작하는 게 아니라, `변수가 무엇을 가리키는지(= 참조하는지)를 다시 바꿀 수 있느냐(= 재할당이 가능하냐)`를 기준으로 동작하기 때문이다. 1. 배열배열은 보통 아래와 같이 쓰는데, 마치 숫자들을 넣어논 상자 같은 느낌이다.const arr = [1, 2, 3]; 그러나 JavaScript에서 배열은 원시값이 아니라 객체임에 주의해야 한다..

JavaScript를 처음 배울 때, 변수를 선언하는 세 가지 방법으로 var, let, const를 배우게 된다.그리고 대부분이 값이 바뀌면 let, 바뀌지 않으면 const라 외우고 넘어간다.그러나 실제로 let과 const가 등장한 이유는 훨씬 깊고, JS의 실행 컨텍스트, 스코프 모델, 예측 가능성과 직결되어 있다. 따라서 이번 글에서는 아래의 것들을 하나씩 정리해보고자 한다.var가 문제가 되었던 이유let과 const는 어떤 문제를 해결하고자 등장한 건지스코프, 호이스팅, TDZ, 불변성 관점에서 어떻게 동작하는지 1. var의 구조적 한계ES6 이전의 JS에는 변수 선언 방법이 사실상 하나 뿐이었다. 바로, 아래와 같이 var를 이용하여 선언하는 것이다.var count = 1; 그러나..