본문 바로가기

JavaScript

 (22)
[JavaScript] 참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해' 저장되고 복사된다는 점이다. let message = "Hello!"; let phrase = message; 위 코드를 실행하면 두 개의 독립된 변수에 각각 문자열 "Hello"가 저장된다. 그런데 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. let user = { name: "John" }; 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조'할 수 있는 값이 저장된다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않는다. let user = { name: "John" }; let admin = user; ..
[JavaScript] 객체 - 객체 생성 방법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 주로 객체리터럴 방법을 사용한다. - 리터럴과 프로퍼티 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30 // 키: "age", 값: 30 }; 콜론: 기준으로 왼쪽엔 키가, 오른쪽엔 값이 위치한다. 프로퍼티 키는 프로퍼티 '이름'혹은 '식별자'라고 부른다. // 프로퍼티 값 얻기 alert( user.name ); // John alert( user.age ); // 30 // 불린형 프로퍼티 추가 user.isAdmin = true; // 프로퍼티 삭제 delete user.age; - 여러 ..
[JavaScript] 화살표 함수 함수 표현식보다 단순하고 간결한 문법으로 함수를 만드는 방법은 화살표 함수를 사용하는 것이다. // 함수 표현식 let func = function(arg1, arg2, ...argN) { return expression; }; // 화살표 함수 let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 arg1, arg2...를 받는 함수 func가 만들어진다. 함수 func는 화살표 => 우측의 표현식을 평가하고, 평가 결과를 반환한다. // 인수가 하나밖에 없다면 괄호를 생략할 수 있다. let double = n => n * 2; // let double = function(n) { return n * 2 }과 거의 동일합니다. alert( d..
[JavaScript] 함수 표현식 함수 선언 방식 외에 함수 표현식을 사용해서 함수를 만들 수 있다. // 함수 선언문 방식 function sayHi() { alert( "Hello" ); } // 함수 표현식 let sayHi = function() { alert( "Hello" ); }; 또한 변수를 복사해 다른 변수에 할당하는 것처럼 함수를 복사해 다른 변수에 할당할 수도 있다. function sayHi() { // (1) 함수 생성 alert( "Hello" ); } let func = sayHi; // (2) 함수 복사 func(); // Hello // (3) 복사한 함수를 실행(정상적으로 실행됩니다)! sayHi(); // Hello // 본래 함수도 정상적으로 실행됩니다. (1)에서 함수 선언 방식을 이용해 함수를 생성..
[JavaScript] 함수 - 지역 변수 : 함수 내에서 선언한 변수인 지역 번수는 함수 안에서만 접근할 수 있다. function showMessage() { let message = "안녕하세요!"; // 지역 변수 alert( message ); } showMessage(); // 안녕하세요! alert( message ); // ReferenceError: message is not defined (message는 함수 내 지역 변수이기 때문에 에러가 발생.) - 외부 변수 : 함수 내부에서 함수 외부의 변수인 외부 변수에 접근할 수 있다. let userName = 'John'; function showMessage() { let message = 'Hello, ' + userName; alert(message); } s..
[JavaScript] switch문 여러개의 if조건문은 switch문으로 바꿀 수 있다. switch문을 사용한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게 해준다. - 문법 / switch문은 하나 이상의 case문으로 구성된다. default문도 있지만 필수는 아니다. switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 변수x의 값과 첫 번째 case문의 값 'value1'를 일치 비교한 후, 두 번째 case문의 'value2'와 비교한다. case문에서 변수x의 값과 일치하는 값을 찾으면 해당 case문의 아래 코드가 실행된다. 이때,..
[JavaScript] 반복문의 출력값 예상하기 - while 반복문의 마지막 값 : 아래 두 예시는 같은 값을 출력할까? // 전위형 증가 연산자를 사용한 경우(++i): let i = 0; while (++i < 5) alert( i ); // 후위형 증가 연산자를 사용한 경우(i++): let i = 0; while (i++ < 5) alert( i ); 해답 : 더보기 더보기 전위형 증가 연산자를 사용한 경우엔 1부터 4까지 출력됩니다.++i는 i를 먼저 증가시키고 새로운 값을 반환하기 때문에 첫 번째 while 반복문에선 1과 5를 비교(1 < 5)하고, 얼럿 창엔 1이 출력됩니다.i = 4 이후에 i의 값이 5로 증가하면 while(5 < 5)안의 비교가 실패하기 때문에 반복문은 멈춥니다. 따라서 5는 출력되지 않습니다. 1에 이어서 2, ..
[JaveScript] nullish 병합 연산자 '??' * 최근에 추가된 문법 * 병합 연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정 되어있는'변수를 찾을 수 있다. 예를 들어 a ?? b의 평과 결과 a가 null도 아니고 undefined도 아니면 a 그 외의 경우는 b x = a ?? b // 위 코드와 같은 코드 x = (a !== null && a !== undefined) ? a : b; 이런 식으로 변수가 여러 개 있을 경우 값이 정해진 변수를 간편하게 찾아낼 수 있다. let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ..

티스토리툴바