본문 바로가기

TIL

 (92)
<모던 자바스크립트 Deep Dive> 13장 스코프 요약 13. 스코프 1) 스코프(scope) - 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 유효 범위가 결정됨 - 즉, 스코프는 식별자가 유효한 범위를 뜻함 - 자바스크립트 엔진은 식별자를 검색하여 어떤 식별자를 사용할지 결정할 때에 스코프를 이용함 - 일반적으로 컴퓨터에서 속한 폴더가 다르면 파일명이 같더라도 다르게 취급되는데, 스코프 또한 식별자 이름이 같더라도 스코프가 다르면 다르게 취급됨(스코프 = 네임스페이스) 2) 스코프의 종류 구분 설명 스코프 변수 전역 코드의 가장 바깥 영역 전역 스코프 전역 변수 지역 함수 몸체 내부 지역 스코프 지역 변수 - 전역 변수는 어디에서든지 참조 가능 - 지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조 가..
<모던 자바스크립트 Deep Dive> 12.5~12.7장 함수 요약 5) 함수 호출 - 함수를 가리키는 식별자 + 함수 호출 연산자(0개 이상의 인수)로 호출 1. 매개변수와 인수 : 함수를 실행하기 위해 필요한 값을 외부에서 내부로 전달할 때 사용 - 인수 : 값으로 평가될 수 있는 표현식. 개수와 타입에 제한 없음 - 매개변수 : 함수 몸체 내부에서 변수와 동일. 함수 호출 시 변수와 마찬가지로 undefined로 초기화 후 인수가 할당됨 - 매개변수 > 인수일 경우 인수가 할당되지 않은 매개변수의 값은 undefined, 매개변수 < 인수일 경우 초과된 인수는 무시(버려지지 않고, arguments 객체의 프로퍼티로 보관됨) function add(x, y) { console.log(arguments); // Arguments(3) [2, 5, 10, callee:..
<모던 자바스크립트 Deep Dive> 11~12.4장 원시 값과 객체의 비교, 함수 요약 11. 원시 값과 객체의 비교 1) 원시 타입과 객체 타입의 차이점 - 원시 값은 변경 불가능, 객체 타입의 값은 변경 가능 - 원시 값을 변수에 할당하면 변수에 실제 값이 저장됨, 객체를 변수에 할당하면 변수에 참조 값이 저장됨 - 원시 값을 갖는 변수를 다른 변수에 할당할 경우 원시 값이 복사되어 전달(값에 의한 전달), 객체를 가리키는 변수를 다른 변수에 할당할 경우 참조 값이 복사되어 전달(참조에 의한 전달) 2) 원시 값 - 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 - 값 : 변수에 저장된 데이터로서 표현식이 평가되어 생성된 결과 - 원시 값인 즉슨 '변경 불가능한 값'이므로 데이터의 신뢰성이 보장됨 - 원시 값을 할당한 변수는 변수의 값을 바꾸려면 재할당하는 방법밖에는 없음 -..
<모던 자바스크립트 Deep Dive> 09~10장 타입 변환과 단축 평가, 객체 리터럴 요약 09. 타입 변환과 단축 평가 1) 타입 변환 - 명시적 타입 변환 : 개발자가 의도를 가지고 값의 타입을 변환시키는 것 ex. 여러 방법을 이용하여 문자열, 숫자, 불리언 타입으로 변환시키는 것이 가능 - 암묵적 타입 변환 : 자바스크립트 엔진에 의해 값의 타입이 자동으로 변환되는 것 ex. 맥락에 따라 문자열, 숫자, 불리언 타입으로 변환 일어남 - 타입 변환은 기본적으로 원시 값을 변경하는 것이 아니라 기존 원시 값을 사용해 새로운 원시 값을 생성하는 것임 - 특히, 암묵적 타입 변환은 새로운 타입의 값 생성 후 한 번 쓰고 버림 - 두 가지 타입 변환에서 무엇보다 중요한 것은 타입 변환이 예측 가능해야 한다는 것 2) 단축 평가 - 단축 평가 : 논리곱(&&) 연산자와 논리합(||) 연산자가 논리..
<모던 자바스크립트 Deep Dive> 07~08장 연산자, 제어문 요약 07. 연산자 1) '연산자' - 하나 이상의 표현식을 대상으로 작업을 수행하여 하나의 값을 만듦 - 연산의 대상이면서 값으로 평가될 수 있는 표현식이 '피연산자' - 피연산자 + 연산자의 조합도 표현식임 2) 산술 연산자 - 이항 산술 연산자(2개의 피연산자를 산술 연산함), 단항 산술 연산자(1개의 피연산자를 산술 연산함)로 구분 - 이항 산술 연산자의 종류로는 +, -, *, /, % - 단항 산술 연산자의 종류로는 ++, --, +, - - ++, -- 연산자는 위치에 따라 의미가 달라지며(전/후), 피연산자의 값을 변경하는 부수 효과 존재 - +, - 연산자는 숫자 타입이 아닌 피연산자일 때 피연산자를 숫자 타입으로 변환함 - + 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로..
<모던 자바스크립트 Deep Dive> 04~06장 변수, 표현식과 문, 데이터 타입 요약 04. 변수 1) 변수의 존재 목적 - 간단하게는 데이터의 관리 - 사람처럼 동작하는 자바스크립트의 엔진이 데이터 처리를 위해 데이터를 저장해둔 값의 주소를 변수로 저장하여 관리하기 위함 - 즉, 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간 식별을 위해 붙인 이름 2) ‘할당’ - 변수에 값을 저장하는 행위 - 할당 연산자 ‘=’ 사용 - 재할당도 가능(상수는 불가능) 3) ‘참조’ - 변수에 저장된 값을 불러옴 4) ‘식별자’ - 변수 이름(어떤 값을 구별해서 식별할 수 있는 고유한 이름) - 식별자는 데이터의 값이 아닌 데이터가 저장되어 있는 메모리의 주소를 기억함 5) ‘선언’ - 변수를 생성하는 것 - 변수를 사용하기 위해 반드시 필요한 과정 - var, let, cons..
<ReactJS 리액트js> 리액트 시작하기 - 리액트 설치하기 리액트는 자바스크립트 라이브러리의 일종으로, 개별 프로그램으로 존재하는 것이 아니기 때문에 단순히 다음의 링크를 html 파일에 import 해주면 된다(복사해서 붙여넣기). 링크는 각각 react와 react-dom에 대한 것이다. - JSX JSX는 자바스크립트를 확장한 문법이다. html의 문법 형태로 react 요소를 생성할 수 있게 돕는다. JSX를 사용하지 않으면, createElement 함수를 사용해야 하므로 번거로워진다. JSX를 사용하려면 html 문법 요소를 브라우저가 이해할 수 있는 형태로 자동 변환해주는 Babel을 이용하는 것이 편리하다. Babel 역시 import 방식으로 설치해주면 된다. 링크는 다음과 같다. 참고 : 노마드 코더
<자바스크립트 Javascript> const 키워드 - const 키워드 const는 변하지 않는 값인 상수를 위해 사용되나, 반드시 상수의 경우에만 사용하는 것은 아니다. const 키워드는 let 키워드와 그 특징이 대부분 동일하다. - 선언과 초기화 const이 let과 동일한 점으로는 블록 레벨 스코프를 갖는다는 것이다. let과 다른 점은, let이 재할당이 자유로운 데 비해, const는 상수라는 특성으로 인해 재할당이 불가하다는 것이다. 또한, const는 반드시 선언과 동시에 할당이 이루어져야 한다. - 상수의 사용 const 키워드로 선언한 상수는 가독성과 유지보수의 편의성 때문에 적극적으로 그 사용이 권장된다. 또한 const는 객체에도 사용이 가능하며, 이 때에도 재할당은 불가하다. - const와 객체 앞서 언급한 것처럼 const는..
<자바스크립트 Javascript> let 키워드 (2) (+ 클로저) - 클로저의 사용 for 반복문의 초기화 식에 사용된 변수에 var 키워드를 적용하면, 이것이 전역 스코프가 되어 의도와 다른 결과를 출력하게 된다. 이를 해결하기 위해 클로저를 사용할 수 있다. 하지만 var 키워드 대신 let 키워드를 사용하면, 클로저를 사용하지 않고도 의도한 결과 출력이 가능하다. for 반복문의 초기화 식에서 let 키워드로 선언한 변수는 지역 변수로서 작용하게 되기 때문이다. *클로저(closure)란? 클로저는 자바스크립트 고유의 개념은 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 중요하게 다뤄지는 특징이다. 예로, 외부함수 내에 내부함수를 선언하였을 때에 내부함수는 외부함수에 포함되는 관계를 갖는다. 따라서 보통의 경우 외부함수가 종료되면 내부함수 역시 ..
<자바스크립트 Javascript> let 키워드 (1) - 함수 레벨 스코프 v.s. 블록 레벨 스코프 함수 레벨 스코프는 함수를 기준으로, 블록 레벨 스코프는 블록을 기준으로 변수의 유형이 결정된다. 즉, 함수 레벨 스코프는 함수 내에서 선언되면 지역 변수로 함수 외부에서 선언되면 전역 변수로 취급하고, 블록 레벨 스코프는 모든 코드 블록 내부에서 선언된 변수를 지역 변수로 취급한다. 자바스크립트는 이 중 함수 레벨 스코프를 따른다. - 블록 레벨 스코프를 따르는 let 기존의 var 키워드로 선언된 변수는 함수 레벨 스코프를 따른다. 그러나 ES6부터는 let 키워드가 추가되면서, let 키워드로 선언된 변수는 블록 레벨 스코프를 따르게 되었다. - let 키워드의 특징 1) 변수 중복 선언 불가능 기존의 var 키워드에서 변수 이름을 중복으로 선언이 가..

티스토리툴바