[JavaScript]코딩앙마 기초(2)

Joy Ming·2023년 7월 4일

코딩앙마

목록 보기
3/13

switch

모든 switch문은 if else 문으로 대체 가능함
케이스가 다양할 경우 보다 간결하게 쓸 수 있음.

break를 만나면 switch문을 빠져나옴

그런데 바나나를 입력했을때 바나나 케이스에 해당하는 200원 말고도 아래꺼 모두 출력하게 됨

그래서 위와 같이 break를 같이 써줘야 빠져나오고 케이스에 해당하는 하나만 나옴

if문에서의 else로 default를 사용함.
만약에 디폴트 없이 청포도 같은 없는 값 입력하면 아무것도 출력하지 않음.

멜론이랑 수박이 같은 값을 출력하므로 위와 같이 케이스 두개를 연달아 작성도 가능함.

함수

하나의 동작을 자주 사용하거나 여러곳에서 사용하면 재활용이 용이하도록 함수를 사용.(중복피하고 유지보수 용이)


매개변수 여러개인경우 쉼표로 구분

위와 같이 호출

매개변수가 있는데 인풋 없을 경우 처리 처리


함수 내에서 없는 값 출력했더니 undefined 출력됨

전역변수와 지역변수

그런데 위 msg는 함수밖에서는 사용불가, 지역변수라서

그래도 전역변수로 밖에서 선언하고 나서 함수안에서 변형하는건
밖에서 호출했을때 변형된거 반영되어 나옴


함수내부에서 전역변수와 동일한 이름의 지역변수를 선언할 수 있고 서로 간섭받지 않음.

or 연산자 활용해서 매개변수 값 받지 못했을경우 처리

함수에 디폴트값을 설정해 매개변수 값 받지 못했을 경우 처리

return으로 값 반환


위경우 알림창만뜨고 undefined 반환
즉 return문이 없을 경우 함수는 undefinded반환하고
return문이 있더라도 return; 과 같이 아무값도 반환하지 않을 경우에도 undefinded를 반환

또한 return문을 만나면 함수는 그 즉시 종료됨

함수표현식, 화살표함수

사용방식은 동일


실행하는 방식, 동작하는 방식이 동일함.

그럼 차이점?

인터프리터언어 ; 순차적으로 실행하고 즉시반환하는

호이스팅

자바스크립트 내부알고리즘 때문에 함수선언문 위에 함수실행코드가 있더라도 정상적으로 동작함.
실행전 코드내 모든 함수(선언문)를 찾아서 생성함.


그런데 표현식은 선언문과 달리 코드에 도달해야만 생성됨

화살표함수



function사라지고 대신 괄호()뒤에 화살표생김

리턴문은 ()괄호로 도 가능


리턴문이 한줄이면 괄호도 생략가능


인수가 하나면 괄호도 생략가능


인수가 없는 함수의 경우 괄호생략불가



리턴문이 있다해도 리턴문 전에 여러줄의 코드가 있을경우 일반괄호()사용불가.

객체(object)

객체는 키와 값으로 구성된 프로퍼티가 들어감.
각 프로퍼티는 쉼표로 구분, 마지막 쉼표는 있는게 수정삭제에 용이.


단축 프로퍼티


이거를

이렇게 대체 가능

프로퍼티존재여부확인


없는 값에 접근해도 에러 안남
in연산자 활용해서 키값이 존재하는 지 확인가능
어떤값이 나올지 확신할수없을때사용(함수인자를 받거나 api통신할ㄸㅐ)

for in반복문

객체를 순회하면서 값을 얻기가능

기타적용


축약형 적용하면


그런데 나이정보가 없는 제인도 참 나옴

user.age가 없어서 undefinde라서 if문이 false가 되어서 아래의 true를 반환

위와 같이 in사용해서 수정
user에 age값이 있으면 true, 없으면 false

this, method

단축구문으로도 작성가능

객체와 메서드의 관계


객체안에 있는 변수를 가르킬때 위와같이도 가능하지만 문제발생할수있음

위와 같이 this를 사용함.
user.sayHello를 호출하면 user가 this가 됨

this는 실행시점(런타임)에 결정됨

그런데 함수를 화살표함수로 선언했다면? 동작이 달라짐

브라우저 환경에서 전역객체는 window, node.js에선 global

새로운 변수에 객체담은 변수 할당하고
새로운 변수를 이용해 객체를 수정하면 그 객체가 아예 수정됨.
그래서 처음 객체담은 변수를 통해 값을 호출해도 변한값 출력


name이 없다고 에러남
boy의 name은 사라진 것.
boy가 null이니 콘솔안의 코드가 에러남


this를 쓰니 정상동작


위 같은 경우 window가 출력됨
객체의 메소드 작성시 화살표작성은 안하는게좋음

배열(Array)

철수에서 민정으로 바뀜

배열의 특징


배열이 가진 요소의 갯수를 반환

배열이 가진 메소드




배열의 요소를 돌면서 요소를 day라는 이름으로 접근


profile
Back-end

0개의 댓글